使用Javascript进行手风琴/抽屉菜单？请指教

Question

很抱歉打扰，我想创建一个像这样的菜单：sample menu你可以指导我吗？指出我正确的方向？这种菜单的正确名称是什么？我可以使用哪种语言？那里有类似的例子吗？非常感谢您的时间。

商务

Answer 1

看看这个， http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

樱桃选择一个适合你需要的。

Answer 2

尝试此菜单（基本）

标记：

<div class="mainMenu" >
     <div class="main-meu-nav" >
        <ul>
           <li data-id="cat1" >menu 1</li>
           <li data-id="cat2">menu 2</li>
           <li data-id="cat3">menu 3</li>
           <li data-id="cat4">menu 4</li>
        </ul>
     </div>
     <div class="mainmenu-category" >
        <div class="category-row" id="cat1" >menu 1 list item</div>
        <div class="category-row" id="cat2" >menu 2 list item</div>
        <div class="category-row" id="cat3" >menu 3 list item</div>
        <div class="category-row" id="cat4" >menu 4 list item</div>
     </div>
</div>

风格：

    .mainMenu
      {
        width:1024px;
        height:auto;
        margin:auto;
      }
    .main-meu-nav
      {
        width:100%;
        height:auto;
        float:left;
      }
    .main-meu-nav ul
      {
        width:100%;
        height:auto;
        float:left;
        list-style:none;
      }
    .main-meu-nav ul li
      {
        width:auto;
        display:block;
        height:auto;
        float:left;
        list-style:none;
        margin:0px 10px;
        padding:10px ;
        border:1px solid red
      }
    .mainmenu-category
      {
        width:100%;
        height:auto;
        float:left;
        display:none
      }
    .category-row
      {
        width:90%;
        height:auto;
        float:left;
        padding:5%;
        background:#cccccc;
       }

脚本：

$(document).ready(function() { 
$(".main-meu-nav > ul >li").on("click" , function() {
    $(".mainmenu-category").fadeIn();
    var catId = $(this).attr("data-id");
    $(".mainmenu-category").find(".category-row").slideUp(100);
    $(".mainmenu-category").find("#"+catId).slideDown(1000)    
    });

});

Answer 3

尝试

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

     <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

     <!-- Popper JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

           <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

      <style>
      @import url('https://fonts.googleapis.com/css?family=Varela+Round');
      html, body {
          overflow-x: hidden;
          height: 100%;
      }
      body {
          background: #fff;
          padding: 0;
          margin: 0;
          font-family: 'Varela Round', sans-serif;
      }
      .header {
          display: block;
          margin: 0 auto;
          width: 100%;
          max-width: 100%;
          box-shadow: none;
          background-color: #FC466B;
          position: fixed;
          height: 60px!important;
          overflow: hidden;
          z-index: 10;
      }
      .main {
          margin: 0 auto;
          display: block;
          height: 100%;
          margin-top: 60px;
      }
      .mainInner{
          display: table;
          height: 100%;
          width: 100%;
          text-align: center;
      }
      .mainInner div{
          display:table-cell;
          vertical-align: middle;
          font-size: 3em;
          font-weight: bold;
          letter-spacing: 1.25px;
      }
      #sidebarMenu {
          height: 100%;
          position: fixed;
          left: 0;
          width: 250px;
          margin-top: 60px;
          transform: translateX(-250px);
          transition: transform 250ms ease-in-out;
          background:#414956;
      }
      .sidebarMenuInner{
          margin:0;
          padding:0;
          border-top: 1px solid rgba(255, 255, 255, 0.10);
      }
      .sidebarMenuInner li{
          list-style: none;
          color: #fff;
          text-transform: uppercase;
          font-weight: bold;
          padding: 20px;
          cursor: pointer;
          border-bottom: 1px solid rgba(255, 255, 255, 0.10);
      }
      .sidebarMenuInner li span{
          display: block;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.50);
      }
      .sidebarMenuInner li a{
          color: #fff;
          text-transform: uppercase;
          font-weight: bold;
          cursor: pointer;
          text-decoration: none;
      }
      input[type="checkbox"]:checked ~ #sidebarMenu {
          transform: translateX(0);
      }

      input[type=checkbox] {
          transition: all 0.3s;
          box-sizing: border-box;
          display: none;
      }
      .sidebarIconToggle {
          transition: all 0.3s;
          box-sizing: border-box;
          cursor: pointer;
          position: absolute;
          z-index: 99;
          height: 100%;
          width: 100%;
          top: 22px;
          left: 15px;
          height: 22px;
          width: 22px;
      }
      .spinner {
          transition: all 0.3s;
          box-sizing: border-box;
          position: absolute;
          height: 3px;
          width: 100%;
          background-color: #fff;
      }
      .horizontal {
          transition: all 0.3s;
          box-sizing: border-box;
          position: relative;
          float: left;
          margin-top: 3px;
      }
      .diagonal.part-1 {
          position: relative;
          transition: all 0.3s;
          box-sizing: border-box;
          float: left;
      }
      .diagonal.part-2 {
          transition: all 0.3s;
          box-sizing: border-box;
          position: relative;
          float: left;
          margin-top: 3px;
      }
      input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
          transition: all 0.3s;
          box-sizing: border-box;
          opacity: 0;
      }
      input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
          transition: all 0.3s;
          box-sizing: border-box;
          transform: rotate(135deg);
          margin-top: 8px;
      }
      input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
          transition: all 0.3s;
          box-sizing: border-box;
          transform: rotate(-135deg);
          margin-top: -9px;
      }
      </style>
      <body>

      <div class="header"></div>
        <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
        <label for="openSidebarMenu" class="sidebarIconToggle">
          <div class="spinner diagonal part-1"></div>
          <div class="spinner horizontal"></div>
          <div class="spinner diagonal part-2"></div>
        </label>
        <div id="sidebarMenu">
          <ul class="sidebarMenuInner">
            <li><a href="#">Jelena Jovanovic</a></li>
            <li><a href="#">Company</a></li>
            <li><a href="">Instagram</a></li>
            <li><a href="">Twitter</a></li>
            <li><a href="">YouTube</a></li>
            <li><a href="">Linkedin</a></li>
          </ul>
        </div>
        <div id='center' class="main center">
          <div class="mainInner">
            <div>PURE CSS SIDEBAR TOGGLE MENU</div>
          </div>
          <div class="mainInner">
            <div>PURE CSS SIDEBAR TOGGLE MENU</div>
          </div>
          <div class="mainInner">
            <div>PURE CSS SIDEBAR TOGGLE MENU</div>
          </div>
        </div>
      </body>

Answer 4

<!DOCTYPE html>
    <html lang="PT-BR">
      <head>
        <meta charset="utf-8">
        <title>Teste Menu c Javascript</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>

nav {
    background-color:#414956;
    height: 100%;
    position: fixed;
    right: -220px;
    top: 0;
    -moz-transition: right 0.2s linear;
    -o-transition: right 0.2s linear;
    -webkit-transition: right 0.2s linear;
    transition: right 0.2s linear;
    width: 220px;
    z-index: 9001;/* IT'S OVER 9000! */
    padding-top: 4em;

}
#menuToggle {
    background: #e3117c;
    display: block;
    position: fixed;
    height: 40px;
    right: 15%;
    top: 33px;
    width: 46px;
    z-index:9999;
     border-radius: 5px;
}
#menuToggle span {
    background: white;
    display: block;
    height:6%;
    left: 20%;
    position: absolute;
    top: 45%;
    width: 60%;
}

#menuToggle span:before,
#menuToggle span:after {
  background: white;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: -250%;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  width: 100%;
}

#menuToggle span:after { top: 250%; }

nav a {
    color: #fff;
    display: block;
    font-size: 20px;
    margin: 0 0 0 30px;
    font-weight: 300;
    letter-spacing: 1px;
}
nav a:after {
    background: #e3117c;
    content: '';
    display: block;
    height: 2px;
    -moz-transition: width 0.5s;
    -o-transition: width 0.5s;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    width: 0;
    margin-top: 0.2em;
}
n
.menu nav a:hover,.menu nav a:focus {
    color: #e3117c;
}
.open nav {
    right: 0;
} 
.open #menuToggle span {
    background: transparent;
    left: 20%;
    top: 45%;
} 
.open #menuToggle span:before,
.open #menuToggle span:after {
    background: white;
    top: 0;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
} 
.open #menuToggle span:after {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
} 
#menuToggle .navClosed {
    -moz-transition: background 0.1s linear;
    -o-transition: background 0.1s linear;
    -webkit-transition: background 0.1s linear;
    transition: background 0.1s linear;
} 
#menuToggle .navClosed:before,
#menuToggle .navClosed:after {
    -moz-transition: top 0.2s linear 0.1s, -moz-transform 0.2s linear 0.1s;
    -o-transition: top 0.2s linear 0.1s, -o-transform 0.2s linear 0.1s;
    -webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
    -webkit-transition-delay: 0.1s, 0.1s;
    transition: top 0.2s linear 0.1s, transform 0.2s linear 0.1s;
} 
#menuToggle .navOpen {
    -moz-transition: background 0.1s linear 0.2s;
    -o-transition: background 0.1s linear 0.2s;
    -webkit-transition: background 0.1s linear;
    -webkit-transition-delay: 0.2s;
    transition: background 0.1s linear 0.2s;
}

#menuToggle .navOpen:before,
#menuToggle .navOpen:after {
    -moz-transition: top 0.2s linear, -moz-transform 0.2s linear;
    -o-transition: top 0.2s linear, -o-transform 0.2s linear;
    -webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
    transition: top 0.2s linear, transform 0.2s linear;
}
/*-- //menu-navigation --*/
</style>
<script>
$('#show-hide-menu').click(function() {
    if ($('#sidebar').hasClass('visible')) {
    $('#sidebar').removeClass('visible');
  } else {
    $('#sidebar').addClass('visible');
  }
});
</script>
</head>

<body>


      </head>
      <body>
        <div class="menu">


                        <a href="" id="menuToggle"> <span class="navClosed"></span> </a>
                        <nav>  
                            <a href="#home" class="active scroll">Home</a> 
                            <a href="#about" class="scroll">About</a>  
                            <a href="#services" class="scroll">Services</a>  
                            <a href="#gallery" class="scroll">Gallery</a> 
                            <a href="#news" class="scroll">News</a>
                            <a href="#price" class="scroll">price</a> 
                            <a href="#contact" class="scroll">Contact</a> 
                        </nav>


</div>


                            <script>
                        (function($){
                            // Menu Functions
                            $(document).ready(function(){
                            $('#menuToggle').click(function(e){
                                var $parent = $(this).parent('.menu');
                              $parent.toggleClass("open");
                              var navState = $parent.hasClass('open') ? "hide" : "show";
                              $(this).attr("title", navState + " navigation");
                                    // Set the timeout to the animation length in the CSS.
                                    setTimeout(function(){
                                        console.log("timeout set");
                                        $('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");
                                    }, 200);
                                e.preventDefault();
                            });
                          });
                        })(jQuery);
                        </script>
                            <!--// navbar-->


     </body>
    </html>
</body>
</html>

Answer 5

**<!DOCTYPE html>
    <html lang="PT-BR">
      <head>
        <meta charset="utf-8">
        <title>Teste Menu c Javascript</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{padding:0; margin:0; font-family: 'Roboto', sans-serif;}
h1{margin:0; color:#ddd; padding:10px; border-bottom:1px solid #666;}
button:focus{outline:none}
aside{background:#1a1d23; width:250px;height:100vh; position:fixed; transition:.3s;left:-250px;top:0;transition-timing-function: cubic-bezier(0.9,0,1,1);}
aside.close{left:0;transition:.3s;transition-timing-function: cubic-bezier(0.9,0,1,1);}
nav a{display: block; color:#ddd; text-decoration:none;padding:10px;}
nav a:hover{background:#313640;} 
aside button{border:none; background:none; position: absolute;right:-40px; top:7px; font-size:30px; transform:rotate(90deg); display:inline-block; cursor:pointer}/style>
<body>
<header></header>
<div class="container">
<aside>
  <button class="toggle">|||</button>
  <h1>Menu</h1>
  <nav>
        <ul>
            <li>    
                <a href="">Home</a>
                <div class="collapse" id="menu1">
                    <a href="#menu1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 1 </a>
                    <div class="collapse" id="menu1sub1">
                        <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 1 a</a>
                        <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 2 b</a>
                        <a href="#menu1sub1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 3 c </a>
                        <div class="collapse" id="menu1sub1sub1">
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.1</a>
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.2</a>
                        </div>
                        <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 4 d</a>
                        <a href="#menu1sub1sub2" class="list-group-item" data-toggle="collapse"  aria-expanded="false">Subitem 5 e </a>
                        <div class="collapse" id="menu1sub1sub2">
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.1</a>
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.2</a>
                        </div>
                    </div>
                    <a href="#" class="list-group-item" data-parent="#menu1">Subitem 2</a>
                    <a href="#" class="list-group-item" data-parent="#menu1">Subitem 3</a>
                </div>          
            </li>
        </li>
            <a href="#">About Us</a>
            <a href="#">Services</a>
            <a href="#">Portfolio</a>
            <a `href`="#">Contact Us</a>
          </nav>
        </aside>      
          </div>
  </ul>
  <script>
  $(document).ready(function(){
  $(".toggle").click(function(){
    $("aside").toggleClass("close")
  });
 });
// click outside
$(document).mouseup(function(e){ 
  var container = $("aside");
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
         $("aside").remove Class("close")
    }
});
  </script>**