How do i make the navigate Sidebar open?
Question
i have seen this code in codepen as an example, so i tried and copied it to my project in phpstorm. and i run the code but the sidebar does not open to me and i cannot understand why. this is the code:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type="text/css" href = "Sources/bootstrap.css">
<link rel = "stylesheet" type="text/css" href = "Sources/MatirialIcons.css">
<link rel = "stylesheet" type="text/css" href = "Sources/Matirialize.css">
<script type = "text/javascript"
src = "Sources/jquery-2.1.1.js"></script>
<script src = "Sources/Matirialize.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
transform: translateX(-100%);
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 {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.open-bg {
background-color: rgba(0,0,0,0.4);
overflow: hidden;
}
.open {
transform: translateX(0px);
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<body>
<div class="container">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" id="closeNav">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" id="openNav">☰ Brand</span>
</div>
</body>
<script>
$( "#openNav" ).click(function() {
$('#mySidenav').addClass('open');
$('body').addClass('open-bg');
});
$( "#closeNav" ).click(function() {
$('#mySidenav').removeClass('open');
$('body').removeClass('open-bg');
});
</script>
</html>
why is the sidebar does not open ? this is the link to the codepen code that i copied from: https://codepen.io/shantikumarsingh/pen/gXPjdG
it works perfectly there and i need an exact same sidebar like there is in the example.
1 answers
solution1
0
I copied/pasted your code and changed the jQuery call into the following one:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
That seems to have worked fine for me after so my guess is that your jQuery call isn't working (wrong directory, file name mistyped, etc.) so once you fix that all should be working fine.
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.