javascript - 如何解决 CSS 中的左侧菜单扩展跳跃问题？

问题描述

当我尝试扩展菜单时，会跳到左右部分。我在下面添加了我的 javascript 代码 HTML 和 CSS 供您参考，希望您可以从下面的代码中找到我的问题。请确保在展开我的菜单后使用鼠标悬停，然后只有你才能找到我面临的问题

这个问题主要是我在展开时面临的问题，我怎样才能制作一个弹出菜单而不是这个下拉菜单？

$('.nav-toggle').click(function(e) {
  
  e.preventDefault();
  $("html").toggleClass("openNav");
  $(".nav-toggle").toggleClass("active");

});

$('.menu').hover(function(){
    $("html").toggleClass("openNav");
  $(".nav-toggle").toggleClass("active");
})

/* Layout */
#container {
padding: 0;
margin: 0;
background-color: #fff;
}
#main {
padding: 4% 1.5em;
max-width: 55em;
margin: 0 auto;
}
#header {
padding: 1.5em;
margin: 0 0 1em 0;
background-color: #eee;
}
#footer {
padding: 1.5em;
margin: 2em 0 0 0;
background-color: #eee;
}
/* Menu Styles */
.primary-nav {
position: fixed;
z-index: 999;
}
.menu {
position: relative;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.open-panel {
border: none;
background-color:#fff;
padding: 0;
}
.hamburger {
background: #fff;
position: relative;
display: block;
text-align: center;
padding: 13px 0;
width: 50px;
height: 73px;
left: 0;
top: 0;
z-index: 1000;
cursor: pointer;
}
.hamburger:before {
content:"\2630"; /* hamburger icon */
display: block;
color: #000;
line-height: 32px;
font-size: 16px;
}
.openNav .hamburger:before {
content:"\2715"; /* close icon */
display: block;
color: #000;
line-height: 32px;
font-size: 16px;
}
.hamburger:hover:before {
color: #777;
}
.primary-nav .menu li {
position: relative;
padding-left: 25px;
}
.menu .icon {
position: absolute;
top: 12px;
right: 10px;
pointer-events: none;
width: 24px;
height: 24px;
color: #fff;
}
.openNav .menu .icon {
right: initial;
left: 10px;
}
.menu,
.menu a,
.menu a:visited {
color: #aaa;
text-decoration: none!important;
position: relative;
}
.menu a {
display: block;
white-space: nowrap;
padding: 1em;
font-size: 14px;
}
.menu a:hover {
color: #fff;
}
.menu {
margin-bottom: 3em;
}
.menu-dropdown li .icon {
color: #777;
}
.menu-dropdown li:hover .icon {
color: #fff;
}
.menu label {
margin-bottom: 0;
display: block;
}
.menu label:hover {
cursor: pointer;
}
.menu input[type="checkbox"] {
display: none;
}
input#menu[type="checkbox"] {
display: none;
}
.sub-menu-dropdown {
display: none;
}
.new-wrapper {
position: absolute;
left: 50px;
width: calc(100% - 50px);
transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}
#menu:checked + ul.menu-dropdown {
left: 0;
-webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
}
.sub-menu-checkbox:checked + ul.sub-menu-dropdown {
display: block!important;
-webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
}
.openNav .new-wrapper {
position: absolute;
transform: translate3d(200px, 0, 0);
width: calc(100% - 250px);
transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}
.downarrow {
background: transparent;
position: absolute;
right: 50px;
top: 12px;
color: #777;
width: 24px;
height: 24px;
text-align: center;
display: block;
}
.downarrow:hover {
color: #fff;
}
.menu {
position: absolute;
display: block;
left: -200px;
top: 0;
width: 250px;
transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
background-color: #000;
z-index: 999;
}
.menu-dropdown {
top: 0;
overflow-y: auto;
}
.overflow-container {
position: relative;
height: calc(100vh - 73px)!important;
overflow-y: auto;
border-top: 73px solid #fff;
z-index: -1;
display:block;
}
.menu a.logotype {
position: absolute!important;
top: 11px;
left: 55px;
display: block;
font-family: 'Work Sans', sans-serif;
text-transform: uppercase;
font-weight: 800;
color: #000;
font-size: 21px;
padding: 10px;
}
.menu a.logotype span {
font-weight: 400;
}
.menu a.logotype:hover {
color: #777;
}
.sub-menu-dropdown {
background-color: #333;
}
.openNav .menu {
top 73px;
transform: translate3d(200px, 0, 0);
transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}
/* label.hamburger {
display: none;
} */

<!DOCTYPE html>
<html lang="en" >
   <head>
      <meta charset="UTF-8">
      <title>CodePen - Multi-level Side Nav Menu</title>
      <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,800" rel="stylesheet">
      <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
      <link rel="stylesheet" href="./style.css">
   </head>
   <body>
      <!-- partial:index.partial.html -->
      <div class="primary-nav">
         <button href="#" class="hamburger open-panel nav-toggle">
         <span class="screen-reader-text">Menu</span>
         </button>
         <nav role="navigation" class="menu">
            <a href="#" class="logotype">LOGO<span>TYPE</span></a>
            <div class="overflow-container">
               <ul class="menu-dropdown">
                  <li><a href="#">Dashboard</a><span class="icon"><i class="fa fa-dashboard"></i></span></li>
                  <li class="menu-hasdropdown">
                     <a href="#">Settings</a><span class="icon"><i class="fa fa-gear"></i></span>
                     <label title="toggle menu" for="settings">
                     <span class="downarrow"><i class="fa fa-caret-down"></i></span>
                     </label>
                     <input type="checkbox" class="sub-menu-checkbox" id="settings" />
                     <ul class="sub-menu-dropdown">
                        <li><a href="">Profile</a></li>
                        <li><a href="">Security</a></li>
                        <li><a href="">Account</a></li>
                     </ul>
                  </li>
                  <li><a href="#">Favourites</a><span class="icon"><i class="fa fa-heart"></i></span></li>
                  <li><a href="#">Messages</a><span class="icon"><i class="fa fa-envelope"></i></span></li>
               </ul>
            </div>
         </nav>
      </div>
      <div class="new-wrapper">
         <div id="main">
            <div id="main-contents">
               Text here
            </div>
         </div>
      </div>
      <!-- partial -->
      <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script  src="./script.js"></script>
   </body>
</html>

标签： javascripthtmlcss

javascript - 如何解决 CSS 中的左侧菜单扩展跳跃问题？

问题描述

解决方案

推荐阅读