纯CSS实现nav导航栏+jQuery实现article区DIV切换
效果图：
main.html 代码：
<!DOCTYPE html>
<html>
<head>
<title>MyHomepage</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/layout.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul li a').click(function() {
var className = $(this).attr('class');
$('article div.'+className).show().siblings().hide();
});
});
</script>
</head>
<body>
<div class="outer">
<header>
<div>Get busy living or get busy dying </div>
</header>
<nav>
<ul>
<li>
<a href="#" class="homepage">首 页</a>
</li>
<li>
<a href="#">明 星</a>
<ul>
<li><a href="#" class="bruceli">李小龙</a></li>
<li><a href="#" class="jackcheng">成龙</a></li>
</ul>
</li>
<li>
<a href="#">风景名胜</a>
<ul>
<li><a href="#" class="tiananmen">天安门</a></li>
<li><a href="#" class="dongfangmingzhu">东方明珠</a></li>
<li><a href="#" class="yulongxueshan">玉龙雪山</a></li>
</ul>
</li>
<li>
<a href="#">风景名胜</a>
<ul> </ul>
</li>
<li>
<a href="#">风景名胜</a>
<ul> </ul>
</li>
<li>
<a href="#">风景名胜</a>
<ul> </ul>
</li>
<li>
<a href="#">风景名胜</a>
<ul> </ul>
</li>
<li>
<a href="#">风景名胜</a>
<ul> </ul>
</li> </ul>
</nav>
<aside>
<div>
<h2>小导航</h2>
<ul>
<li><a href="#" class="guilin">桂林山水甲天下</a></li>
<li><a href="#" class="guilin">桂林山水甲天下</a></li>
<li><a href="#" class="guilin">桂林山水甲天下</a></li>
<li><a href="#" class="guilin">桂林山水甲天下</a></li>
<li><a href="#" class="guilin">桂林山水甲天下</a></li>
</ul>
</div> </aside>
<article >
<div class="homepage">
首页 </div>
<div class="bruceli">
李小龙 </div>
<div class="jackcheng">
成龙 </div>
<div class="tiananmen">
天安门 </div>
<div class="dongfangmingzhu">
东方明珠 </div>
<div class="yulongxueshan">
玉龙雪山 </div>
<div class="guilin">
桂林米粉 </div>
</article >
<footer>
I'm footer </footer> </div>
</body> </html>
layout.css 代码：
/* layout.css */
.outer {
margin: 0 auto;
width: 80%;
height: 100%;
min-width: 1000px;
/*background: gray;*/
/*min-height: 600px;*/
}
header {
width: 100%;
height: 80px;
background-color: #663366;
border-radius: 10px;
}
header div {
line-height: 80px;
text-align: center;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
}
nav {
margin-top: 5px;
width: 100%;
height: 50px;
background-color: #666600;
border-radius: 10px;
font-size: 20px;
}
aside {
float: left;
margin-top: 5px;
width: 19%;
height: 400px;
background-color: #669900;
}
aside div {
margin-top: 20px;
margin-left: 40px;
}
aside div ul {
margin-top: 10px;
font-size: 16px;
}
aside div ul li {
line-height: 30px;
}
aside div ul li a {
text-decoration: underline;
}
article {
float: left;
margin-top: 5px;
margin-left: 5px;
width: 80%;
height: 800px;
}
article div {
width: 100%;
height: 800px;
background-color: #6699CC;
display: none;
font-size: 300px;
}
article div{
display: none;
}
article div.homepage{
display: block;
}
footer {
margin-top: 810px;
width: 100%;
height: 40px;
background-color:#9933FF;
}
ul li{
list-style: none;
}
nav ul li {
float: left;
width: 120px;
padding: 12px 0px;
text-align: center;
display: inline-block;
opacity: 0.9;
background: #663399;
border-radius: 10px;
}
nav ul li ul {
width: 120px;
margin-top: 12px;
display: none;
font-size: 16px;
}
nav ul li ul li{
width: 100px;
height: 20px;
margin-left: 10px;
border-radius: 10px;
background-color: #993399;
}
nav ul li:hover ul {
display: block;
position: absolute;
text-decoration: underline;
}
nav ul li:hover a {
color: #CC99FF;
}
nav ul li ul li a:hover {
text-decoration: underline;
}
style.css 代码
/* style.css */
body {
background: url("../image/black-Linen.jpg");
font-size: 14px;
font-family: "微软雅黑";
font-weight: normal;
}
reset.css 代码
/* reset.css */
*,body,div,h1,h2,h3,h4,h5,h6,nav,ul,li,img {
margin:0;
padding:0;
}
a {
text-decoration:none;
}
a:visited {
color:white;
}
以上。
纯CSS实现nav导航栏+jQuery实现article区DIV切换的更多相关文章
- 淘宝分类导航条；纯css实现固定导航栏
效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- 如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- 纯CSS实现侧边栏/分栏高度自动相等
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...
- 纯css实现京东导航菜单
纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...
- 【CSS Demo】纯 CSS 打造 Flow-Steps 导航
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三 通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...
- 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...
- html+css 制作简易导航栏
二话不说直接上代码(萌新:实在也没什么好说的) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...
随机推荐
- 由一个Servlet 看java入门常犯的几个错误
安装完java环境后,cmd-javac 报错 ------------->环境变量配错了,最后全配成系统变量,ok了 能浪费一天的时间 写一个最简单的Servlet ,to ...
- Wget命令
Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器.如果我们使用虚拟主机,处理这样的 ...
- SQLdiag-配置文件-PerfmonCollector
前一篇我们已经使用默认配置文件收集了部分诊断数据,并且知道配置文件会影响收集数据的内容.这一篇我们重点讲述配置文件中与性能计数器相关的操作.可使用XML模板控制SQLdiag使用的收集器.每个收集器可 ...
- 第六篇 SQL Server代理深入作业步骤工作流
本篇文章是SQL Server代理系列的第六篇,详细内容请参考原文. 正如这一系列的前几篇所述,SQL Server代理作业是由一系列的作业步骤组成,每个步骤由一个独立的类型去执行.每个作业步骤在技术 ...
- SocketServer model_use
#!/usr/bin/env python #-*- coding:utf- -*- import SocketServer class MySocker(SocketServer.BaseReque ...
- 遍历nsarray
// // main.m // 04-遍历数组 // // Created by apple on 14-3-21. // Copyright (c) 2014年 apple. All rig ...
- 在xocde运行profile 遇到"Existing default base temp directory '/Library/Caches/com.apple.dt.instruments' has insufficient privileges for user id 505. Please have the owner delete this directory"
找到这篇文章 http://stackoverflow.com/questions/34153795/xcode-7-unable-to-open-instruments-from-developer ...
- IOS 加载Xib 后 如何 动态修改xib中的控件frame
看看xib里view是不是设置了自动布局 use auto layout.取消掉就可以了.
- Leetcode: Majority Element II
Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. The algorit ...
- 配置suse自动化安装
配置suse自动化安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 前言:不知道你习惯用那款虚拟器,我用的是VMware Workstation,别问我为什么,因 ...