纯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 ...
随机推荐
- MVC项目实践,在三层架构下实现SportsStore-08,部署到IIS服务器
SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...
- Java Volatile关键字
在当前的Java内存模型下,线程可以把变量保存在本地内存(比如机器的寄存器)中,而不是直接在主存中进行读写. 这就可能造成一个线程在主存中修改了一个变量的值,而另外一个线程还继续使用它在寄存器中的变量 ...
- Linux 基本收集
ifconfig eth0 192.168.1.223 切换到root账号开始是$符号输入su输入root密码转换成# 就变成了root账号 dr 查看盘符ls /etc/ 查看etc文件夹下面的文件 ...
- WPF 蒙层罩，正在加载
参考园子里的一篇文章,比较好用.可以直接用,可以自己改. 动画效果: 容器的触发器,旋转容器: 属性配置:使用依赖属性,并且在xaml中写绑定.
- 论--如何通过代码解析plist文件创建对应的控制器,以及控制器中的控件
通过懒加载把最初的plist文件加载后,根据plist文件文件中的目标控制器进行跳转,根据加载的plist文件中的plist_name加载将要跳转进去的控制器界面的控件等等. 以上根据target_v ...
- EBS R12.2快速安装前没有配置Global Inventory报错
EBS R12.2快速安装前没有配置Global Inventory,导致验证时"file systems"这一项没有通过,被标记了"X": (本图其它两个验证 ...
- css 字体样式
[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name,其中如有空格,须放置在引号中. 解释: 所谓英文 Family Name,为字体文件的一个元数据,常见名称 ...
- JAX-WS(二)之使用wsimport创建WebService客户端
客户端开发的通常过程是从已有的WSDL处罚,创建辅助类JAXB对象和Service代理类,然后基于这些类开发自己的客户端应用. 开发步骤: 创建eclipse项目: 运行wsimport命令生成客户端 ...
- Java String类详解
Java String类详解 Java字符串类(java.lang.String)是Java中使用最多的类,也是最为特殊的一个类,很多时候,我们对它既熟悉又陌生. 类结构: public final ...
- c++ unique_lock lock_guard
unique_lock template <class Mutex> class unique_lock; Unique lock A unique lock is an object t ...