移动端左右滑动菜单css实现方式

移动H5页面左右滑动的导航实现。

一个朋友从北京来电话咨询这个导航的实现,他自己找了一个js插件swiper,实现了PC端的左右滚动切换,在安卓机上滑动不了。

很早的时候我当时审查百度视频的手机站首页,发现他直接CSS写的左右滑动菜单导航。我在今天早上抽了几分钟尝试了下,css来实现这类的导航也很简单的。如下图。

CSS主要的知识点:

1,overflow-x: scroll; overflow-y: hidden;//横向自动,竖向隐藏滚动

2,scrollbar{ width:0;display:none}//隐藏默认滚动条。

3,display: -webkit-box; (display: flex;的兼容写法)弹性盒子模型的声明

HTML

<div class=”global-head”>
<header class=”title_bar”>
<div class=”nav-list”>
<div class=”nav-content”> <a class=”nav-item ” href=”/”>
<div> 热播 </div>
</a> <a class=”nav-item ” href=”/tv”>
<div> 电视剧 </div>
</a> <a class=”nav-item ” href=”/movie”>
<div> 电影 </div>
</a> <a class=”nav-item ” href=”/live”>
<div> 卫视直播 </div>
</a> <a class=”nav-item ” href=”/child”>
<div> 少儿动画 </div>
</a> <a class=”nav-item ” href=”/show”>
<div> 综艺 </div>
</a> <a class=”nav-item ” href=”/comic” >
<div> 动漫 </div>
</a> <a class=”nav-item ” href=”/short/yule”>
<div> 明星 </div>
</a> <a class=”nav-item ” href=”/vipmovie” >
<div> VIP电影 </div>
</a> </div>
</div>
</header>
</div>

CSS

/*css-s*/
::-webkit-scrollbar {
width:0;
height:12px;
display:none
}
.global-head { z-index: 999; width: 100%; top: 0; position: fixed; }
.title_bar { background-color: #2c74e2; height: 46px; line-height: 46px; text-align: center; color: #fff; z-index: 999; position: relative; top: 0; width: 100%; }
.title_bar .nav-content { margin-right: 12px; background-color: transparent; height: 46px; display: -webkit-box; -webkit-box-orient: horizontal; overflow-x: scroll; overflow-y: hidden; }
.title_bar .nav-content .nav-item { display: block; width: auto; margin: 0 10px; text-align: center; line-height: 46px; color: #fff; font-size: 16px; }
/*css-n*/

发表评论