使菜单在较小的屏幕上滚动

我的菜单正在使用一系列嵌套的<ul>标签，其中<ul>和<li>调用在现有的<li>调用中。就我所知，这对于大多数菜单都是非常标准的。为了使我的网站在移动设备上运行良好，我决定采取更快速响应的设计方法，并使用@media查询来在浏览器调整大小时显示或隐藏内容。使菜单在较小的屏幕上滚动

当我的菜单收缩时，下拉菜单被隐藏（现在）。稍后我会介绍一个汉堡包类型的菜单，您可以点击移动版本菜单旁边的+图标并查看它的子链接。

截至目前，当浏览器被调整大小后，菜单将作为absolute显示进行排序，这会禁用菜单上的滚动。如果用户在iPhone上说，将手机侧向转动，则菜单将被切断，并且无法向下滚动查看该方向的其他菜单。这里是描绘问题的图像：

这里是嵌套的HTML代码示例：

<div id="navmenu"> 
    <ul> 
     <li><a href="#" class="homebutton"><div class="home"></div></a></li> 
     <li class='storelink dropdown'><a class='dropbtn' href='/store'>Store</a> 
      <div class='dropdown-content'> 
       <a href='/store?group=1'>All Items</a> 
      </div> 
     </li> 
     <li class='cartmenu'><a href='/cart'>Cart</a></li> 
     <li class='accountmenu dropdown'><a class='dropbtn' href='/account'>Account</a> 
      <div class='dropdown-content'> 
       <a href='/account'>Customer login</a> 
      </div> 
     </li> 
     <li><a href='/services'>Services</a></li> 
    </ul> 
</div>

最后是相关的CSS

#navmenu .dropdown:hover .dropdown-content { 
    display: block; 
    position: absolute; 
} 
#navmenu { 
    overflow-y: scroll; 
    display: none; 
    clear: both; 
    background: #333; 
    left: 0; 
    position: absolute; 
    float: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    border-bottom: 2px solid #fff; 
} 
#navmenu ul { 
    width: 100%; 
    text-align: center; 
} 
#navmenu li { 
    float: none; 
    clear: both; 
    background: #333; 
    width: 100%; 
    text-align: center; 
} 
#navmenu li a { 
    display: block; 
    width: 100%; 
    clear: both; 
    margin: 0; 
    padding: 10px 0; 
}

为什么韩元调整大小时是否滚动此滚动条？由于

来源

2017-02-21 Kaboom

我最终完全重写了菜单是如何工作的，摆脱了固定的位置，所以它最终结束了工作。 – Kaboom

尝试添加此：

#navmenu { 
    height: 100%; 
    ... 
}

来源

2017-02-21 23:14:07 Stickers

嗯，你可以试着给你的#navmenu一个固定的高度。

或者，您可以尝试将#navmenu设置为position：fixed（不是绝对）和height：100％。

来源

2017-02-21 23:21:38

使菜单在较小的屏幕上滚动

回答

相关问题