带有汉堡图标的响应式侧面导航菜单

Question

未打开时的简单菜单标题

 $(document).ready(function() { function toggleSidebar() { $(".button").toggleClass("active"); $("main").toggleClass("move-to-left"); $(".sidebar-item").toggleClass("active"); } $(".button").on("click tap", function() { toggleSidebar(); }); $(document).keyup(function(e) { if (e.keyCode === 27) { toggleSidebar(); } }); }); 

 @import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic); body, html { height: 100%; padding: 0; margin: 0; font-family: 'Arimo', sans-serif; } main { z-index: 2; position: relative; height: 100%; background-color: #2D3142; -webkit-transition: transform .7s ease-in-out; -moz-transition: transform .7s ease-in-out; -ms-transition: transform .7s ease-in-out; -o-transition: transform .7s ease-in-out; transition: transform .7s ease-in-out; } .sidebar { height: 100%; width: 400px; position: fixed; top: 0; z-index: 1; right: 0; background-color: #EF8354; } .bar { display: block; height: 5px; width: 50px; background-color: #EF8354; margin: 10px auto; } .button { cursor: pointer; display: inline-block; width: auto; margin: 0 auto; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } .nav-right { position: fixed; right: 40px; top: 20px; } .nav-right.visible-xs { z-index: 3; } .hidden-xs { display: none; } .middle { margin: 0 auto; } .bar { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } .nav-right.visible-xs .active .bar { background-color: #FFF; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } .button.active .top { -webkit-transform: translateY(15px) rotateZ(45deg); -moz-transform: translateY(15px) rotateZ(45deg); -ms-transform: translateY(15px) rotateZ(45deg); -o-transform: translateY(15px) rotateZ(45deg); transform: translateY(15px) rotateZ(45deg); } .button.active .bottom { -webkit-transform: translateY(-15px) rotateZ(-45deg); -moz-transform: translateY(-15px) rotateZ(-45deg); -ms-transform: translateY(-15px) rotateZ(-45deg); -o-transform: translateY(-15px) rotateZ(-45deg); transform: translateY(-15px) rotateZ(-45deg); } .button.active .middle { width: 0; } .move-to-left { -webkit-transform: translateX(-400px); -moz-transform: translateX(-400px); -ms-transform: translateX(-400px); -o-transform: translateX(-400px); transform: translateX(-400px); } nav { padding-top: 30px; } .sidebar-list { padding: 0; margin: 0; list-style: none; position: relative; margin-top: 150px; text-align: center; } .sidebar-item { margin: 30px 0; opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .sidebar-item:first-child { -webkit-transition: all .7s .2s ease-in-out; -moz-transition: all .7s .2s ease-in-out; -ms-transition: all .7s .2s ease-in-out; -o-transition: all .7s .2s ease-in-out; transition: all .7s .2s ease-in-out; } .sidebar-item:nth-child(2) { -webkit-transition: all .7s .4s ease-in-out; -moz-transition: all .7s .4s ease-in-out; -ms-transition: all .7s .4s ease-in-out; -o-transition: all .7s .4s ease-in-out; transition: all .7s .4s ease-in-out; } .sidebar-item:nth-child(3) { -webkit-transition: all .7s .6s ease-in-out; -moz-transition: all .7s .6s ease-in-out; -ms-transition: all .7s .6s ease-in-out; -o-transition: all .7s .6s ease-in-out; transition: all .7s .6s ease-in-out; } .sidebar-item:last-child { -webkit-transition: all .7s .8s ease-in-out; -moz-transition: all .7s .8s ease-in-out; -ms-transition: all .7s .8s ease-in-out; -o-transition: all .7s .8s ease-in-out; transition: all .7s .6s ease-in-out; } .sidebar-item.active { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .sidebar-anchor { color: #FFF; text-decoration: none; font-size: 1.8em; text-transform: uppercase; position: relative; padding-bottom: 7px; } .sidebar-anchor:before { content: ""; width: 0; height: 2px; position: absolute; bottom: 0; left: 0; background-color: #FFF; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } .sidebar-anchor:hover:before { width: 100%; } .ua { position: absolute; bottom: 20px; left: 60px; } .fa { font-size: 1.4em; color: #EF8354; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .ua:hover .fa { color: #FFF; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } @media (min-width: 480px) { .nav-list { display: block; } } @media (min-width: 768px) { .nav-right { position: absolute; } .hidden-xs { display: block; } .visible-xs { display: none; } } 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="nav-right visible-xs"> <div class="button" id="btn"> <div class="bar top"></div> <div class="bar middle"></div> <div class="bar bottom"></div> </div> </div> <!-- nav-right --> <main> <nav> <img src="http://safindia.org/assets/img/logohome.png" class="img-responsive"> <div class="nav-right hidden-xs"> <div class="button" id="btn"> <div class="bar top"></div> <div class="bar middle"></div> <div class="bar bottom"></div> </div> </div> <!-- nav-right --> </nav> <a href="https://codepen.io/tonkec/" class="ua" target="_blank"> <i class="fa fa-user"></i> </a> </main> <div class="sidebar"> <ul class="sidebar-list"> <li class="sidebar-item"><a href="#" class="sidebar-anchor">Home</a></li> <li class="sidebar-item"><a href="#" class="sidebar-anchor">About Us</a></li> <li class="sidebar-item"><a href="#" class="sidebar-anchor">What We Do</a></li> <li class="sidebar-item"><a href="#" class="sidebar-anchor">Get Involved</a></li> <li class="sidebar-item"><a href="#" class="sidebar-anchor">Contact Us</a></li> </ul> <hr> </div> 

你好，上面的代码是针对侧面导航栏的。它对我来说很好用，但是我面临的问题是当我单击汉堡包图标时，它会将我的主要部分拉到或滑动到左侧。我不想滑动我的背景内容或要滑动到左侧的主要内容，而我的关闭按钮将显示在菜单主体部分的右侧。但是它显示在菜单栏的外部或侧面。我也想使菜单缩小或在页面滚动时调整大小。 菜单设计

Answer 1

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- nav-right --> <main> <nav> <img src="http://safindia.org/assets/img/logohome.png" class="img-responsive"> <div class="nav-right hidden-xs"> <div class="button" id="btn"> <div class="bar top"></div> <div class="bar middle"></div> <div class="bar bottom"></div> </div> </div> <!-- nav-right --> </nav> <a href="https://codepen.io/tonkec/" class="ua" target="_blank"> <i class="fa fa-user"></i> </a> </main> <div class="sidebar"> <span class="glyphicon glyphicon-remove pull-right" id="close-button" style="color: white;font-size: 30px;"></span> <ul class="sidebar-list"> <li class="sidebar-item"><a href="#" class="sidebar-anchor">Home</a></li> <li class="sidebar-item"><a href="#" class="sidebar-anchor">About Us</a></li> <li class="sidebar-item"><a href="#" class="sidebar-anchor">What We Do</a></li> <li class="sidebar-item"><a href="#" class="sidebar-anchor">Get Involved</a></li> <li class="sidebar-item"><a href="#" class="sidebar-anchor">Contact Us</a></li> </ul> <hr> </div> <style> @import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic); body, html { height: 100%; padding: 0; margin: 0; font-family: 'Arimo', sans-serif; } main { z-index: 2; position: relative; height: 100%; background-color: #2D3142; -webkit-transition: transform .7s ease-in-out; -moz-transition: transform .7s ease-in-out; -ms-transition: transform .7s ease-in-out; -o-transition: transform .7s ease-in-out; transition: transform .7s ease-in-out; } .sidebar { height: 100%; width: 400px; position: fixed; top: 0; right: 0; background-color: #EF8354; display:none; z-index: 3; } .bar { display: block; height: 5px; width: 50px; background-color: #EF8354; margin: 10px auto; } .button { cursor: pointer; display: inline-block; width: auto; margin: 0 auto; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } .nav-right { position: fixed; right: 40px; top: 20px; } #btn-close { z-index: 3; } .hidden-xs { display: none; } .middle { margin: 0 auto; } .bar { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } #btn-close .active .bar { background-color: #FFF; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } nav { padding-top: 30px; } .sidebar-list { padding: 0; margin: 0; list-style: none; position: relative; margin-top: 150px; text-align: center; } .sidebar-item { margin: 30px 0; opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .sidebar-item:first-child { -webkit-transition: all .7s .2s ease-in-out; -moz-transition: all .7s .2s ease-in-out; -ms-transition: all .7s .2s ease-in-out; -o-transition: all .7s .2s ease-in-out; transition: all .7s .2s ease-in-out; } .sidebar-item:nth-child(2) { -webkit-transition: all .7s .4s ease-in-out; -moz-transition: all .7s .4s ease-in-out; -ms-transition: all .7s .4s ease-in-out; -o-transition: all .7s .4s ease-in-out; transition: all .7s .4s ease-in-out; } .sidebar-item:nth-child(3) { -webkit-transition: all .7s .6s ease-in-out; -moz-transition: all .7s .6s ease-in-out; -ms-transition: all .7s .6s ease-in-out; -o-transition: all .7s .6s ease-in-out; transition: all .7s .6s ease-in-out; } .sidebar-item:last-child { -webkit-transition: all .7s .8s ease-in-out; -moz-transition: all .7s .8s ease-in-out; -ms-transition: all .7s .8s ease-in-out; -o-transition: all .7s .8s ease-in-out; transition: all .7s .6s ease-in-out; } .sidebar-item { opacity: 3; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .sidebar-anchor { color: #FFF; text-decoration: none; font-size: 1.8em; text-transform: uppercase; position: relative; padding-bottom: 7px; } .sidebar-anchor:before { content: ""; width: 0; height: 2px; position: absolute; bottom: 0; left: 0; background-color: #FFF; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } .sidebar-anchor:hover:before { width: 100%; } .ua { position: absolute; bottom: 20px; left: 60px; } .fa { font-size: 1.4em; color: #EF8354; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .ua:hover .fa { color: #FFF; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } @media (min-width: 480px) { .nav-list { display: block; } } @media (min-width: 768px) { .nav-right { position: absolute; } .hidden-xs { display: block; } #btn-close{ display: none; } } </style> <script> $(document).ready(function() { $("#btn").on("click", function() { $(this).hide(); $(".sidebar").css('display','block'); }); $("#close-button").on("click", function() { $('#btn').show(); $(".sidebar").css('display','none'); }); $(document).keyup(function(e) { if (e.keyCode === 27) { } }); }); </script> 

这是您要的吗？ 我添加了关闭glyphicon而不是button。希望可以解决您的问题。