Ermiv
Reputation: 51
How to make a show/hide sidebar menu?
My problem is that I am trying to make the side bar show and hide whenever the link above is clicked but apparently it only works once, I feel like it needs to be in a loop in order to be contiously listening.
The idea is that the side bar will be shown if it's hidden and hidden if it's shown.
I tried setting two conditions, one for if the width of the side menu is 500px so it will trigger the function closeNav and also the condition if the width of the side menu is 0px it will trigger the openNav function.
function openNav() {
document.getElementById("categoriesSideBar").style.width = "500px";
}
function closeNav() {
document.getElementById("categoriesSideBar").style.width = "0px";
}
if (document.getElementById("categoriesSideBar").style.width = "0px"){
document.getElementById("sideButton").onclick=openNav;
}
if (document.getElementById("categoriesSideBar").style.width = "500px"){
document.getElementById("sideButton").onclick=closeNav;
}/*******************************BASE SETTINGS***************************************/
body{
display:flex;
flex-direction: column;
}
.upperPart{
display:flex;
flex-direction: column;
}
.middlePart{
display:flex;
flex-direction: row;
}
.downPart{
display:flex;
flex-direction: row;
}
div{
/* border: solid 2px red;
margin: 6px; */
}
*{
margin: 0px;
padding: 0px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-style: italic;
}
/*<!----------------------------THE UPPPER PART------------------------------------------->*/
.LogoAndLogin{
display: flex;
flex-direction: row;
}
/*<!---------------------------Title Logo Slogan-------------------------------------->*/
.titleLogoSlogan{
padding-left: 60px;
padding-top: 10px;
padding-bottom: 10px;
width: 70%;
background-color: #1F4E78;
color: white;
}
.titleLogoSlogan h3{
margin-top: 5px;
font-size: 1em;
font-weight: normal;
}
.mainLogo{
display: flex;
flex-direction: row;
}
.mainLogo h1{
margin-top: 10px;
margin-left: 10px;
}
.logo{
height: 60px;
width: 60px;
border-radius: 30%;
}
/*<!---------------------------Login-------------------------------------->*/
.login{
width: 30%;
background-color: #1F4E78;
color: white;
}
.login form{
margin-top: 21px;
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
background-color: #1F4E78;
color: white;
}
label[for="email"]{
margin-right: 26px;
}
#loginButton{
margin-right:50px
}
.email{
margin: 3px;
}
.password{
margin: 3px;
}
/* <!---------------------------NAVIGATION BAR----------------------------------->*/
.navigationBar{
background-color: #2465a1;
}
.navigationBar ul{
padding-left: 170px;
padding-top: 10px;
padding-bottom: 10px;
list-style-type: none;
display: flex;
flex-direction: row;
}
.navigationBar ul li{
margin-right:10px ;
border: solid 1.5px #195083;
border-radius: 10%;
padding: 2px;
}
.navigationBar ul li a{
text-decoration:none;
color: white;
}
/*<!----------------------------SEARCH------------------------------------------->*/
.searchBarContainer{
display: flex;
flex-direction: row;
}
.sideButton{
width: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.searchBar{
padding-left: 170px;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
width: 90%;
background-color: #375623;
color: white;
}
/*<!----------------------------THE MIDDLE PART------------------------------------------->*/
/*<!----------------------------Categories Sidebar---------------------------------->*/
.categoriesSideBar{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
width: 500px;
background-color: #548235;
color: white;
}
.categoriesSideBar ul{
list-style-type: none;
}
.categoriesSideBar ul li{
margin: 7px;
}
/* <!---------------------------Gigs------------------------------------------------>*/
.gigsSpace{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: rgb(27, 27, 27);
padding-top: 20px;
}
.unit{
margin: 10px;
width:290px;
height:300px;
border-radius: 2%;
background-color: rgb(53, 53, 53);
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
.unit img{
height: 260px;
width: 260px;
}
.unitImg{
margin: auto;
}
.unitTitle{
width: 100%;
border: solid 1px rgb(27, 27, 27);
text-align: center;
}
/*<!----------------------------DOWN PART-------------------------------------------------->*/<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css"/>
<script defer src="myscript.js"></script>
</head>
<body>
<!----------------------------THE UPPPER PART------------------------------------------->
<div class="upperPart">
<!---------------------------HEADER-------------------------------------->
<div class="LogoAndLogin">
<div class="titleLogoSlogan">
<div class="mainLogo">
<img src="df.png" alt="logo" name="logo" class="logo"/>
<h1>Untitled</h1>
</div>
<h3>description in form of a slogan</h3>
</div>
<div class="login">
<form method="post" action="loginAppPhp.php">
<div class="email">
<label for="email" >email</label>
<input type="text" id="email" size="15"/>
</div>
<div class="password">
<label for="password">password </label>
<input type="password" id="password" size="15"/>
</div>
<input type="submit" id="loginButton"></input>
</form>
</div>
</div>
<!---------------------------NAVIGATION BAR----------------------------------->
<div class="navigationBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shops and Products</a></li>
<li><a href="#">Find Work/Worker</a></li>
<li><a href="#">New Shops</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!---------------------------SEARCH--------------------------------------->
<div class="searchBarContainer">
<div class="sideButton" id="sideButton">
<a href="#"> side bar </a>
</div>
<div class=searchBar>
<form method="post" action="searchAppPhp.php">
<label>Search </label>
<input type="text" id="search" size="50"/>
<input type="submit" name="search"></input>
</form>
</div>
</div>
</div>
<!-----------------------------------------------------------------------------
▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
▒▓▒▒▒▒▒▒▒▒▓▒
▒▒▓▓▓▓▓▓▓▓▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
--------------------------------------------------------------------------------->
<!----------------------------THE MIDDLE PART------------------------------------------->
<div class="middlePart">
<!------------------------------Categories Sidebar---------------------------------->
<div class="categoriesSideBar" id="categoriesSideBar">
<ul>
<li>category1</li>
<li>category2</li>
<li>category3</li>
<li>category4</li>
<li>category5</li>
<li>category6</li>
<li>category7</li>
<li>category8</li>
<li>category9</li>
</ul>
</div>
<!------------------------------------GigsSpace------------------------------------------>
<div class="gigsSpace">
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
</div>
</div>
<!-----------------------------------------------------------------------------
▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
▒▓▒▒▒▒▒▒▒▒▓▒
▒▒▓▓▓▓▓▓▓▓▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
--------------------------------------------------------------------------------->
<div class="downPart">
<footer>
</footer>
</div>
</body>
</html>Upvotes: 0
Views: 4161
Answers (3)
s.kuznetsov
Reputation: 15223
I made you an example based on toggle + animation of the show/hide of the sidebar.
var hide_show = document.getElementById("sideButton");
hide_show.onclick = function() {
document.querySelector(".categoriesSideBar").classList.toggle('hide_sidebar');
}/*******************************BASE SETTINGS***************************************/
body{
display:flex;
flex-direction: column;
}
.upperPart{
display:flex;
flex-direction: column;
}
.middlePart{
display:flex;
flex-direction: row;
}
.downPart{
display:flex;
flex-direction: row;
}
div{
/* border: solid 2px red;
margin: 6px; */
}
*{
margin: 0px;
padding: 0px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-style: italic;
}
/*<!----------------------------THE UPPPER PART------------------------------------------->*/
.LogoAndLogin{
display: flex;
flex-direction: row;
}
/*<!---------------------------Title Logo Slogan-------------------------------------->*/
.titleLogoSlogan{
padding-left: 60px;
padding-top: 10px;
padding-bottom: 10px;
width: 70%;
background-color: #1F4E78;
color: white;
}
.titleLogoSlogan h3{
margin-top: 5px;
font-size: 1em;
font-weight: normal;
}
.mainLogo{
display: flex;
flex-direction: row;
}
.mainLogo h1{
margin-top: 10px;
margin-left: 10px;
}
.logo{
height: 60px;
width: 60px;
border-radius: 30%;
}
/*<!---------------------------Login-------------------------------------->*/
.login{
width: 30%;
background-color: #1F4E78;
color: white;
}
.login form{
margin-top: 21px;
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
background-color: #1F4E78;
color: white;
}
label[for="email"]{
margin-right: 26px;
}
#loginButton{
margin-right:50px
}
.email{
margin: 3px;
}
.password{
margin: 3px;
}
/* <!---------------------------NAVIGATION BAR----------------------------------->*/
.navigationBar{
background-color: #2465a1;
}
.navigationBar ul{
padding-left: 170px;
padding-top: 10px;
padding-bottom: 10px;
list-style-type: none;
display: flex;
flex-direction: row;
}
.navigationBar ul li{
margin-right:10px ;
border: solid 1.5px #195083;
border-radius: 10%;
padding: 2px;
}
.navigationBar ul li a{
text-decoration:none;
color: white;
}
/*<!----------------------------SEARCH------------------------------------------->*/
.searchBarContainer{
display: flex;
flex-direction: row;
}
.sideButton{
width: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.searchBar{
padding-left: 170px;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
width: 90%;
background-color: #375623;
color: white;
}
/*<!----------------------------THE MIDDLE PART------------------------------------------->*/
/*<!----------------------------Categories Sidebar---------------------------------->*/
.categoriesSideBar{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
width: 500px;
background-color: #548235;
color: white;
transition: .1s;
}
.hide_sidebar {
width: 0px;
}
.categoriesSideBar ul{
list-style-type: none;
}
.categoriesSideBar ul li{
margin: 7px;
}
/* <!---------------------------Gigs------------------------------------------------>*/
.gigsSpace{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: rgb(27, 27, 27);
padding-top: 20px;
}
.unit{
margin: 10px;
width:290px;
height:300px;
border-radius: 2%;
background-color: rgb(53, 53, 53);
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
.unit img{
height: 260px;
width: 260px;
}
.unitImg{
margin: auto;
}
.unitTitle{
width: 100%;
border: solid 1px rgb(27, 27, 27);
text-align: center;
}
/*<!----------------------------DOWN PART-------------------------------------------------->*/<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css"/>
<script defer src="myscript.js"></script>
</head>
<body>
<!----------------------------THE UPPPER PART------------------------------------------->
<div class="upperPart">
<!---------------------------HEADER-------------------------------------->
<div class="LogoAndLogin">
<div class="titleLogoSlogan">
<div class="mainLogo">
<img src="df.png" alt="logo" name="logo" class="logo"/>
<h1>Untitled</h1>
</div>
<h3>description in form of a slogan</h3>
</div>
<div class="login">
<form method="post" action="loginAppPhp.php">
<div class="email">
<label for="email" >email</label>
<input type="text" id="email" size="15"/>
</div>
<div class="password">
<label for="password">password </label>
<input type="password" id="password" size="15"/>
</div>
<input type="submit" id="loginButton"></input>
</form>
</div>
</div>
<!---------------------------NAVIGATION BAR----------------------------------->
<div class="navigationBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shops and Products</a></li>
<li><a href="#">Find Work/Worker</a></li>
<li><a href="#">New Shops</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!---------------------------SEARCH--------------------------------------->
<div class="searchBarContainer">
<div class="sideButton" id="sideButton">
<a href="#"> side bar </a>
</div>
<div class=searchBar>
<form method="post" action="searchAppPhp.php">
<label>Search </label>
<input type="text" id="search" size="50"/>
<input type="submit" name="search"></input>
</form>
</div>
</div>
</div>
<!-----------------------------------------------------------------------------
▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
▒▓▒▒▒▒▒▒▒▒▓▒
▒▒▓▓▓▓▓▓▓▓▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
--------------------------------------------------------------------------------->
<!----------------------------THE MIDDLE PART------------------------------------------->
<div class="middlePart">
<!------------------------------Categories Sidebar---------------------------------->
<div class="categoriesSideBar" id="categoriesSideBar">
<ul>
<li>category1</li>
<li>category2</li>
<li>category3</li>
<li>category4</li>
<li>category5</li>
<li>category6</li>
<li>category7</li>
<li>category8</li>
<li>category9</li>
</ul>
</div>
<!------------------------------------GigsSpace------------------------------------------>
<div class="gigsSpace">
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
</div>
</div>
<!-----------------------------------------------------------------------------
▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
▒▓▒▒▒▒▒▒▒▒▓▒
▒▒▓▓▓▓▓▓▓▓▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
--------------------------------------------------------------------------------->
<div class="downPart">
<footer>
</footer>
</div>
</body>
</html>Upvotes: 1
Dejan.S
Reputation: 19158
I would handle it with classes. That way you keep the styling of the element in one place. Have the bar with 0px width, add a class that has the state categoriesSideBar--is-open, then toggle the class when the sideBar button is clicked.
const sideBarToggle = document.querySelector('#sideButton')
sideBarToggle.addEventListener('click', function() {
const categoriesSideBar = document.querySelector('#categoriesSideBar')
categoriesSideBar.classList.toggle('categoriesSideBar--is-open')
})/*******************************BASE SETTINGS***************************************/
body {
display: flex;
flex-direction: column;
}
.upperPart {
display: flex;
flex-direction: column;
}
.middlePart {
display: flex;
flex-direction: row;
}
.downPart {
display: flex;
flex-direction: row;
}
div {
/* border: solid 2px red;
margin: 6px; */
}
* {
margin: 0px;
padding: 0px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-style: italic;
}
/*<!----------------------------THE UPPPER PART------------------------------------------->*/
.LogoAndLogin {
display: flex;
flex-direction: row;
}
/*<!---------------------------Title Logo Slogan-------------------------------------->*/
.titleLogoSlogan {
padding-left: 60px;
padding-top: 10px;
padding-bottom: 10px;
width: 70%;
background-color: #1F4E78;
color: white;
}
.titleLogoSlogan h3 {
margin-top: 5px;
font-size: 1em;
font-weight: normal;
}
.mainLogo {
display: flex;
flex-direction: row;
}
.mainLogo h1 {
margin-top: 10px;
margin-left: 10px;
}
.logo {
height: 60px;
width: 60px;
border-radius: 30%;
}
/*<!---------------------------Login-------------------------------------->*/
.login {
width: 30%;
background-color: #1F4E78;
color: white;
}
.login form {
margin-top: 21px;
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
background-color: #1F4E78;
color: white;
}
label[for="email"] {
margin-right: 26px;
}
#loginButton {
margin-right: 50px
}
.email {
margin: 3px;
}
.password {
margin: 3px;
}
/* <!---------------------------NAVIGATION BAR----------------------------------->*/
.navigationBar {
background-color: #2465a1;
}
.navigationBar ul {
padding-left: 170px;
padding-top: 10px;
padding-bottom: 10px;
list-style-type: none;
display: flex;
flex-direction: row;
}
.navigationBar ul li {
margin-right: 10px;
border: solid 1.5px #195083;
border-radius: 10%;
padding: 2px;
}
.navigationBar ul li a {
text-decoration: none;
color: white;
}
/*<!----------------------------SEARCH------------------------------------------->*/
.searchBarContainer {
display: flex;
flex-direction: row;
}
.sideButton {
width: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.searchBar {
padding-left: 170px;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
width: 90%;
background-color: #375623;
color: white;
}
/*<!----------------------------THE MIDDLE PART------------------------------------------->*/
/*<!----------------------------Categories Sidebar---------------------------------->*/
.categoriesSideBar {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
width: 0;
background-color: #548235;
color: white;
}
.categoriesSideBar--is-open {
width: 500px;
}
.categoriesSideBar ul {
list-style-type: none;
}
.categoriesSideBar ul li {
margin: 7px;
}
/* <!---------------------------Gigs------------------------------------------------>*/
.gigsSpace {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: rgb(27, 27, 27);
padding-top: 20px;
}
.unit {
margin: 10px;
width: 290px;
height: 300px;
border-radius: 2%;
background-color: rgb(53, 53, 53);
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
.unit img {
height: 260px;
width: 260px;
}
.unitImg {
margin: auto;
}
.unitTitle {
width: 100%;
border: solid 1px rgb(27, 27, 27);
text-align: center;
}
/*<!----------------------------DOWN PART-------------------------------------------------->*/<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script defer src="myscript.js"></script>
</head>
<body>
<!----------------------------THE UPPPER PART------------------------------------------->
<div class="upperPart">
<!---------------------------HEADER-------------------------------------->
<div class="LogoAndLogin">
<div class="titleLogoSlogan">
<div class="mainLogo">
<img src="df.png" alt="logo" name="logo" class="logo" />
<h1>Untitled</h1>
</div>
<h3>description in form of a slogan</h3>
</div>
<div class="login">
<form method="post" action="loginAppPhp.php">
<div class="email">
<label for="email">email</label>
<input type="text" id="email" size="15" />
</div>
<div class="password">
<label for="password">password </label>
<input type="password" id="password" size="15" />
</div>
<input type="submit" id="loginButton"></input>
</form>
</div>
</div>
<!---------------------------NAVIGATION BAR----------------------------------->
<div class="navigationBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shops and Products</a></li>
<li><a href="#">Find Work/Worker</a></li>
<li><a href="#">New Shops</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!---------------------------SEARCH--------------------------------------->
<div class="searchBarContainer">
<button class="sideButton" id="sideButton">
sidebar
</button>
<div class=searchBar>
<form method="post" action="searchAppPhp.php">
<label>Search </label>
<input type="text" id="search" size="50" />
<input type="submit" name="search"></input>
</form>
</div>
</div>
</div>
<!-----------------------------------------------------------------------------
▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
▒▓▒▒▒▒▒▒▒▒▓▒
▒▒▓▓▓▓▓▓▓▓▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
--------------------------------------------------------------------------------->
<!----------------------------THE MIDDLE PART------------------------------------------->
<div class="middlePart">
<!------------------------------Categories Sidebar---------------------------------->
<div class="categoriesSideBar categoriesSideBar--is-open" id="categoriesSideBar">
<ul>
<li>category1</li>
<li>category2</li>
<li>category3</li>
<li>category4</li>
<li>category5</li>
<li>category6</li>
<li>category7</li>
<li>category8</li>
<li>category9</li>
</ul>
</div>
<!------------------------------------GigsSpace------------------------------------------>
<div class="gigsSpace">
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg" />
</div>
</div>
</div>
</div>
<!-----------------------------------------------------------------------------
▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
▒▓▒▒▒▒▒▒▒▒▓▒
▒▒▓▓▓▓▓▓▓▓▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
--------------------------------------------------------------------------------->
<div class="downPart">
<footer>
</footer>
</div>
</body>
</html>Upvotes: 0
priya_singh
Reputation: 2488
You can toggle your option. Create a function which will check width of the categoriesSideBar and based on that change width of your categoriesSideBar. There are multiple option to do same functionality. Instead of playing with width you can show hide the categoriesSideBar
function toggleNav() {
if(document.getElementById("categoriesSideBar").style.width == "0px") {
document.getElementById("categoriesSideBar").style.width = "500px";
}
else {
document.getElementById("categoriesSideBar").style.width = "0px";
}
}
/*******************************BASE SETTINGS***************************************/
body{
display:flex;
flex-direction: column;
}
.upperPart{
display:flex;
flex-direction: column;
}
.middlePart{
display:flex;
flex-direction: row;
}
.downPart{
display:flex;
flex-direction: row;
}
div{
/* border: solid 2px red;
margin: 6px; */
}
*{
margin: 0px;
padding: 0px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-style: italic;
}
/*<!----------------------------THE UPPPER PART------------------------------------------->*/
.LogoAndLogin{
display: flex;
flex-direction: row;
}
/*<!---------------------------Title Logo Slogan-------------------------------------->*/
.titleLogoSlogan{
padding-left: 60px;
padding-top: 10px;
padding-bottom: 10px;
width: 70%;
background-color: #1F4E78;
color: white;
}
.titleLogoSlogan h3{
margin-top: 5px;
font-size: 1em;
font-weight: normal;
}
.mainLogo{
display: flex;
flex-direction: row;
}
.mainLogo h1{
margin-top: 10px;
margin-left: 10px;
}
.logo{
height: 60px;
width: 60px;
border-radius: 30%;
}
/*<!---------------------------Login-------------------------------------->*/
.login{
width: 30%;
background-color: #1F4E78;
color: white;
}
.login form{
margin-top: 21px;
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
background-color: #1F4E78;
color: white;
}
label[for="email"]{
margin-right: 26px;
}
#loginButton{
margin-right:50px
}
.email{
margin: 3px;
}
.password{
margin: 3px;
}
/* <!---------------------------NAVIGATION BAR----------------------------------->*/
.navigationBar{
background-color: #2465a1;
}
.navigationBar ul{
padding-left: 170px;
padding-top: 10px;
padding-bottom: 10px;
list-style-type: none;
display: flex;
flex-direction: row;
}
.navigationBar ul li{
margin-right:10px ;
border: solid 1.5px #195083;
border-radius: 10%;
padding: 2px;
}
.navigationBar ul li a{
text-decoration:none;
color: white;
}
/*<!----------------------------SEARCH------------------------------------------->*/
.searchBarContainer{
display: flex;
flex-direction: row;
}
.sideButton{
width: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.searchBar{
padding-left: 170px;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
width: 90%;
background-color: #375623;
color: white;
}
/*<!----------------------------THE MIDDLE PART------------------------------------------->*/
/*<!----------------------------Categories Sidebar---------------------------------->*/
.categoriesSideBar{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
width: 500px;
background-color: #548235;
color: white;
}
.categoriesSideBar ul{
list-style-type: none;
}
.categoriesSideBar ul li{
margin: 7px;
}
/* <!---------------------------Gigs------------------------------------------------>*/
.gigsSpace{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: rgb(27, 27, 27);
padding-top: 20px;
}
.unit{
margin: 10px;
width:290px;
height:300px;
border-radius: 2%;
background-color: rgb(53, 53, 53);
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
.unit img{
height: 260px;
width: 260px;
}
.unitImg{
margin: auto;
}
.unitTitle{
width: 100%;
border: solid 1px rgb(27, 27, 27);
text-align: center;
}
/*<!----------------------------DOWN PART-------------------------------------------------->*/<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css"/>
<script defer src="myscript.js"></script>
</head>
<body>
<!----------------------------THE UPPPER PART------------------------------------------->
<div class="upperPart">
<!---------------------------HEADER-------------------------------------->
<div class="LogoAndLogin">
<div class="titleLogoSlogan">
<div class="mainLogo">
<img src="df.png" alt="logo" name="logo" class="logo"/>
<h1>Untitled</h1>
</div>
<h3>description in form of a slogan</h3>
</div>
<div class="login">
<form method="post" action="loginAppPhp.php">
<div class="email">
<label for="email" >email</label>
<input type="text" id="email" size="15"/>
</div>
<div class="password">
<label for="password">password </label>
<input type="password" id="password" size="15"/>
</div>
<input type="submit" id="loginButton"></input>
</form>
</div>
</div>
<!---------------------------NAVIGATION BAR----------------------------------->
<div class="navigationBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shops and Products</a></li>
<li><a href="#">Find Work/Worker</a></li>
<li><a href="#">New Shops</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!---------------------------SEARCH--------------------------------------->
<div class="searchBarContainer">
<div class="sideButton" id="sideButton" onClick="toggleNav()">
<a href="#"> side bar </a>
</div>
<div class=searchBar>
<form method="post" action="searchAppPhp.php">
<label>Search </label>
<input type="text" id="search" size="50"/>
<input type="submit" name="search"></input>
</form>
</div>
</div>
</div>
<!-----------------------------------------------------------------------------
▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
▒▓▒▒▒▒▒▒▒▒▓▒
▒▒▓▓▓▓▓▓▓▓▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
--------------------------------------------------------------------------------->
<!----------------------------THE MIDDLE PART------------------------------------------->
<div class="middlePart">
<!------------------------------Categories Sidebar---------------------------------->
<div class="categoriesSideBar" id="categoriesSideBar">
<ul>
<li>category1</li>
<li>category2</li>
<li>category3</li>
<li>category4</li>
<li>category5</li>
<li>category6</li>
<li>category7</li>
<li>category8</li>
<li>category9</li>
</ul>
</div>
<!------------------------------------GigsSpace------------------------------------------>
<div class="gigsSpace">
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
<div class="unit">
<div class="unitTitle">
<h3>Title</h3>
</div>
<div class="unitImg">
<img src="shop.jpg"/>
</div>
</div>
</div>
</div>
<!-----------------------------------------------------------------------------
▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▓▒▒▓▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
▒▓▒▒▒▒▒▒▒▒▓▒
▒▒▓▓▓▓▓▓▓▓▒▒
▒▒▒▒▒▒▒▒▒▒▒▒
--------------------------------------------------------------------------------->
<div class="downPart">
<footer>
</footer>
</div>
</body>
</html>Upvotes: 1
Related Questions
- Toggle sidemenu in html
- Need help closing sidebar/pull navigation menu when menu item is clicked
- How to display hide/show menu using javascript?
- How to toggle open & close menu
- Hiding and showing sidebar div
- Collapsable sidebar / navigation menu
- How to create a Show Hide Nav Menu
- Hide the side menu bar using Jquery
- jQuery toggle left sidebar menu with content
- How to display a side bar menu