利用Responsive Nav.js插件制作响应式导航

最新推荐文章于 2024-05-28 09:59:05 发布

hjb2722404

最新推荐文章于 2024-05-28 09:59:05 发布

阅读量5.1k

点赞数

分类专栏： javascript基础理论研究

本文链接：https://blog.csdn.net/hjb2722404/article/details/45220027

版权

javascript基础理论研究专栏收录该内容

36 篇文章 4 订阅

订阅专栏

在制作响应式Web站点的过程中，导航的响应式设计是很重要的一个环节，Responsive Nav是bootstrap官方推荐的一款响应式导航制作插件，官方站点：

响应式导航（Responsive Nav）

但是，官方给出了使用示例是最简单的一个例子，里面的链接都还是带下划线的蓝色链接字体，小屏下的menu也只是一个链接，没有样式。

根据官方示例的原理，设计了一款带有简单样式的导航，这是宽屏下的显示效果：

宽屏下的显示

下面是PAD同等宽度屏幕上的显示效果：

这里写图片描述

下面是手机屏幕上显示效果：

这里写图片描述

直接上代码：

responsiveNav.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>响应式导航测试</title>
<!--    <link rel="stylesheet" href="css/bootstrap.min.css"/> -->
    <link rel="stylesheet" href="css/myNav.css"/>
    <link rel="stylesheet" href="css/responsive-nav.css"/>
    <!--调用responsive nav的css样式表文件-->
    <!--    <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript" src="js/bootstrap.min.js"></script> -->
    <script type="text/javascript" src="js/responsive-nav.min.js"></script>
    <!--调用responsive nav的js插件-->
</head>
<body>
    <div class="container">

        <div class="row"> <!--两个外层DIV是为了整合bootstrap插件-->

            <nav class="nav-collapse"> <!--这里的className就是下方插件要调用的参数-->

                <ul>
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">导航项目一</a>
                    </li>
                    <li>
                        <a href="#">导航项目二</a>
                    </li>
                    <li>
                       <a href="#">导航项目三</a>
                    </li>
                    <li>
                        <a href="#">导航项目四</a>
                    </li>
                </ul>

            </nav>
        </div>

    </div>
    <script>
        var navigation = responsiveNav(".nav-collapse");
        <!--这里就是该插件最简单的调用方式，更多的设置请参考官网说明-->
    </script>
</body>
</html>

myNav.css：

ul ,li { margin: 0; padding: 0;} //reset浏览器默认样式
.nav-collapse { min-height: 60px; }//设置导航的最小高度
.nav-collapse ul { width:100%;list-style-type: none; background: #333333;}//为导航设置 
.nav-collapse ul li { max-height: 40px; line-height: 40px; display: inline-block; background-color: #333333;}
//设置li样式，这里需要特别注意，这里一定要将li的display设置为inline-block，这样项目才能在行内显示，千万不要是用float:left这样的语句，否则Responsive Nav插件会失效
.nav-collapse ul li a{ width: 100%; height: 100%; text-decoration: none; color: #cccccc; display: block; text-align: center; font-weight: bold;}
.nav-collapse ul li a:hover { background: #cccccc; color: #333333;} //为链接设置样式

//大屏显示时，li的宽度要指定，否则大屏下会显示为100%宽度；
@media screen and (min-width: 40em) {

    .nav-collapse ul li { width: 18%; } //这里的数字根据导航项目的数量自己计算得到；
}

/*为menu菜单设置简单样式，你也可以设置为图片*/
.nav-toggle {
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    background: #333;
    color: #fff;
    display: block;
    text-align: center;
}

基本上就是以上代码，可以根据这样的基本原理，制作出更多可变的响应式导航

hjb2722404

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
利用Responsive Nav.js插件制作响应式导航

在制作响应式Web站点的过程中，导航的响应式设计是很重要的一个环节，Responsive Nav是bootstrap官方推荐的一款响应式导航制作插件，官方站点：响应式导航（Responsive Nav）但是，官方给出了使用示例是最简单的一个例子，里面的链接都还是带下划线的蓝色链接字体，小屏下的menu也只是一个链接，没有样式。根据官方示例的原理，设计了一款带有简单样式的导航，这是宽屏下的显示效果：下
复制链接

扫一扫

专栏目录