I’m a noobie at programing. I’m currently making a simple shop website for a project in class. I’m currently struggling with how to make it work.
This is my complete style sheet
<style>
.open{
cursor: pointer;
background-color: black;
text-align: center;
padding: 5px;
font-size: 40px;
}
.open i {
color: white;
height: 50px;
width: 50px;
}
#Sidenav {
height: 100%;
width: 0px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-x: hidden;
transition: 0.5s;
}
.logo {
margin: 20px 0 0 0; /* top right down left */
width: 75%;
padding-bottom: 10px;
border-bottom: 1px solid white;
}
.logo img {
margin: 0;
height: 100px;
width: 100px;
}
.sidenav ul {
margin: 0 0 0 12.5%;/* top right down left */
padding: 0;
width: 75%;
list-style: none;
}
.sidenav ul li a {
text-decoration: none;
color: black;
position: relative;
}
.sidenav ul li{
margin: 10px 0 10px 0; /* top right down left */
background-color: white;
border-radius: 20px;
text-align: center;
line-height: 30px;
font-size: 20px;
}
</style>
All of HTML codes are working fine
<body>
<span class="open" onclick="OpenNav()"><i class="fas fa-bars"></i></span>/* My button */
<nav id="Sidenav" class="sidenav">
<center>
<div class="logo">
<<img src="#" alt="logo"/>
<div>
</center>
<ul>
<li><a href="#">All Items</a></li>
<li><a href="#">Smartphones</a></li>
<li><a href="#">Appliances</a></li>
<li><a href="#">PC Components</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">My Cart</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Shop Inventory</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
<h1>Content
<div id="main">
</div>
The function OpenNav() work fine as well, but when I put the Closenav function I can’t click on anything else.
<script>
function OpenNav() {
document.getElementById("Sidenav").style.width = "250px";
}
document.onclick = function(Closenav){
if(Closenav.target.id !== 'Sidenav'){
document.getElementById("Sidenav").style.width = "0px";
};
};
</script>
</body>