教你怎么做自适应导航栏

大家经常看到自适应的网站的导航栏是自适应的。

我那天也百度了一下,然后将代码分享给大家。

原理很简单,利用css的media,进行限制,在手机版访问的时候将导航栏进行隐藏,利用按钮点击进行显示导航。

首先是 导航栏的HTML代码,利用ul li 做的

<div
 <span class="atn">class</span><span class="pun">=</span><span class="atv">"nav"</span><span class="tag">></span> <span class="tag"><span</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-on"</span><span class="tag">><i></i><i></i><i></i></span></span> <span class="tag"><ul></span> <span class="tag"><li><a</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">首页</span><span class="tag"></a></li></span> <span class="tag"><li><a</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">栏目一</span><span class="tag"></a></li></span> <span class="tag"><li><a</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">栏目二</span><span class="tag"></a></li></span> <span class="tag"></ul></span> <span class="tag"></div></span>

然后是js到吗,需要jquery 支持

$
<span class="pun">(</span><span class="str">".nav-on"</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> $</span><span class="pun">(</span><span class="str">".nav>ul"</span><span class="pun">).</span><span class="pln">slideToggle</span><span class="pun">();</span> <span class="pun">});</span>

然后是css 代码

.
<span class="pln">nav</span><span class="pun">{</span><span class="kwd">line-height</span><span class="pun">:</span><span class="lit">50px</span><span class="pun">;</span><span class="kwd">background</span><span class="pun">:</span> <span class="lit">#0099cc</span><span class="pun">;</span><span class="kwd">position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;}</span> <span class="pun">.</span><span class="pln">nav li</span><span class="pun">{</span><span class="kwd">float</span><span class="pun">:</span><span class="pln">left</span><span class="pun">;}</span> <span class="pun">.</span><span class="pln">nav li a</span><span class="pun">{</span><span class="kwd">display</span><span class="pun">:</span><span class="pln">block</span><span class="pun">;</span><span class="kwd">padding</span><span class="pun">:</span><span class="lit">0</span> <span class="lit">20px</span><span class="pun">;</span><span class="kwd">color</span><span class="pun">:</span><span class="lit">#fff</span><span class="pun">;}</span> <span class="pun">.</span><span class="pln">nav span</span><span class="pun">.</span><span class="pln">nav-on</span><span class="pun">{</span><span class="kwd">display</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="kwd">width</span><span class="pun">:</span><span class="lit">20px</span><span class="pun">;</span><span class="kwd">position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="kwd">top</span><span class="pun">:</span><span class="lit">12px</span><span class="pun">;</span><span class="kwd">right</span><span class="pun">:</span><span class="lit">12px</span><span class="pun">;</span><span class="kwd">cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;}</span> <span class="pun">.</span><span class="pln">nav-on i</span><span class="pun">{</span><span class="kwd">display</span><span class="pun">:</span><span class="pln">block</span><span class="pun">;</span><span class="kwd">width</span><span class="pun">:</span><span class="lit">100%</span><span class="pun">;</span><span class="kwd">height</span><span class="pun">:</span><span class="lit">5px</span><span class="pun">;</span><span class="kwd">background</span><span class="pun">:</span><span class="lit">#fff</span><span class="pun">;</span><span class="kwd">margin-bottom</span><span class="pun">:</span><span class="lit">5px</span><span class="pun">;}</span>

/*手机端css代码*/

@media</span><span class="pln"> screen and </span><span class="pun">(</span><span class="kwd">max-width</span><span class="pun">:</span><span class="lit">768px</span><span class="pun">){</span>
<span class="pun">.</span><span class="pln">nav ul</span><span class="pun">{</span><span class="kwd">display</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="kwd">width</span><span class="pun">:</span><span class="lit">100%</span><span class="pun">;}</span>
<span class="pun">.</span><span class="pln">nav ul li</span><span class="pun">{</span><span class="kwd">width</span><span class="pun">:</span><span class="lit">100%</span><span class="pun">;}</span>
<span class="pun">.</span><span class="pln">nav span</span><span class="pun">.</span><span class="pln">nav-on</span><span class="pun">{</span><span class="kwd">display</span><span class="pun">:</span><span class="pln">block</span><span class="pun">;}</span>
<span class="pun">}

头像

枭龙

文章作者信息...

留下你的评论

*评论支持代码高亮<pre class="prettyprint linenums">代码</pre>

相关推荐