仿网易新闻头部导航栏

所属分类:导航-水平导航

 62433  475  查看评论 (15)
分享到微信朋友圈
X
仿网易新闻头部导航栏 ie兼容10
<div class="find_nav_list">
    <ul>
        <li class="find_nav_cur"><a href="javascript:void(0)">资讯</a></li>
        <li><a href="javascript:void(0)">分析</a></li>
        <li><a href="javascript:void(0)">原创</a></li>
        <li><a href="javascript:void(0)">评论</a></li>
        <li><a href="javascript:void(0)">技术</a></li>
        <li><a href="javascript:void(0)">项目</a></li>
        <li><a href="javascript:void(0)">黄页</a></li>
        <li><a href="javascript:void(0)">股市</a></li>
        <li><a href="javascript:void(0)">经济</a></li>
        <li class="sideline"></li>
    </ul>
</div>
在列表中

添加自己所需的类

function navName(c_nav) {
    switch (c_nav) {
        case "资讯":
            sessionStorage.pagecount = "资讯";
            break;
        case "分析":
            sessionStorage.pagecount = "分析";
            break;
        case "黄页":
            sessionStorage.pagecount = "黄页";
            break;
        case "技术":
            sessionStorage.pagecount = "技术";
            break;
        case "项目":
            sessionStorage.pagecount = "项目";
            break;
        case "股市":
            sessionStorage.pagecount = "股市";
            break;
        case "原创":
            sessionStorage.pagecount = "原创";
            break;
        case "经济":
            sessionStorage.pagecount = "经济";
            break;
        case "评论":
            sessionStorage.pagecount = "评论";
            break;
    }
}

修改js中对应信息


相关插件-水平导航

下拉导航菜单,动感十足,实用性强

jquery,SuperSlide下拉导航菜单
  水平导航
 43580  441

二级导航菜单

黑色加橙色下拉二级导航菜单
  水平导航
 58697  458

jquery下拉导航

可以下拉的导航
  水平导航
 68559  478

仿今日头条APP顶部点击可居中导航

H5顶部导航条, 仿今日头条APP顶部点击可居中导航。该导航可手动左右滑动,点击选中后,选中项自动居中显示。
  水平导航
 26264  314

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Gardenia 0
    2018/4/23 11:03:58
    字数必须一样?刷新的时候宽度有问题 回复
    免单信息预告 DD免单 0
    2018/3/20 0:08:47
    哪位大神可以告诉下面内容怎么添加呢? 回复
    怎么办(o_o!) 0
    2017/6/5 10:52:14

    这个只能支持jquery,如果手机端用zepto的话,还有好多方法不对。

    回复
    Cherish. 0
    2017/2/23 10:25:30

    为什么带了链接就不能用了?

        不走寻常路0
        2019/5/6 15:57:33
        跳转了 页面就刷新了 代码就跟不能用了一样
    回复
    苦笑 0
    2017/2/8 9:40:15

    要下面内容可以滑动切换就好了

    回复
    崔??の惑孑 0
    2017/1/11 14:01:22

    ie8不支持。。。。

        最後的黄昏0
        2017/8/29 10:51:43

        为啥要支持IE8……

    回复
    我就在这儿 0
    2016/11/9 16:11:54
    眼眸 0
    2016/11/7 10:11:16
    为什么点击第三个 整个导航就全部不见了 left超出范围了(手机端)
        枫叶0
        2017/4/1 17:20:39

        我也遇到了  怎么解决的?????

    回复
    闭眼、看世界 0
    2016/9/21 10:09:17
    这个不用这么麻烦吧,直接一个overflow-x就可以做出来了
        liuyu0
        2016/10/15 18:10:06
        别人是有居中定位效果
    回复
    ─╀0vЁ 半 梦 0
    2016/9/5 10:09:39
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复