如何使用HTML，CSS和JQuery使菜单在移动设备的右侧滑动？

Question

单击菜单栏图标后，我必须从右侧滑动菜单。 我还要滑动菜单栏图标。 单击菜单栏后，代码会直接显示在菜单栏中。 单击菜单后，我必须顺利显示。 我需要在移动设备上使用它。 你能帮帮我吗？

 $(function() { var menuVisible = false; $('#menuBtn').click(function() { if (menuVisible) { $('#myMenu').css({ 'display': 'none' }); menuVisible = false; return; } $('#myMenu').css({ 'display': 'block' }); menuVisible = true; }); $('#myMenu').click(function() { $(this).css({ 'display': 'none' }); menuVisible = false; }); }); 

 body { margin: 0; padding: 0; height: 100%; } .menu ul { list-style: none; float: right; } .menu li { float: left; margin: 10px; } .menu li a { text-decoration: none; color: #333; text-transform: uppercase; } .menu-bar { display: none; } @media only screen and (max-width: 768px) { .menu-bar { display: block; float: right; cursor: pointer; margin: 10px; } #myMenu { display: none; z-index: 999; } .menu ul { background-color: red; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; padding: 0px; -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); -moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); } .menu ul li { float: none; border-bottom: 1px solid #fff; width: 100%; margin: 20px; text-align: left; } .menu li a { padding: 20px; } } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="menu"> <div class="menu-bar"> <span id="menuBtn"><i class="fa fa-bars" aria-hidden="true"></i></span> </div> <ul id="myMenu"> <li><a href="">home</a> </li> <li><a href="">about</a> </li> <li><a href="">service</a> </li> <li><a href="">contact</a> </li> </ul> </div> <div style="position: relative;top: 50px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut neque dignissim, lobortis nulla sed, tristique urna. Pellentesque placerat, nunc eu feugiat tincidunt, lacus turpis dictum elit, non viverra elit metus at purus. Morbi eleifend dui velit, sit amet pretium odio lacinia eget. Nullam mattis massa in nibh laoreet euismod. Phasellus ullamcorper elit quis neque fermentum, at vehicula dolor posuere. Quisque gravida arcu a metus dignissim, vitae convallis ipsum vestibulum. Aliquam mollis magna non velit convallis, ut eleifend mauris pharetra. Phasellus ac ipsum pulvinar, dignissim lacus ut, dapibus purus. Integer volutpat ullamcorper magna quis vehicula. Maecenas rhoncus, turpis ac aliquam hendrerit, purus velit pellentesque tellus, vitae scelerisque metus leo vestibulum leo. Duis ac vulputate tortor. Aliquam at diam ullamcorper, finibus purus ac, dictum sem. Nulla quis dignissim orci. Donec vel purus eget elit feugiat auctor eget eget odio. Praesent volutpat purus in dui aliquam dignissim. Curabitur bibendum lorem id rutrum congue. Nulla urna diam, malesuada ac nibh consequat, auctor egestas ipsum. In non ipsum augue. Maecenas at velit tempus, pellentesque dui non, volutpat tellus. Duis ullamcorper lorem vel blandit scelerisque. Etiam venenatis est non urna volutpat, nec commodo neque condimentum. Maecenas sed tortor lacinia, viverra ligula vel, maximus ex. Aenean ut vestibulum lectus. Donec l</p> </div> 

Answer 1

您可以使用jQueryUI幻灯片效果 。 见下面的工作示例：

  $(function() { var menuBtn = $('#menuBtn'), myMenu = $("#myMenu"); menuBtn.click(function() { if ( $("#myMenu").is(":visible") ) { menuBtn.removeClass("right_margin"); myMenu.toggle("slide", {direction: "right"}, 400); return; } menuBtn.addClass("right_margin"); myMenu.toggle("slide", {direction: "right" }, 500); }); myMenu.click(function (){ menuBtn.trigger("click"); }); }); 

  body{ margin: 0; padding: 0; height: 100%; } .menu ul { list-style: none; float: right; } .menu li{ float: left; margin: 10px; } .menu li a{ text-decoration: none; color: #333; text-transform: uppercase; } .menu-bar { display: none; } .right_margin{ margin-right: 150px; transition-duration:.5s; -webkit-transition-duration:.5s; -ms-transition-duration:.5s; -moz-transition-duration:.5s; } @media only screen and (max-width: 768px) { .menu-bar { display: block; float: right; cursor: pointer; margin: 10px; } #myMenu { display: none; z-index: 999; } .menu ul { background-color: red; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; padding: 0px; -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); -moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); } .menu ul li { float: none; border-bottom:1px solid #fff; width: 100%; margin: 20px; text-align: left; } .menu li a{ padding: 20px; } } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="menu"> <div class="menu-bar"> <span id="menuBtn"><i class="fa fa-bars" aria-hidden="true"></i></span> </div> <ul id="myMenu"> <li><a href="">home</a></li> <li><a href="">about</a></li> <li><a href="">service</a></li> <li><a href="">contact</a></li> </ul> </div> <div style="position: relative;top: 50px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut neque dignissim, lobortis nulla sed, tristique urna. Pellentesque placerat, nunc eu feugiat tincidunt, lacus turpis dictum elit, non viverra elit metus at purus. Morbi eleifend dui velit, sit amet pretium odio lacinia eget. Nullam mattis massa in nibh laoreet euismod. Phasellus ullamcorper elit quis neque fermentum, at vehicula dolor posuere. Quisque gravida arcu a metus dignissim, vitae convallis ipsum vestibulum. Aliquam mollis magna non velit convallis, ut eleifend mauris pharetra. Phasellus ac ipsum pulvinar, dignissim lacus ut, dapibus purus. Integer volutpat ullamcorper magna quis vehicula. Maecenas rhoncus, turpis ac aliquam hendrerit, purus velit pellentesque tellus, vitae scelerisque metus leo vestibulum leo. Duis ac vulputate tortor. Aliquam at diam ullamcorper, finibus purus ac, dictum sem. Nulla quis dignissim orci. Donec vel purus eget elit feugiat auctor eget eget odio. Praesent volutpat purus in dui aliquam dignissim. Curabitur bibendum lorem id rutrum congue. Nulla urna diam, malesuada ac nibh consequat, auctor egestas ipsum. In non ipsum augue. Maecenas at velit tempus, pellentesque dui non, volutpat tellus. Duis ullamcorper lorem vel blandit scelerisque. Etiam venenatis est non urna volutpat, nec commodo neque condimentum. Maecenas sed tortor lacinia, viverra ligula vel, maximus ex. Aenean ut vestibulum lectus. Donec l</p> </div> 

Answer 2

看看这个，用简单的jQuery完成

 $(function(){ $('#menuBtn').on('click', function(){ if( $(this).hasClass('right_margin') ){ $(this).removeClass('right_margin'); $('#myMenu').removeClass('active'); }else { $(this).addClass('right_margin'); $('#myMenu').addClass('active'); } }); }); 

 body { margin: 0; padding: 0; height: 100%; } .menu ul { list-style: none; float: right; } .menu li { float: left; margin: 10px; } .menu li a { text-decoration: none; color: #333; text-transform: uppercase; } .menu-bar { display: none; } @media only screen and (max-width: 768px) { .menu-bar { display: block; float: right; cursor: pointer; margin: 10px; } #menuBtn { transition-duration:1s; -webkit-transition-duration:1s; -ms-transition-duration:1s; -moz-transition-duration:1s; } #myMenu { z-index: 999; transition-duration:1s; -webkit-transition-duration:1s; -ms-transition-duration:1s; -moz-transition-duration:1s; } .menu ul { background-color: red; height: 100%; position: fixed; top: 0; right: -300px; bottom: 0; padding: 0px; -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); -moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); } .menu ul li { float: none; border-bottom: 1px solid #fff; width: 100%; margin: 20px; text-align: left; } .menu li a { padding: 20px; } .menu .active { right:0; transition-duration:1s; -webkit-transition-duration:1s; -ms-transition-duration:1s; -moz-transition-duration:1s; } .right_margin { margin-right:150px; transition-duration:1s; -webkit-transition-duration:1s; -ms-transition-duration:1s; -moz-transition-duration:1s; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="menu"> <div class="menu-bar"> <span id="menuBtn"><i class="fa fa-bars" aria-hidden="true"></i></span> </div> <ul id="myMenu"> <li><a href="">home</a> </li> <li><a href="">about</a> </li> <li><a href="">service</a> </li> <li><a href="">contact</a> </li> </ul> </div> <div style="width:100%; float:left"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut neque dignissim, lobortis nulla sed, tristique urna. Pellentesque placerat, nunc eu feugiat tincidunt, lacus turpis dictum elit, non viverra elit metus at purus. Morbi eleifend dui velit, sit amet pretium odio lacinia eget. Nullam mattis massa in nibh laoreet euismod. Phasellus ullamcorper elit quis neque fermentum, at vehicula dolor posuere. Quisque gravida arcu a metus dignissim, vitae convallis ipsum vestibulum. Aliquam mollis magna non velit convallis, ut eleifend mauris pharetra. Phasellus ac ipsum pulvinar, dignissim lacus ut, dapibus purus. Integer volutpat ullamcorper magna quis vehicula. Maecenas rhoncus, turpis ac aliquam hendrerit, purus velit pellentesque tellus, vitae scelerisque metus leo vestibulum leo. Duis ac vulputate tortor. Aliquam at diam ullamcorper, finibus purus ac, dictum sem. Nulla quis dignissim orci. Donec vel purus eget elit feugiat auctor eget eget odio. Praesent volutpat purus in dui aliquam dignissim. Curabitur bibendum lorem id rutrum congue. Nulla urna diam, malesuada ac nibh consequat, auctor egestas ipsum. In non ipsum augue. Maecenas at velit tempus, pellentesque dui non, volutpat tellus. Duis ullamcorper lorem vel blandit scelerisque. Etiam venenatis est non urna volutpat, nec commodo neque condimentum. Maecenas sed tortor lacinia, viverra ligula vel, maximus ex. Aenean ut vestibulum lectus. Donec l</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>