纯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">首&nbsp;页</a>

                 </li>

                 <li>

                     <a href="#">明&nbsp;星</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 ...

随机推荐

EF Code First教程-02.1 Fluent API约定配置
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
C#实现根据IP 查找真实地址
IPScanner.cs public class IPScanner { private byte[] data; Regex regex = new Regex(@"(((\d{1,2} ...
windows下使用pthreads
pthread-win32在Windows上实现了线程相关的Posix标准,接口一模一样包含: thread mutex cond swlock spin sem barrier https://s ...
使用mysql 的docker
sudo docker run --name phpmyAdmin3 --link some-mysql:mysql -d phpmyadmin/phpmyadmin:latest -p 8080:8 ...
JavaScript解决命名冲突的一种方法
过程化编码过程化编码, 表现为定义若干函数,然后调用定义函数, 随着页面交互逻辑变化, 从简单到复杂, 定义的所有函数.和变量都挂在 window对象上, window对象编程者子自定义变量名 ...
使用awk统计字段重复实践
awk awk是一种规格化文件的分析工具, 主要处理对象类似数据库导出的条目文本文件, 其中一行,就对应一个记录,每个记录包含若干个字段. 类似这种文本: [root@www ~]# last -n ...
eclipse 插件未安装成功定位
以gef未安装成功为例在eclipse根目录下: eclipse –clean –console –noExit 右击窗口标题栏,属性,勾中快速编辑模式,这样可以在命令行窗口点击右键将剪贴板上的内容 ...
EBS运行快速安装的程序时，提示DISPLAY变量设置不对
EBS运行快速安装的程序时,系统提示如下: Rapid Install Wizard is validating your file system...... >> Wizard requ ...
从零开始攻略PHP（6）——代码重用与函数编写的一些注意事项
一个新的项目是这样创建的:它将已有的可重新利用的组件进行组合,并将新的开发难度降低到最小. 代码重用的好处:降低成本.提升可靠性和一致性. 1.使用require()和include()函数使用一条 ...
PostgreSQL Replication之第十章配置Slony（2）
10.2 理解 Slony如何工作在我们开始复制我们的第一个数据库之前,我们想深入Slony的架构.理解这是如何工作的是非常重要的,否则,将不可能以一种有用的和合理的方法使用这个软件.与事务日志流不 ...

纯CSS实现nav导航栏+jQuery实现article区DIV切换

纯CSS实现nav导航栏+jQuery实现article区DIV切换的更多相关文章

随机推荐

热门专题