提供zblog模板_zblog主题_wordpress模板的下载和定制

一个非常简单简洁的自适应导航栏

天兴工作室 2016-10-25 教程 14316 1 评论


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

导航栏的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代码是这样的(依赖JQ库):

$(".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美化则需要根据自己需求来,本文只提供一个办法。


没有找到解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

1 位网友评论:

取消回复欢迎 发表评论:

  • 请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合

社交账号登录

将本文分享给你的朋友们