[英]Scroll fixed div for menu
I have a problem for my web app. 我的网络应用程序有问题。 My menu ( android design ) not scroll if my explorer windows size it's small.
如果我的浏览器窗口很小,我的菜单(android设计)将不会滚动。
exemple image: 示例图片:
Normal screen size 正常屏幕尺寸
Problem with low screen size 屏幕尺寸小问题
I try use overflow in css but not work... 我尝试在CSS中使用溢出,但无法正常工作...
My HTML: 我的HTML:
<nav>
<div class="titre"><img class="l_menu_general" src="icons/ic_menu_black.png" alt="menu" style="width: 24px; height: 24px;" /></div>
<div id="nav_menu">
<div class="menu">
<div class="l_menu">Accueil</div>
<div class="l_menu l_notes">Notes</div>
<div class="l_menu">Camera</div>
</div>
<div class="menu">
<div class="l_menu">A propos</div>
</div>
</div>
</nav>
My CSS : 我的CSS:
nav {
position:fixed;
font-weight: 500;
font-size: 16px;
background: #fff;
box-shadow: 2px 0px 3px 0px rgba(0,0,0, .1);
left: -82%;
top: 0;
box-sizing: border-box;
z-index: 20;
height: 100%;
width: 80%;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
/* Pour écran large */
@media only screen and (min-width: 768px) {
nav{
width:500px;
left: -510px;
}
}
div.menu {
border-top: 1px solid #ccc;
padding-top: 8px;
padding-bottom: 8px;
}
nav div.titre {
display: block;
padding-left: 16px;
padding-top: 16px;
padding-bottom: 16px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
/* Pour écran large */
@media only screen and (min-width: 768px) {
nav div.titre{
padding-left: 24px;
padding-top: 20px;
padding-bottom: 20px;
}
}
.menu div.l_menu {
display: block;
padding: 16px;
}
.menu div.l_menu:hover {
cursor: pointer;
background: #c5cae9;
}
Tanks for reply and sorry for my bad english. 坦克的答复和对不起我的英语不好。
try to add this in your css : 尝试将其添加到您的CSS中 :
#nav_menu {
overflow:scroll;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.