当前位置:首页 » 网站源码 » 详情

一个网站简单兼容简洁的自适应导航栏代码

大家在网上经常看到很多网站都是用自适应的网站的导航栏,包括我们Lin网也是。
于是小编百度了一下,折磨出这么一个方法然后将代码分享给大家。
原理很简单,利用css的media,进行限制,在手机版访问的时候将导航栏进行隐藏,利用按钮点击进行显示导航。
这是我自己折腾的一个超简单的自适应导航栏,整体思路也简单。
首先是导航栏的html结构是这样的:
<div class="nav">
    <span class="nav-on"><i></i><i></i><i></i></span>
    <ul>
        <li><a href="#" rel="nofollow" rel="nofollow" rel="nofollow">首页</a></li>
        <li><a href="#" rel="nofollow" rel="nofollow" rel="nofollow">栏目一</a></li>
        <li><a href="#" rel="nofollow" rel="nofollow" rel="nofollow">栏目二</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美化则需要根据自己的需求来做,本文只提供一个办法参考。
打赏站长

打赏方式:

X
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫
日期:2018年10月13日 星期六   分类:网站源码   浏览(633)
本文地址:https://www.ddccs.net/post-5177.html   [百度已收录]

评论一下

评论者

站点统计

  • 发布文章:5003 条
  • 在线人数:23人
  • 总访问量:5394313次
  • 本站运行:1年11月1天
sitemap