导航栏

于 2020-02-18 11:17:47 发布
阅读量271 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43776742/article/details/104371607
版权

简易导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   /* 重置元素的默认样式*/
	   * {
	   	   margin: 0;
	   	   padding: 0;
	   }
	   nav {
           height: 41px;
           background-color: #fcfcfc;
           border-bottom: 1px solid #edeef0;
           border-top: 3px solid #ff8500;
	   }

	   nav a {
	   	   font-size: 14px;
	   	   color: #4c4c4c;
	   	   text-decoration: none;
	   	   padding: 0 15px;
	   	   display: inline-block;/*超链接是行内元素 所以需要转行内块*/
	   	   height: 41px;
	   	   line-height: 41px; 
	   }

	   nav a:hover {
	   	    background-color: #eee;
	   }
	</style>
</head>
<body>
	<nav>
		<a href="#">设为首页</a>
		<a href="#">手机新浪网</a>
		<a href="#">移动客户端</a>
	</nav>
</body>
</html>
返回顶层

垂直菜单的制作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        
        ul {
            list-style: none;
            width: 100px;
        }
        
        a {
            text-decoration: none;
            display: block;
            height: 30%;
            line-height: 30px;
            width: 100px;
            background-color: #cccccc;
            margin-bottom: 1px;
            text-indent: 10px;
            /*文本缩进10px*/
        }
        
        a:hover {
            background-color: #f60;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="#">首  页</a>
        </li>
        <li>
            <a href="#">新闻展示</a>
        </li>
        <li>
            <a href="#">今日头条</a>
        </li>
        <li>
            <a href="#">在线客服</a>
        </li>
    </ul>
</body>

</html>
返回顶层

伸缩菜单制作 —— 水平方向

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>导航菜单</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        
        a {
            color: #333;
            text-decoration: none
        }
        
        ul {
            list-style: none;
            height: 30px;
            border-bottom: 5px solid #F60;
            margin-top: 20px;
            padding-left: 50px;
        }
        
        ul li {
            float: left
        }
        
        ul li a {
            display: block;
            height: 30px;
            text-align: center;
            line-height: 30px;
            width: 120px;
            background: #efefef;
            margin-left: 1px;
        }
        
        a.on,
        a:hover {
            background: #F60;
            color: #fff;
        }
    </style>
    <script>
        window.onload = function() {
            var aA = document.getElementsByTagName('a');
            for (var i = 0; i < aA.length; i++) {
                aA[i].onmouseover = function() {
                    var This = this;
                    clearInterval(This.time);
                    This.time = setInterval(function() {
                        This.style.width = This.offsetWidth + 8 + "px";
                        if (This.offsetWidth >= 160)
                            clearInterval(This.time);
                    }, 30)
                }
                aA[i].onmouseout = function() {
                    clearInterval(this.time);
                    var This = this;
                    this.time = setInterval(function() {
                        This.style.width = This.offsetWidth - 8 + "px";
                        if (This.offsetWidth <= 120) {
                            This.style.width = '120px';
                            clearInterval(This.time);
                        }
                    }, 30)
                }
            }
        }
    </script>
</head>

<body>
    <ul>
        <li><a class="on" href="#">首　　页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

</html>
返回顶层

导航栏 + 下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        
        #menu {
            background-color: #eee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }
        
        ul {
            list-style: none;
        }
        
        ul li {
            line-height: 40px;
            text-align: center;
            position: relative;
            float: left;
        }
        
        a {
            text-decoration: none;
            color: #000;
            display: block;
            width: 90px;
        }
        
        a:hover {
            color: #FFF;
            background-color: #666;
        }
        
        ul li ul li {
            float: none;
            margin-top: 2px;
            background-color: #eee;
        }
        
        ul li ul {
            width: 90px;
            position: absolute;
            display: none;
        }
        
        ul li:hover ul {
            display: block;
        }
    </style>
</head>

<body>
    <div id="menu">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">课程大厅</a>
                <ul>
                    <li><a href="#">Javascrip</a>
                        <li><a href="#">Jquery</a>
                </ul>
                </li>
                <li><a href="#">学习中心</a>
                    <ul>
                        <li><a href="#">视频学习</a></li>
                        <li><a href="#">案例学习</a></li>
                        <li><a href="#">交流平台</a></li>
                    </ul>
                </li>
                <li><a href="#">经典案例</a></li>
                <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</body>

</html>
返回顶层

三级导航栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        h2,
        dl,
        dt,
        dd {
            padding: 0;
            margin: 0;
        }
        
        ul {
            list-style: none;
        }
        
        h1 {
            text-align: center;
            font-weight: normal;
        }
        
        h2 {
            font-weight: normal;
        }
        
        a:link {
            color: #333;
            text-decoration: none;
        }
        
        a:visited {
            color: #333;
            text-decoration: none;
        }
        
        a:hover {
            color: #3d6cd8;
            text-decoration: underline;
        }
        
        a:active {
            color: #3d6cd8;
            text-decoration: underline;
        }
        /*二级*/
        
        .nav {
            width: 755px;
            margin: 0 auto;
            border: 1px solid #dedede;
            border-radius: 5px;
            overflow: hidden;
        }
        
        .nav li {
            width: 151px;
            float: left;
            text-align: center;
        }
        
        .nav li h2 {
            width: 150px;
            height: 48px;
            line-height: 48px;
            border-right: 1px solid #dedede;
            background: #f9f9f9;
            font-size: 16px;
        }
        
        .nav li h2 a {
            display: block;
            text-decoration: none;
        }
        
        .nav li h2 a:hover,
        .nav .nav_this h2 a,
        .nav li .nav_this_2 a {
            background: #e9e9e9;
        }
        
        .down {
            display: none;
            width: 110px;
            padding: 10px 20px;
            position: absolute;
            margin-left: -1px;
            border: 1px solid #dedede;
            background: #f9f9f9;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        
        .down a {
            display: block;
            height: 36px;
            line-height: 36px;
            border-bottom: 1px solid #e4e4e4;
            font-size: 14px;
        }
        
        .nav li:last-child h2 {
            border: none;
        }
        
        .down a:last-child {
            border: none;
        }
        /*三级*/
        
        .nav_2 {
            width: 755px;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .nav_2 li {
            width: 150px;
            float: left;
            text-align: center;
            margin-right: 1px;
        }
        
        .nav_2 li h2 {
            width: 150px;
            height: 36px;
            line-height: 36px;
            background: #3d6cd8;
            font-size: 16px;
        }
        
        .nav_2 li h2 a {
            display: block;
            text-decoration: none;
            color: #fff;
        }
        
        .nav_2 li h2 a:hover,
        .nav_2 .nav_this h2 a,
        .nav_2 li .nav_this_2 a {
            background: #204db3;
        }
        
        .down_2 {
            position: absolute;
            display: none;
        }
        
        .down_2 a {
            display: block;
        }
        
        .down_2 dt {
            width: 150px;
            height: 36px;
            line-height: 36px;
            background: #c4c5c7;
            margin-top: 1px;
        }
        
        .down_2 dd {
            display: none;
            position: absolute;
            width: 150px;
            left: 150px;
            margin-top: -37px;
        }
        
        .down_2 dd a {
            height: 36px;
            line-height: 36px;
            background: #ddd;
            margin: 1px;
        }
    </style>
    <script>
        $(document).ready(function() {

            $(".nav li").hover(

                function() {

                    $(this).children(".down").stop(true, true).slideDown("fast");

                    $(this).find("h2").addClass("nav_this_2");

                },

                function() {

                    $(this).children(".down").stop(true, true).slideUp("fast");

                    $(this).find("h2").removeClass("nav_this_2");

                }

            );



            $(".nav_2 li").hover(

                function() {

                    $(this).children(".down_2").stop(true, true).slideDown("fast");

                    $(this).find("h2").addClass("nav_this_2");

                },

                function() {

                    $(this).children(".down_2").stop(true, true).slideUp("fast");

                    $(this).find("h2").removeClass("nav_this_2");

                }

            );



            $(".nav_2 dl").hover(

                function() {

                    $(this).children("dd").stop(true, true).fadeIn();

                },

                function() {

                    $(this).children("dd").stop(true, true).fadeOut();

                }

            );



        });
    </script>
</head>

<body>
    <h1>二级下拉菜单</h1>

    <ul class="nav">

        <li>
            <h2><a href="">首页</a></h2>
        </li>

        <li>
            <h2><a href="">关于我们</a></h2>
            <div class="down">
                <a href="">企业简介</a>
                <a href="">公共事业</a>
            </div>
        </li>

        <li class="nav_this">
            <h2><a href="">产品</a></h2>
            <div class="down">
                <a href="">产品1</a>
                <a href="">产品2</a>
                <a href="">产品3</a>
                <a href="">产品4</a>
            </div>
        </li>

        <li>
            <h2><a href="">解决方案</a></h2>
            <div class="down">
                <a href="">工程案例</a>
                <a href="">解决方案</a>
                <a href="">行业需求</a>
            </div>
        </li>

        <li>
            <h2><a href="">联系我们</a></h2>
        </li>
    </ul>

    <br><br><br><br><br><br><br><br>

    <h1>三级下拉菜单</h1>

    <ul class="nav_2">
        <li>
            <h2><a href="">首页</a></h2>
        </li>

        <li>
            <h2><a href="">关于我们</a></h2>
            <div class="down_2">
                <dl>
                    <dt><a href="">二级导航1</a></dt>
                    <dd>
                        <a href="">三级导航11</a>
                        <a href="">三级导航12</a>
                        <a href="">三级导航13</a>
                        <a href="">三级导航14</a>
                    </dd>
                </dl>

                <dl>
                    <dt><a href="">二级导航2</a></dt>
                    <dd>
                        <a href="">三级导航21</a>
                        <a href="">三级导航22</a>
                    </dd>
                </dl>
            </div>
        </li>

        <li class="nav_this">
            <h2><a href="">产品</a></h2>

            <div class="down_2">
                <dl>
                    <dt><a href="">二级导航1</a></dt>
                    <dd>
                        <a href="">三级导航11</a>
                    </dd>
                </dl>

                <dl>
                    <dt><a href="">二级导航2</a></dt>
                    <dd>
                        <a href="">三级导航21</a>
                    </dd>
                </dl>

                <dl>
                    <dt><a href="">二级导航3</a></dt>
                    <dd>
                        <a href="">三级导航31</a>
                        <a href="">三级导航32</a>
                    </dd>
                </dl>
            </div>
        </li>

        <li>
            <h2><a href="">解决方案</a></h2>
            <div class="down_2">
                <dl>
                    <dt><a href="">二级导航1</a></dt>
                    <dd>
                        <a href="">三级导航11</a>
                        <a href="">三级导航12</a>
                        <a href="">三级导航13</a>
                        <a href="">三级导航14</a>
                        <a href="">三级导航15</a>
                        <a href="">三级导航16</a>
                    </dd>
                </dl>

                <dl>
                    <dt><a href="">二级导航2</a></dt>
                    <dd>
                        <a href="">三级导航21</a>
                        <a href="">三级导航22</a>
                    </dd>
                </dl>
            </div>
        </li>

        <li>
            <h2><a href="">联系我们</a></h2>
        </li>
    </ul>

</body>

</html>
返回顶层

四级导航栏

返回顶层

返回目录

端脑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值