• 注册
  • 查看作者
  • 教你怎么做自适应导航栏

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

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

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

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

    <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 代码

    .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;}
    }
  • 0
  • 0
  • 0
  • 22
  • 请登录之后再进行评论

    登录

    捐助

    请在小工具里添加二维码

  • 做任务
  • 发表内容
  • 实时动态
  • 偏好设置
  • 单栏布局 侧栏位置: