纯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 ...
随机推荐
- Linux中的元字符和转义符 单引号 硬引号 双引号 软引号
Linux中的元字符和转义符 单引号 硬引号 双引号 软引号 Linux就这个范儿 Linux就这个范儿 P182单引号:硬引号,所有元字符特殊意义都会关掉双引号:软引号,只允许出现特定元字符 ...
- thinkphp 对数据库的操作
查看ThinkPHP完全开发手册3.1 首先编辑配置文件 thinkphp这个数据库就不乱改了 昨天新建了一个 confluence(utf8)数据库 所以就用它学习一下吧,因为就只建立了一个数据库, ...
- OC类方法和实例方法中的self区别
OC类方法和实例方法中的self Objective-C里面既有实例方法也类方法.类方法(Class Method) 有时被称为工厂方法(Factory Method)或者方便方法(Convenien ...
- 知识准备-JOIN/EXISTS
10:40 2013-08-29 JOIN ON...AND A left join B on A.col1=B.col1 and A.col2=xx A left join B on A.col1= ...
- Group的操作
1. 概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组 示例 2. group by的简单操作 3. Group By中Select指定的字段限制 select指定的 ...
- 帮你深入理解OAuth2.0协议
1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...
- loadview 方法调用
从官方文档看 不应该直接调用此方法,当控制器当前的view为空的时候,这个方法就会被调用,并且会创建一个空白的view,如果viewcontroller绑定了storyboard或者xib就不用说了. ...
- 使用Genymotion来运行Android Studio开发的程序
访问网址:https://www.genymotion.com,注册账户,之后下载,下载时需要注意不要选择(withou virtualbox那个) 之后运行安装, 运行Genymotion运行启动G ...
- java io读书笔记(6) Writing Arrays of Bytes
显而易见,一次性写出一堆数据,要比一个byte一个byte的写,快多了,因此,outputstream,给出了2个增强型的write: public void write(byte[] data) t ...
- Ini文件操作函数
/// <summary> /// Copies a string into the specified section of an initialization file. /// &l ...