18910140161

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

顺晟科技

2022-09-13 12:44:18

307

在手机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>

 

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航