【发布时间】：2017-01-16 06:03:05
【问题描述】：
单击菜单栏图标后，我必须使菜单从右侧滑动。我还必须滑动菜单栏图标。下面的代码是点击菜单栏后直接显示的菜单。单击菜单后，我必须顺利显示。我需要在移动设备上使用它。你会在这方面帮助我吗？
$(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>【问题讨论】：
标签： javascript jquery html css menu