gpt4 book ai didi

javascript - 响应式水平滚动导航栏

转载 作者:太空宇宙 更新时间:2023-11-04 09:25:53 25 4
gpt4 key购买 nike

我在使用响应式菜单时遇到问题。我正在尝试在屏幕更改时创建水平滚动菜单(响应式)。

这是菜单在电脑屏幕上的样子(全宽): enter image description here

这是菜单在移动设备屏幕上的样子: enter image description here

我需要向右滚动的条,没有那些滚动条。有办法做到这一点吗?

<div class="menu">
<nav class="infobar">
<div class="container">
<ul class="nav navbar-left">
<div class="col-min">
<p>Example</p>
</div>
<div class="col-min">
<p>Example</p>
</div>
<div class="col-min">
<p>Example</p>
</div>
<div class="col-min">
<p>Example</p>
</div>
<div class="col-min">
<p>Example</p>
</div>
<div class="col-min">
<p>Example</p>
</div>
</ul>
</div>
</nav>
</div>

主要 CSS

.infobar {
width: 100%;
background: #f7f7f7;
height: 80px;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
border-radius: 0;

.col-min {
min-width: 10px;
height: 80px;
background: none;
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
position: relative;
margin-left: -1px;
top: -1px;
left: 1px;
float: left;
}

移动CSS

.infobar {
min-width:100%;
overflow-x:scroll;
overflow-y:hide;
}

.menu .nav {
margin-left: -5px;
min-width: 100%;
}

https://jsfiddle.net/94f1d5v5/

https://jsfiddle.net/94f1d5v5/1/

最佳答案

使用 perfect-scroll 自动隐藏滚动条和显示:flex 以获得更好的体验。

.nav {
display: flex;
padding: 24px
}

我进行了小型重构 playcode.io/8

关于javascript - 响应式水平滚动导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41090925/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com