1
我有这个菜单，它工作正常。问题是，当菜单项很长时，列表将隐藏在屏幕的末尾。我需要的帮助是在菜单列表变长时有一个漂亮的滚动条来匹配设计。下面是菜单，CSS和JS：如何添加垂直滚动条到滑动菜单
菜单： -
<nav id="menu" class="left">
<ul>
<li class="menu_home"><a href="home.php"><i class="fa fa-home"></i>Dashboard</a></li>
<li class="menu_students"><a href="#"><i class="fa fa-users"></i>Students <i class="fa fa-caret-down"></i></a>
<ul>
<li class="reg_student"><a href="register_student.php">Admit Student</a></li>
<li class="all_students"><a href="all_students.php">All Students</a></li>
<li class="transfer_students"><a href="transfer_students.php">Transfer Students</a></li>
</ul>
</li>
<li class="menu_parents"><a href="all_parents.php"><i class="fa fa-user"></i>Parents</a></li>
<li class="menu_sections"><a href="#"><i class="fa fa-puzzle-piece"></i>School Sections <i class="fa fa-caret-down"></i></a>
<ul>
<li class="add_section"><a href="add_section.php">Add Section</a></li>
<li class="all_sections"><a href="all_sections.php">All Sections</a></li>
</ul>
</li>
<li class="menu_classes"><a href="#"><i class="fa fa-sitemap"></i>Classes <i class="fa fa-caret-down"></i></a>
<ul>
<li class="add_class"><a href="add_class.php">Add Class</a></li>
<li class="all_classes"><a href="all_classes.php">All Classes</a></li>
</ul>
</li>
<li class="menu_sms"><a href="#"><i class="fa fa-envelope"></i>Messaging Service <i class="fa fa-caret-down"></i></a>
<ul>
<li class="send_sms"><a href="send_sms.php">SMS</a></li>
<li class="sent_sms"><a href="sent_sms.php">Sent Messages</a></li>
</ul>
</li>
<li class="menu_news_events"><a href="#"><i class="fa fa-newspaper-o"></i>News & Events <i class="fa fa-caret-down"></i></a>
<ul>
<li class="news"><a href="news.php">News</a></li>
<li class="events"><a href="events.php">Events</a></li>
</ul>
</li>
<li class="menu_account"><a href="#"><i class="fa fa-user-secret"></i>Account <i class="fa fa-caret-down"></i></a>
<ul>
<li class="edit_profile"><a href="edit_profile.php">Edit Profile</a></li>
<li class="change_password"><a href="change_password.php">Change Password</a></li>
</ul>
</li>
<li class="menu_settings"><a href="#"><i class="fa fa-cogs"></i>Settings <i class="fa fa-caret-down"></i></a>
<ul>
<li class="add_user"><a href="add_user.php">Add User</a></li>
<li class="all_users"><a href="all_users.php">All Users</a></li>
<li class="admin_roles"><a href="admin_roles.php">Admin Roles</a></li>
<li class="sys_parameters"><a href="system_parameters.php">System Parameters</a></li>
<li class="notifications"><a href="notifications.php">Notifications</a></li>
</ul>
</li>
</ul>
<a href="#" id="showmenu" title="Click to toggle menu"><i class="fa fa-align-justify fa-lg"></i></a>
</nav>
CSS： -
#menu {
position: fixed;
background-color: #222;
height: 100%;
z-index: 999;
width: 280px;
color: #bbb;
top: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity: 1;
font-family: 'Source Sans Pro', sans-serif;
}
#menu ul {
list-style: none;
margin-top: 0;
padding: 0;
}
#menu ul li {
border-bottom: 1px solid #2a2a2a;
}
#menu > ul > li > a {
border-left: 4px solid #222;
}
#menu ul li a {
color: inherit;
font-size: 12px;
display: block;
padding: 7px 0 7px 7px;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
font-weight: 600;
}
#menu ul a i {
margin-right: 10px;
font-size: 14px;
margin-top: 3px;
width: 20px;
}
#menu ul a i[class*='fa-caret'] {
float: right;
}
#menu ul a:hover, #menu ul a.active {
background-color: #111;
border-left-color: #FFCC33;
color: #FFCC33;
}
#menu ul a:hover i:first-child {
color: #FFCC33;
}
/* Submenu */
#menu ul li a.active+ul {
display: block;
}
#menu ul li ul {
margin-top: 0;
display: none;
}
#menu ul li ul li {
border-bottom: none;
}
#menu ul li ul li a {
padding-left: 30px;
font-size:11px;
}
#menu ul li ul li a:hover {
background-color: #1A1A1A;
}
/* Submenu */
.left {
left: -280px;
}
.show { left: 0; }
#showmenu {
margin-left: 100%;
position: absolute;
top: 0;
padding: 20px 10px 7px 15px;
font-size: 1.3em;
color: #FFCC33;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
JS： -
$(document).ready(function(){
$("#showmenu").click(function(){
$("#menu").toggleClass("show");
});
$("#menu a").click(function(){
if($(this).next('ul').length){
$(this).next().toggle('fast');
$(this).children('i:last-child').toggleClass('fa-caret-down fa-caret-left');
}
});
$('#page_content').click(function() {
$("#menu").removeClass("show");
});
$('#menu ul li').click(function() {
$(this).siblings().children('ul').slideUp();
});
});
只需加上overflow：scroll;到你的菜单 –
我试过了，它不起作用 – Maa
''overfow -y：scroll' on parent。如果这不起作用，请小提琴。 –