纯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 ...
随机推荐
- android开发经验
1.选好"车轮" 一个项目的开发,我们不可能一切从0做起,如果真是这样,那同样要哭瞎.因此,善于借用已经做好的 "车轮" 非常重要,如: 网络访问框架:okht ...
- 视差效果原理 background-attachment:fixed
<html> <head> <style type="text/css"> body { background-image:url('http: ...
- 8月11日 Power-BI V11 QQ群视频交流开课啦
过去,用excel表格来做数据分析是很多企业的首选,但随着时代的发展,excel的某些功能已经不能满足用户的需求.今天的课程呢,我们就基于excel数据源来讲讲数据集构建器的应用. 时间:2016年8 ...
- Android ListView自定义Adapter使用误区
参考博客:BaseAdapter中重写getview的心得以及发现convertView回收的机制 使用自定义的BaseAdapter实现LIstView的展示 由于Recycler(反复循环器)的机 ...
- CentOS 配置本地yum源
[root@localhost ~]#ls /media/dvd/ ...
- js DOM 元素ID就是全局变量
有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再 ...
- Some Skills in Visual Studio
Copy file which added as link http://mattperdeck.com/post/Copying-linked-content-files-at-each-build ...
- java中DriverManager跟DataSource获取getConnection有什么不同?
1.datasource是与连接池获取连接,而DriverManager是获取与数据库的连接! DriverManager类的主要作用是管理注册到DriverManager中的JDBC驱动程序,并根据 ...
- Java基础(34):Java中基本数据类型的包装类(主要为了不同数据类型之间更方便的进行转换)（Wrapper类）
相信各位小伙伴们对基本数据类型都非常熟悉,例如 int.float.double.boolean.char 等.基本数据类型是不具备对象的特性的,比如基本类型不能调用方法.功能简单...,为了让基本数 ...
- JS 实现中英文翻译
缺点就是还是会闪出中文,但是效果还行. var langPackage = { "主题":"Title", "下一页":"Next ...