响应式导航设计（仿写csdn博客网站的导航栏）

来源：互联网发布：淘宝综合排名突然消失编辑：程序博客网时间：2024/05/17 17:54
自己仿照csdn博客网站的导航栏 ,利用bootstrap jQuery 仿写了一个响应式导航栏（请忽略我的配色！！）

1.效果图：

1.1电脑访问

这里写图片描述
1.2移动设备

这里写图片描述
2.代码:

<!DOCTYPE html><html lang="en"><head>    <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <meta name="viewport" content="width=device-width, initial-scale=1"/>    <meta charset="UTF-8"/>    <title>Title</title>    <style type="text/css">      *{            margin: 0;            padding: 0;        }        #li-menu{            display: none;        }        #div-main-content{            width: 100%;            height:1000px;            margin-top: 2%;        }        #div-operation-container{            border-radius: 3%;            width: 10%;            float: left;            height: 1000px;            padding: 0;            border-style: solid;            border-color: gray;        }        #div-display-bebind{            width: 100%;            height: 100%;            z-index: 0;            background-color: #2aabd2;            display: none;        }        #tb-operation-list{            width: 100%;        }        #tb-operation-list tr{            height: 3%;        }        #div-operation-container a{            color: black;            text-decoration-color: black;            text-decoration-line: none;        }        #div-operation-container a:hover{            color: white;        }        .div-operation{            margin: 0;            padding: 0;        }        #div-display{            border-radius: 3%;            width: 87%;            height: 1000px;            float: right;            border-style: dashed;            border-color: #f9f9f9;        }        @media (max-width:1080px)        {            #div-display-bebind{                position: absolute;                top: 0;                right: 0;                width: 100%;                height: 100%;                z-index: 0;                background-color:gray;                display: none;                float: right;                opacity: 0;            }            #div-operation-container {                position: absolute;                top: 0;                z-index: 1;                border-radius: 3%;                display: none;                height: 1000px;                padding: 0;                width: 50%;                margin-left: -50%;                background-color: gray;                border-style: none;            }            #div-operation-container  a{                text-decoration-color: white;                color: white;            }            #tb-operation-list{                margin-top: 30%;                width: 100%;            }            #null2r{                display: none;            }            #div-display{              width: 100%;            }            #null1{display: none;}            #li-home{display: none;}            #li-menu{                display:block;            }        }    </style></head><body><nav class="nav navbar-inverse " role="navgation">    <div class="container-fluid">            <ul class="navbar-nav nav">                <li id="li-menu"><a href="#"><span class="glyphicon glyphicon-list"></span></a></li>                <li id="li-home" class="active"><a href="#">首页</a></li>                <li id="null1"><a href="#">先空着</a></li>                <li id="null2r"><a href="#">先空着</a></li>            </ul>        </div></nav><div id="div-main-content">        <div id="div-operation-container" >            <table id="tb-operation-list" class="table table-responsive">                <tr id="tr-order-management">                    <td>                        <span class="glyphicon glyphicon-yen" aria-hidden="true"></span>                        <a  href="#">菜单一</a>                    </td>               </tr>                <tr>                    <td>                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>                        <a  href="#">菜单二</a>                    </td>                </tr>                <tr>                    <td>                        <span class="glyphicon glyphicon-home" aria-hidden="true"></span>                        <a  href="#">菜单三</a>                    </td>                </tr>            </table>        </div>        <div id="div-display">            <div id="div-display-bebind">            </div>            </div></div></body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script type="text/javascript">    $(document).ready(function () {        $("#li-menu").click(function () {            var displayWay = $("#div-operation-container").css("display");//获取显示方式            if (displayWay == "none") {                $("#div-operation-container").css("display", "block");//设置显示方式为 块 方式                $("#div-display-bebind").css("display", "block");                $("#div-operation-container").animate({marginLeft: '0px'}, 1000);//设置动画移动  从屏幕外移到屏幕内（前面css设置的为负的50%)                $("#div-display-bebind").animate({opacity: '0.5'}, 1000);//设置不透明度渐变            }        });            $("#div-display-bebind").click(function () {                $("#div-operation-container").animate({marginLeft:'-50%'},800,function () {                  //此为动画 .animate的回调函数                    $("#div-operation-container").css("display","none");//隐藏                });                $("#div-display-bebind").animate({opacity:'0.0'},800,function () {                    $("#div-display-bebind").css("display","none");                });            });    });</script></html>
阅读全文
1 0