Question

我有这个菜单，它工作正常。问题是当菜单项很长时，列表会在屏幕的末尾隐藏。我需要的帮助是在菜单列表变长时有一个很好的滚动条来匹配设计。下面是菜单，CSS和JS：

菜单： -

control.myReset();

CSS： -

<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>

JS： -

#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;
}

Answer 1

我的解决方案是添加菜单样式：

overflow-y: auto;
overflow-x: hidden;

更改showmenu：

margin-left: 0px;
position: fixed;

从菜单中带出showmenu本身。对$（＆＃34; #showmenu＆＃34;）点击功能进行一点改动，以便将显示菜单按钮移动到当前菜单的右侧。

来自评论：

当点击其他兄弟姐妹时，插入符号图标不会更改为适当的状态。对此有任何修复？

此问题可以通过以下方式解决：

$("#menu a").click(function(){

以下一行：

$(this).closest('li').siblings()
  .find('i[class*="fa-caret-left"]:last-child')
  .toggleClass('fa-caret-left fa-caret-down');

在下面的代码段中：

＆＃13;

$(function() {
  $("#showmenu").click(function(){
    $("#menu").toggleClass("show");
    if ($("#menu").position().left != 0){
      $("#showmenu").css({'margin-left':  Math.abs($("#menu").width()) + 'px'});
    } else {
      $("#showmenu").css({'margin-left':  '0px'});
    }
  });

  $("#menu a").click(function(e){
    if($(this).next('ul').length){
      $(this).next().toggle('fast');
      $(this).children('i:last-child').toggleClass('fa-caret-down fa-caret-left');
      //
      // reset all other carets
      //
      $(this).closest('li').siblings().find('i[class*="fa-caret-left"]:last-child').toggleClass('fa-caret-left fa-caret-down');
    }
  });

  $('#page_content').click(function() {
    $("#menu").removeClass("show");
  });

  $('#menu ul li').click(function() {
    $(this).siblings().children('ul').slideUp();
  });
});

＆＃13;

@charset "utf-8";
/* CSS Document */

#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;
    overflow-y: auto;
    overflow-x: hidden;
}
#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: 0px;
    position: fixed;
    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;
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<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>
        <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>
        <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>
        <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>
</nav>
<a href="#" id="showmenu" title="Click to toggle menu"><i class="fa fa-align-justify fa-lg"></i></a>

＆＃13;

如何将垂直滚动条添加到幻灯片菜单

1 个答案: