一个常用的响应式导航
<!-- 导航 --><nav class="navbar " role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle z_bai" data-toggle="collapse" data-target="#navbar-menu" >
<span class="sr-only">切换导航</span>
<span class="icon-bar z_bai_bg"></span>
<span class="icon-bar z_bai_bg"></span>
<span class="icon-bar z_bai_bg"></span>
<span class="icon-bar z_bai_bg"></span>
</button>
<a class="navbar-brand" href="index.html">
<img alt="nreal" class="z_logo" src="web Slicing/LOGO-B.png" id="logo_src" >
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right">
<li ><a class="lh32" href="javascript:;">首页</a></li>
<li ><a class="lh32" href="javascript:;">新闻动态</a></li>
<li ><a class="lh32" href="javascript:;">加入我们</a></li>
<li ><a class="lh32" href="javascript:;">关于我们</a></li>
<li class=" hidden-sm hidden-xs"><a class="lh32" href="javascript:;">English</a></li>
</ul>
</div>
</div>
</nav> 注意手机端是挤下来的。如果要设置手机端悬停 建议 在外面包裹个DIV 再拿一个 div 等同于原导航的高度。；头部左侧LOGO的 高度 自行调整 。
<!-- 导航 -->
<div style="position:absolute;left:0;top:0;width:100%;">
<nav class="navbar navbar-block-z ft16 buyuan z_nav_h navbar-white-z" role="navigation" id="changeHead">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle z_bai" data-toggle="collapse" data-target="#navbar-menu" id="changebai">
<span class="sr-only">切换导航</span>
<span class="icon-bar z_bai_bg"></span>
<span class="icon-bar z_bai_bg"></span>
<span class="icon-bar z_bai_bg"></span>
</button>
<!-- 菜单关闭的按钮 -->
<object class="obj_z " data="web Slicing/ipx-close.svg" type="image/svg+xml"></object>
<a class="navbar-toggle z_bai" href="javascript:;">English</a>
<a class="navbar-brand" href="index.html">
<img alt="nreal" class="z_logo" src="web Slicing/LOGO-B.png" id="logo_src" >
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right lh32 text-center">
<li ><a class="lh32" href="javascript:;">首页</a></li>
<li ><a class="lh32" href="javascript:;">新闻动态</a></li>
<li ><a class="lh32" href="javascript:;">加入我们</a></li>
<li ><a class="lh32" href="javascript:;">关于我们</a></li>
<li class=" hidden-sm hidden-xs"><a class="lh32" href="javascript:;">English</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!-- 写一个div撑开头部的高度 -->
<div id="chenggao_z"></div>
页:
[1]