• 愿流氓资源网能够帮您学到有用的知识
  • WAP手机版 广告合作 保存桌面加入收藏设为首页
当前位置 当前位置:首页 > 网站代码 > 其他代码

网站简单兼容自适应导航栏代码

2018-10-15 07:18:00流氓大叔

大家在网上经常看到很多网站都是用自适应的网站的导航栏,包括我们也是。

小编百度了一下,折磨出这么一个方法然后将代码分享给大家。

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

这是我自己折腾的一个超简单的自适应导航栏,整体思路也简单。

首先是导航栏的html结构是这样的:

<div class="nav">

   <span class="nav-on"><i></i><i></i><i></i></span>

   <ul>

       <li><a href="#">首页</a></li>

       <li><a href="#">栏目一</a></li>

       <li><a href="#">栏目二</a></li>

   </ul>

</div>

然后到js代码,需要jquery 支持

$(".nav-on").click(function(){

   $(".nav>ul").slideToggle();

});

尝试解释下:用css查询判断,在电脑端的时候导航栏是正常显示的,导航栏触发按钮”<span class="nav-on"></span>“则隐藏起来。

当用户是用手机访问的时候,则把导航栏的<ul>做隐藏,然后用js操作点击导航栏触发按钮则显示整个<ul></ul>里面的内容。

最后大概写一个css出来:

.nav{line-height:50px;background: #0099cc;position: relative;}

.nav li{float:left;}

.nav li a{display:block;padding:0 20px;color:#fff;}

.nav span.nav-on{display:none;width:20px;position: absolute;top:12px;right:12px;cursor: pointer;}

.nav-on i{display:block;width:100%;height:5px;background:#fff;margin-bottom:5px;}

/*手机端css代码*/

@media screen and (max-width:768px){

.nav ul{display:none;width:100%;}

.nav ul li{width:100%;}

.nav span.nav-on{display:block;}

}

如果需要css美化则需要根据自己的需求来做,本文只提供一个办法参考。


标签:网站  代码  导航  简单  适应  
   相关评论

本站内容来源于互联网,仅供用于学习和交流,任何人不得倒卖、行骗、传播、严禁用于商业用途!
请遵循相关法律法规,本站一切资源不代表本站立场如有侵权内容、不妥之处请第一时间联系我们删除,敬请谅解!

投诉侵权邮箱:lmg666@vip.qq.com 或联系QQ:409708470  关键词:流氓资源网,资源网,薅羊毛,菜鸟,分类目录 网站地图