您的位置:首页 > Web前端 > > 正文

html5导航栏怎么设计(html5 横向滑动导航栏的方法示例)

更多 时间:2021-10-13 00:52:01 类别:Web前端 浏览量:1609

html5导航栏怎么设计

html5 横向滑动导航栏的方法示例

最近在学习html5,今天看到了一个效果感觉不错,就分享给大家,也给自己留个笔记,具体如下

需要效果

html5导航栏怎么设计(html5 横向滑动导航栏的方法示例)

1、首先引入scroll.js

2、html部分

  • <!-- 科目导航 -->
            <li id="navBox" class="navMain">
                <ul class="nav" style="position:relative!important;">
                    <li><a class="active" href="javascript:;">全部</a></li>
                    <li><a href="javascript:;">数学</a></li>
                    <li><a href="javascript:;">英语</a></li>
                    <li><a href="javascript:;">语文</a></li>
                    <li><a href="javascript:;">物理</a></li>
                    <li><a href="javascript:;">思想品德</a></li>
                </ul>
            </li>
    
  • 3、css部分

  • /* 滑动导航 */
    .nav li {
        float: left;
        min-width: 60px;
        padding: 5px 0;
        margin-right: 9px;
    }
    .nav a{
      font-size: 14px;
      color: #999;
    }
    .navMain{
        background-color: #fff;
        position: relative;
        margin: 0 13px;
    }
    .nav{
        background-color: #fff;
        overflow: hidden;
    }
    .nav li>a.active{
        color: #3a95f5;
        border-bottom: 1px solid #3a95f5;
        padding-bottom: 2px;
    }
    
    
  • 4、js部分

  • $(".nav li a").click(function(){
        $(this).addClass("active").parents("li").siblings().find("a").removeClass("active");
      });
      window.addEventListener('load',function(){
        var $navBox = document.getElementById('navBox'),
            $ul = $navBox.querySelector('ul'),
            liArray = $navBox.querySelectorAll('li'),
            liLength = $navBox.querySelectorAll('li').length;10     $ul.style.width = (liArray[0].clientWidth + 10)*liLength +"px";
        var carousel=new iScroll("carousel",{hScrollbar:false, vScrollbar:false, vScroll: false});
      });
    
    
  • 到此这篇关于html5 横向滑动导航栏的方法示例的文章就介绍到这了,更多相关html5横向滑动导航栏内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!

    标签:HTML5 导航栏