取消编辑 | 保存资料 推广>纯CSS导航制作（含CSS3）>CSS二级导航
CSS二级导航
CSS二级导航
发布时间：2015年11月08日 09:09:09  历史访客：1268   照片评分：暂无评分
准备工作：实用的开发工具，由于本人是学C#的，故习惯使用visual studio开发（网上皆有下载，本人使用visual studio 2010），本示例使用记事本亦可完成。大家可根据自己实际情况选择工具。

第一步：新建html文件

首先在桌面新建一个文本文档或者记事本

然后将该文件名后缀改为：html或htm，然后你将会看到该文件图标变化成你默认使用的浏览器标志，我这里是chrome



然后鼠标左键双击该图标或者右键选择任意浏览器进行浏览，效果如下：



第二步：制作一级导航

将下面代码复制到该文件中，然后保存

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS二级导航</title>
</head>
<body>
    <div class="nav1">
        <ul>
            <li><a href="http://xunwn.com/grwz">个人网站</a></li>
            <li><a href="http://xunwn.com/qywz">企业网站</a></li>
            <li><a href="http://xunwn.com/xxfw">信息服务</a></li>
            <li><a href="http://xunwn.com/zygx">资源共享</a></li>
        </ul>
    </div>
</body>
</html>

文本文档制作css导航

然后鼠标左键双击该图标或者右键选择任意浏览器进行浏览，效果如下：

简单css一级导航效果
现在需要将导航菜单左边黑色圆点去掉，同时将导航横排显示，使用css进行布局，代码如下：

<style type="text/css">
        ul li
        {
            list-style-type: none;
        }
        div.nav1 ul li
        {
            float: left;
        }
</style>

此刻效果如下：

该为这个一级导航美化一下了，我们准备为其加上背景色，同时将各个导航位置增加间距

第三步：美化一级导航

此刻代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS二级导航</title>
    <style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
        }
        a
        {
            font-weight: bold;
            font-size: 14px;
            display: inline-block;
            text-decoration: none;
            color: White;
            width: 120px;
        }
        a:hover
        {
            background-color: #82ce18; /* 鼠标经过时的红色背景，可自定义 */
        }
        ul
        {
            padding: 0px;
            margin: 0px;
        }
        ul li
        {
            list-style-type: none;
        }
        div.nav1
        {
            background: #333;
            width: 100%;
            height: 40px;
        }
        div.nav1 ul li
        {
            text-align: center;
            float: left;
            line-height: 40px;
        }
        
        div.nav1 ul li a
        {
            border-left: 1px solid #4a4a4a;
            border-right: 1px solid #242424;
            height: 40px;
            overflow: hidden;
        }
        ul.nav1
        {
            width: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="nav1">
        <ul class="nav1">
            <li><a href="http://xunwn.com/grwz">个人网站</a></li>
            <li><a href="http://xunwn.com/qywz">企业网站</a></li>
            <li><a href="http://xunwn.com/xxfw">信息服务</a></li>
            <li><a href="http://xunwn.com/zygx">资源共享</a></li>
        </ul>
    </div>
</body>
</html>

效果如下：

纯css一级导航

第四步：制作二级导航

原理：一级导航某<li></li>内容中再次嵌入一个<ul><li></li>...</ul>标记；如下所示：
 <li><a href="http://xunwn.com/grwz">个人网站</a>
                <ul class="nav2">
                    <li><a href="http://xunwn.com/grwz">个人网站</a></li>
                    <li><a href="http://xunwn.com/qywz">企业网站</a></li>
                    <li><a href="http://xunwn.com/xxfw">信息服务</a></li>
                    <li><a href="http://xunwn.com/zygx">资源共享</a></li>
                </ul>
</li>

此刻代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS二级导航</title>
    <style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
        }
        a
        {
            font-weight: bold;
            font-size: 14px;
            display: inline-block;
            text-decoration: none;
            color: White;
            width: 120px;
        }
        a:hover
        {
            background-color: #82ce18; /* 鼠标经过时的红色背景，可自定义 */
        }
        ul
        {
            padding: 0px;
            margin: 0px;
        }
        ul li
        {
            list-style-type: none;
        }
        div.nav1
        {
            background: #333;
            width: 100%;
            height: 40px;
        }
        ul.nav1
        {
            width: 600px;
            margin: 0 auto;
        }
        ul.nav1 li
        {
            width: 120px;
            text-align: center;
            float: left;
            line-height: 40px;
            height: 40px;
        }
        
        ul.nav1 li a
        {
            border-left: 1px solid #4a4a4a;
            border-right: 1px solid #242424;
            height: 40px;
            overflow: hidden;
        }
        ul.nav2 li
        {
            background: #333;
            border-top: 1px solid #4a4a4a;
            border-bottom: 1px solid #242424;
        }
        ul.nav2 li a
        {
            border: 0px;
        }
    </style>
</head>
<body>
    <div class="nav1">
        <ul class="nav1">
            <li><a href="http://xunwn.com/grwz">个人网站</a>
                <ul class="nav2">
                    <li><a href="http://xunwn.com/grwz">个人网站</a></li>
                    <li><a href="http://xunwn.com/qywz">企业网站</a></li>
                    <li><a href="http://xunwn.com/xxfw">信息服务</a></li>
                    <li><a href="http://xunwn.com/zygx">资源共享</a></li>
                </ul>
            </li>
            <li><a href="http://xunwn.com/qywz">企业网站</a></li>
            <li><a href="http://xunwn.com/xxfw">信息服务</a></li>
            <li><a href="http://xunwn.com/zygx">资源共享</a></li>
        </ul>
    </div>
</body>
</html>

效果如下：

css二级导航

第五步：juqery隐藏或显示二级导航

原理：一级导航每个li当鼠标滑入时，显示其下级二级导航整个ul标记内容；反之滑出时，隐藏整个其下级ul标记内容；
二级导航每个li当鼠标滑入时，显示其父级整个ul标记内容；反之滑出时，隐藏整个其父级ul标记内容

//鼠标滑入滑出一级导航隐藏或者二级导航
$("ul.nav1 li").hover(
                function () {
                    $(this).children("ul.nav2").show();
                },
                function () {
                    $(this).children("ul.nav2").hide();
                }
            );

//鼠标滑入滑出二级导航菜单隐藏或者二级导航
            $("ul.nav2 li").hover(
                function () {
                    $(this).parent().show();
                },
                function () {
                    $(this).parent().hide();
                }
            );

完整代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS二级导航</title>
    <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
        }
        a
        {
            font-weight: bold;
            font-size: 14px;
            display: inline-block;
            text-decoration: none;
            color: White;
            width: 120px;
        }
        a:hover
        {
            background-color: #82ce18; /* 鼠标经过时的红色背景，可自定义 */
        }
        ul
        {
            padding: 0px;
            margin: 0px;
        }
        ul li
        {
            list-style-type: none;
        }
        div.nav1
        {
            background: #333;
            width: 100%;
            height: 40px;
        }
        ul.nav1
        {
            width: 600px;
            margin: 0 auto;
        }
        ul.nav1 li
        {
            width: 120px;
            text-align: center;
            float: left;
            line-height: 40px;
            height: 40px;
        }
        
        ul.nav1 li a
        {
            border-left: 1px solid #4a4a4a;
            border-right: 1px solid #242424;
            height: 40px;
            overflow: hidden;
        }
        ul.nav2
        {
            display:none;
            }
        ul.nav2 li
        {
            background: #333;
            border-top: 1px solid #4a4a4a;
            border-bottom: 1px solid #242424;
        }
        ul.nav2 li a
        {
            border: 0px;
        }
    </style>
</head>
<body>
    <div class="nav1">
        <ul class="nav1">
            <li><a href="http://xunwn.com/grwz">个人网站</a>
                <ul class="nav2">
                    <li><a href="http://xunwn.com/grwz">个人网站</a></li>
                    <li><a href="http://xunwn.com/qywz">企业网站</a></li>
                    <li><a href="http://xunwn.com/xxfw">信息服务</a></li>
                    <li><a href="http://xunwn.com/zygx">资源共享</a></li>
                </ul>
            </li>
            <li><a href="http://xunwn.com/qywz">企业网站</a>
                <ul class="nav2">
                    <li><a href="http://xunwn.com/grwz">个人网站</a></li>
                    <li><a href="http://xunwn.com/qywz">企业网站</a></li>
                    <li><a href="http://xunwn.com/xxfw">信息服务</a></li>
                    <li><a href="http://xunwn.com/zygx">资源共享</a></li>
                </ul>
            </li>
            <li><a href="http://xunwn.com/xxfw">信息服务</a>
                <ul class="nav2">
                    <li><a href="http://xunwn.com/grwz">个人网站</a></li>
                    <li><a href="http://xunwn.com/qywz">企业网站</a></li>
                    <li><a href="http://xunwn.com/xxfw">信息服务</a></li>
                    <li><a href="http://xunwn.com/zygx">资源共享</a></li>
                </ul>
            </li>
            <li><a href="http://xunwn.com/zygx">资源共享</a>
                <ul class="nav2">
                    <li><a href="http://xunwn.com/grwz">个人网站</a></li>
                    <li><a href="http://xunwn.com/qywz">企业网站</a></li>
                    <li><a href="http://xunwn.com/xxfw">信息服务</a></li>
                    <li><a href="http://xunwn.com/zygx">资源共享</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        $(function () {
            //鼠标滑入滑出一级导航隐藏或者二级导航
            $("ul.nav1 li").hover(
                function () {
                    $(this).children("ul.nav2").show();
                },
                function () {
                    $(this).children("ul.nav2").hide();
                }
            );


            //鼠标滑入滑出二级导航菜单隐藏或者二级导航
            $("ul.nav2 li").hover(
                function () {
                    $(this).parent().show();
                },
                function () {
                    $(this).parent().hide();
                }
            );
        });
    </script>
</body>
</html>

完整源码下载请点击此处，下载本示例css二级导航源码
最近访客
我要分享