响应式一级到三级导航

Posted 2020-11-03 smille2020

首先放一个源代码效果贴图 如下所示（文字部分打入马赛克）：

 

第一步：插入meta标签，也就是bootstrap响应式经常用到的作用于手机端的meta标签，代码如下所示：

1     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
2     <meta name="viewport" content="width=device-width, initial-scale=1.0">

第二步：引入文件所需的css样式代码，如下所示（第1行和第2行代码务必引入，这是设置响应式bootstrap图标库和字体用的，第3行那就是bootsnav本身所自带的插件样式）：

bootsnav.css从百度搜索方可下载，或者点击链接https://download.csdn.net/download/tets_java/10018188?web=web进行下载。

1 <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
2 <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
3 <link rel="stylesheet" type="text/css" href="css/bootsnav.css">

第三步：在body里边写入html代码，代码部分如下所示：

HTML代码如下所示：

 1 <div class="demo" style="padding: 2em 0;">
 2     <div class="container">
 3         <div class="row">
 4 <div class="col-md-2 col-xs-6 logo"><a href="index.html"><img src="images/LOGO.png"  /></a></div>
 5             <ul class="col-md-10 nva-list clearfix mhide">
 6                 <li class="active"><a href="index.html">首页</a></li>
 7                 <li class="dropdown">
 8                     <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">关于中融</a>
 9                     <ul class="dropdown-menu">
10                         <li><a href="html/about_zr.html">企业文化</a></li>
14                     </ul>
15                 </li>
16                 <li class="dropdown">
17                     <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">项目简介</a>
18                     <ul class="dropdown-menu">
19                         <li><a href="html/hjy_project.html">红军源</a></li>
22                     </ul>
23                 </li>
24                 <li class="dropdown">
25                     <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">新闻动态</a>
26                     <ul class="dropdown-menu">
27                         <li><a href="html/news_infor.html">新闻资讯</a></li>
28                         <li><a href="html/City_news.html">社会新闻</a></li>
29                     </ul>
30                 </li>
31                 <li><a href="html/public_activities.html">公益活动</a></li>
32                 <li><a href="html/about_me.html">关于我们</a></li>
33                 <li><img src="images/tel.png"><span>000-000-000</span></li>
34             </ul>
35             <div class="mshow m col-xs-6 text-right">
36                 <i class="fa fa-bars minimune muneopen"></i>
37                 <i class="fa fa-times minimune muneclose"></i>
38             </div>
39         </div>
40     </div>

第四步：写入行内样式css代码如下所示：

CSS代码：

 1     <style type="text/css">
 2     body{ background-color:hsla(0,0%,18%,1.00)}
 3     .jq22-header h1{ text-align:center; font-size:28px; color:#939393}
 4         .navbar-brand{
 5             padding: 29px 15px;
 6             height: auto;
 7         }
 8         nav.navbar.bootsnav{
 9             border: none;
10             margin-bottom: 150px;
11         }
12         .navbar-nav{
13             float: left;
14         }
15         nav.navbar.bootsnav ul.nav > li > a{
16             color: #474747;
17             text-transform: uppercase;
18             padding: 30px;
19         }
20         nav.navbar.bootsnav ul.nav > li:hover{
21             background: #f4f4f4;
22         }
23         .nav > li:after{
24             content: "";
25             width: 0;
26             height: 5px;
27             background: #34c9dd;
28             position: absolute;
29             bottom: 0;
30             left: 0;
31             transition: all 0.5s ease 0s;
32         }
33         .nav > li:hover:after{
34             width: 100%;
35         }
36         nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
37             content: "+";
38             font-family: \'FontAwesome\';
39             font-size: 16px;
40             font-weight: 500;
41             position: absolute;
42             top: 35%;
43             right: 10%;
44             transition: all 0.4s ease 0s;
45         }
46         nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
47             content: "\\f105";
48             transform: rotate(90deg);
49         }
50         .dropdown-menu.multi-dropdown{
51             position: absolute;
52             left: -100% !important;
53         }
54         nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
55             box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
56             border: none;
57         }
58         @media only screen and (max-width:990px){
59             nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,
60             nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }
61             .dropdown-menu.multi-dropdown{ left: 0 !important; }
62             nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }
63             nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }
64         }
65     </style>

第五步：写入所需的三个js代码，可以百度搜索jquery插件和bootstrap的js，包括bootsnav.js：

JS代码：

1 <script type="text/javascript" src="js/jquery.min.js"></script>
2 <script type="text/javascript" src="js/bootstrap.min.js"></script>
3 <script type="text/javascript" src="js/bootsnav.js"></script>

 

希望能够帮助看到这篇帖子的每个技术小伙伴。加油哦！