使用html和jquery创建侧边菜单

Question

我正在尝试使用html和jquery/javascript在我的网页上显示一个侧边菜单。我只能显示侧边菜单，但无法打开和关闭侧边菜单。在这方面需要帮助。

Html：

<body>
    <div id="container">
        <nav>
        <h1> Menu<span id="openIcon"> <i class="fa fa-align-justify" aria-hidden="true"></i></span></h1>
        <ul id="sidemenu" style="list-style-type:none">
            <li class="list"> <a href="https://yahoo.co.in">Yahoo!!</a></li>
            <li class="list"> <a href="https://gmail.com"> GMail </a></li>
            <li class="list"> <a href= "https://twitter.com">twitter</a></li>
        </ul>
        </nav>
    </div>
    <script src="sidemenu.js"></script>
</body>

Answer 1

尝试使用简单的侧边菜单

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
<script>

(function(){
   $('#openIcon').on('click', function(){
     $('#sidemenu').toggleClass('active');
   });
})();

#openIcon {
  cursor: pointer;
}
#sidemenu {
  left: -100%;
  position: absolute;
}
.active {
  left: 0 !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav>
  <h1> Menu<span id="openIcon"> <i class="fa fa-align-justify" aria-hidden="true"></i></span></h1>
  <ul id="sidemenu" style="list-style-type:none">
    <li class="list"> <a href="https://yahoo.co.in">Yahoo!!</a></li>
    <li class="list"> <a href="https://gmail.com"> GMail </a></li>
    <li class="list"> <a href= "https://twitter.com">twitter</a></li>
  </ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

​

如果您需要全宽菜单，请使用下面这样的内容

​

(function(){
	var $hideElement = $('#menuDiv');
	$('#menu').on('click', function(){
		$hideElement.addClass('opend');
	});
	$('#active_menu').on('click', function(){
		$hideElement.removeClass('opend');
	});
})();

#menuDiv {
	position:fixed;
	left:-100%;
	top:0;
	width:100%;
	height:100%;
	background:#F5CFD0;
	z-index:999;
	overflow-x:hidden;
	transition-duration:05s;
	-moz-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
}
.opend {
	left:0 !important;
}
#active_menu {
    position: absolute;
    top: 0;
    right: 20px;
    width: 100%;
    padding-top: 15px;
    text-align: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a href="#" id="menu"><i class="fa fa-align-justify" aria-hidden="true"></i></a>
<div id="menuDiv">
	<a href="#" id="active_menu"><i class="fa fa-times" aria-hidden="true"></i></a>
	
    
</div><!-- /.menuDiv -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

​

Answer 2

尝试使用下面的侧边菜单

<html>
<head>
<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="https://yahoo.co.in">Yahoo!!</a>
  <a href="https://gmail.com"> GMail </a>
  <a href= "https://twitter.com">twitter</a>
</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
</div>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
</script>   
</body>
</html>

Answer 3

   <div id="container">
    <nav>
        <h1> Menu<span id="openIcon" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse"> <i class="fa fa-align-justify" aria-hidden="true"></i></span></h1>
        <ul id="bs-example-navbar-collapse" style="list-style-type:none">
            <li class="list"> <a href="https://yahoo.co.in">Yahoo!!</a></li>
            <li class="list"> <a href="https://gmail.com"> GMail </a></li>
            <li class="list"> <a href= "https://twitter.com">twitter</a></li>
        </ul>
    </nav>
</div>