纯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 ...
随机推荐
- struts配置测试中遇到报错信息，记录下
tomcat7 jdk7myeclipse2014 部署完成后,访问页面报错struts.xml文件内容: <?xml version="1.0" encoding=&quo ...
- Spring Boot 5 SpringSecurity身份验证
对于没有访问权限的用户需要转到登录表单页面.要实现访问控制的方法多种多样,可以通过Aop.拦截器实现,也可以通过框架实现(如:Apache Shiro.Spring Security). pom.xm ...
- 从 Vue 1.x 迁移
FAQ 哇,非常长的一页!是否意味着 Vue2.0 已经完全不同了呢,是否需要从头学起呢,Vue1.0 的项目是不是没法迁移了? 非常开心地告诉你,并不是! 几乎90%的 API 和核心概念都没有变. ...
- jQuery页面加载后执行的事件(3种方式)
$(function () { }); $(document).ready(function () { }); window.onload = function () { }
- 读取plist
- (NSArray *)imageData { if (_imageData == nil) { // 从未初始化 // 初始化数据 // File : 全路径 // NSBundle : 一个NS ...
- nssstring 转换大小写
//7.将字符串中的字母转换成大写 NSString * str10 = @"china"; NSString * tmpStr1 = [str10 uppercaseString ...
- RadioButton 组，ComboBox用法：
RadioButton 组 final ToggleGroup group = new ToggleGroup(); final RadioButton rb1 = new RadioButton(& ...
- html a标签链接使用action 参数传递中文乱码
<a href="queryByType?ptype=鼠标"> 在后台变量ptype接收的值为乱码 解决方法: 在tomcat的server.xml文件中添加 URIE ...
- 免安装版的MySQL的安装与配置
1. 将下载的 mysql-noinstall-5.1.69-win32.zip 解压至需要安装的位置, 如: C:\Program Files; 2. 在安装文件夹下找到 my-small.ini ...
- Python学习总结4：字符串常量与操作汇总
参考博客:http://www.cnblogs.com/Camilo/archive/2013/09/21/3332267.html http://www.cnblogs.com/SunWentao/ ...