专栏首页coding个人笔记移动端导航简单实现

移动端导航简单实现

在移动端导航的功能太常见了,很多时候还需要可滑动,点击的时候还需要当前动画到中间。实现的方法很多,今天分享一个本人最近开发所用的方法。

因为本人都是用vue开发,今天写用jQuery的方法,原理都是一样的。

标签:

<div>
    <ul>
        <li id="nav0">导航11</li>
        <li id="nav1">导航22</li>
        <li id="nav2">导航33</li>
        <li id="nav3">导航44</li>
        <li id="nav4">导航55</li>
        <li id="nav5">导航66</li>
        <li id="nav6">导航77</li>
        <li id="nav7">导航88</li>
        <li id="nav8">导航99</li>
    </ul>
</div>

CSS:

div{
    overflow: hidden;
    height: 25px;
}
.nav{
    overflow-x: scroll;
    width: 100%;
    height: 30px;
    margin: 0 auto;
    white-space: nowrap;
    background: #aaa;
}
.nav li{
    display: inline-block;
    padding: 0 5px;
    line-height: 25px;
    font-size: 16px;
    color: #fff;
}
.nav li.active{
    color: red;
}

JS:

$('.nav li').click(function () {
   var index = $(this).index();
    $('.nav li').removeClass('active');
    $(this).addClass('active');
    $(".nav").animate({scrollLeft: $('#nav' + index)[0].offsetLeft - $(window).width()/2 + $('#nav' + index)[0].clientWidth/2},500);
});

这边需要注意的几个地方:

1、.nav样式的overflow-x: scroll;和white-space: nowrap;两个属性

2、li样式的display: inline-block;属性。

3、外层div的高度比ul的高度低,为了去除滚动条。

4、只有在手机模式可以滑动。

5、当前导航类型动画居中滚动的距离,先移动到最左边,然后到屏幕一半,然后是当前项一半。

感兴趣的可以直接复制代码看效果。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 你真的知道跨域吗

    在现在前后分离的大势下,跨域几乎是不可避免的问题,无论是开发时还是部署线上,跨域我们都会遇见,但是我们真的理解跨域吗?

    wade
  • http、https、http2一些概念

    非对称加密,现在用的几乎都是非对称加密,自己有一个密钥对公钥和私钥,公钥可以给任何人知道,别人通过公钥加密发数据给自己,自己通过密钥解密。

    wade
  • 重新认识原型和原型链三

    知道了显式原型prototype和隐式原型__proto__,我们就能很好的知道原型链是什么东西了。

    wade
  • 你真的理解HTML5标签语义化吗?

    <head>标签用于定义文档的头部,它是所有头部元素的容器。<head>描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。...

    陈大鱼头
  • 符合标准的有序列表分页源码示例

    一个符合标准的有序列表分页源码示例。 你可以根据你所应用的不同程序语言,打包生成一个符合标准的分页控件。 DOM结构: <ul class="paginatio...

    练小习
  • jQuery第二十九篇 事件委托

    用户7873631
  • 模仿百度新闻的一部分

    我们先来复习一下前面的知识,一些常见的标签,和一些不太常用到的标签,以及img标签的一些知识点,都是很重要的基础,千万不能忘记。

    守护最温柔的金木
  • html5新特性实现tab选项卡切换

    分析代码可以知道,选项卡的class为active的时候,选项卡就被选中,当内容section的style属性为display:block时,内容就被选中

    一个淡定的打工菜鸟
  • jquery获取父级一级节点的序号

    结构为:          <ul id="zdcd" style="display:none">             <li>              ...

    用户1075292
  • 第72天:jQuery实现下拉菜单

    1、块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券