纯CSS实现移动端滚动导航效果

最新推荐文章于 2023-12-15 23:04:08 发布

anshi1593

最新推荐文章于 2023-12-15 23:04:08 发布

阅读量192

点赞数

原文链接：http://www.cnblogs.com/web15/p/7389912.html

版权

在手机web app开发中会涉及到水平导航，代码如下：

.nav_dh{box-sizing: border-box;width: 100%;overflow-y: auto;height:2.5rem;line-height:2.5rem;background-color:#fff; position:fixed; z-index:999; top:44px;max-width:640px; min-width:320px;}
.nav_dh ul{width:600px;}
.nav_dh ul li{float:left;line-height:2.4rem;font-size:1rem; text-align:center; width: 12%; padding-left:2%;}
.nav_dh ul li a{ color:#fe5d33;}
.huandong::-webkit-scrollbar { display: none; height: 0 !important; }

<div class="nav_dh huandong">
   <ul>
        <li><a href="#">导航一</a></li>
        <li><a href="#">导航二</a></li>
	<li><a href="#">导航三</a></li>
	<li><a href="#">导航四</a></li>
	<li><a href="#">导航五</a></li>
	<li><a href="#">导航六</a></li>
   </ul>
</div>

转载于:https://www.cnblogs.com/web15/p/7389912.html