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

最新推荐文章于 2022-04-30 18:15:45 发布

r8l8q8

最新推荐文章于 2022-04-30 18:15:45 发布

阅读量714

点赞数 1

分类专栏： jQuery 文章标签： bootstrap jquery 响应式导航 csdn博客

本文链接：https://blog.csdn.net/r8l8q8/article/details/77103846

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自己仿照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>

r8l8q8

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式导航设计（仿写csdn博客网站的导航栏）

自己仿照csdn博客网站的导航栏 ,利用bootstrap jQuery 仿写了一个响应式导航栏（请忽略我的配色！！）1.效果图：1.1电脑访问1.2移动设备 2.代码:<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="https:
复制链接

扫一扫