一个常用的响应式导航

周大胖子

1. <!-- 导航 -->
2.       <nav class="navbar " role="navigation">
3.         <div class="container">
4.           <div class="navbar-header">
5.             <button type="button" class="navbar-toggle z_bai" data-toggle="collapse" data-target="#navbar-menu" >
6.               <span class="sr-only">切换导航</span>
7.               <span class="icon-bar z_bai_bg"></span>
8.               <span class="icon-bar z_bai_bg"></span>
9.               <span class="icon-bar z_bai_bg"></span>
10.               <span class="icon-bar z_bai_bg"></span>
11.             </button>
12.            
13.             <a class="navbar-brand" href="index.html">
14.               <img alt="nreal" class="z_logo" src="web Slicing/LOGO-B.png" id="logo_src" >
15.             </a>
16.           </div>
18.           <div class="collapse navbar-collapse" id="navbar-menu">
19.             <ul class="nav navbar-nav navbar-right">
20.               <li ><a class="lh32" href="javascript:;">首页</a></li>
21.               <li ><a class="lh32" href="javascript:;">新闻动态</a></li>
22.               <li ><a class="lh32" href="javascript:;">加入我们</a></li>
23.               <li ><a class="lh32" href="javascript:;">关于我们</a></li>
24.               <li class=" hidden-sm hidden-xs"><a class="lh32" href="javascript:;">English</a></li>
25.             </ul>
26.           </div>
27.         </div>
28.       </nav>

复制代码

注意手机端是挤下来的。如果要设置手机端悬停 建议 在外面包裹个DIV 再拿一个 div 等同于原导航的高度。；  头部左侧LOGO的 高度 自行调整 。

1. <!-- 导航 -->
2.     <div style="position:absolute;left:0;top:0;width:100%;">
3.       <nav class="navbar navbar-block-z ft16 buyuan z_nav_h navbar-white-z" role="navigation" id="changeHead">
4.         <div class="container">
5.           <div class="navbar-header">
7.             <button type="button" class="navbar-toggle z_bai" data-toggle="collapse" data-target="#navbar-menu" id="changebai">
8.               <span class="sr-only">切换导航</span>
9.               <span class="icon-bar z_bai_bg"></span>
10.               <span class="icon-bar z_bai_bg"></span>
11.               <span class="icon-bar z_bai_bg"></span>
12.             </button>
13.             <!-- 菜单关闭的按钮 -->
14.             <object class="obj_z " data="web Slicing/ipx-close.svg" type="image/svg+xml"></object>
16.             <a class="navbar-toggle z_bai" href="javascript:;">English</a>
18.             <a class="navbar-brand" href="index.html">
19.               <img alt="nreal" class="z_logo" src="web Slicing/LOGO-B.png" id="logo_src" >
20.             </a>
21.           </div>
23.           <div class="collapse navbar-collapse" id="navbar-menu">
24.             <ul class="nav navbar-nav navbar-right lh32 text-center">
25.               <li ><a class="lh32" href="javascript:;">首页</a></li>
26.               <li ><a class="lh32" href="javascript:;">新闻动态</a></li>
27.               <li ><a class="lh32" href="javascript:;">加入我们</a></li>
28.               <li ><a class="lh32" href="javascript:;">关于我们</a></li>
29.               <li class=" hidden-sm hidden-xs"><a class="lh32" href="javascript:;">English</a></li>
30.             </ul>
31.           </div>
32.         </div>
33.       </nav>
34.     </div>
35.     <!-- 写一个div撑开头部的高度 -->
36.     <div id="chenggao_z"></div>

复制代码