I am creating a header which has menu and search function.
In my responsive design, I have menu icon on left side, and search icon on right side.
When I click search icon, it works. Search options slide from right to left.
But when I click menu icon, search options appear from right to left.
I want to slide menu from left to right, when I click menu icon.
I am using sass compiler in VS code.
I am glad if someone helps me out.
@import url("https://fonts.googleapis.com/css?family=Varela+Round");
#sidebarMenu {
position: relative;
width: 100%;
height: 100%;
position: fixed;
left: 0;
margin-top: 50px;
-webkit-transform: translateX(-1500px);
transform: translateX(-1500px);
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
background: #000000;
}
.sidebarMenuInner {
position: absolute;
text-align: center;
top: 40%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
margin: 0;
padding: 0;
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
padding: 30px;
cursor: pointer;
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
-webkit-transform: translateX(0);
transform: translateX(0);
}
input[type=checkbox] {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 18px;
left: 20px;
height: 22px;
width: 22px;
}
.spinner {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
margin-top: -9px;
}
#sidebarSearch {
position: relative;
height: 100%;
left: 0;
width: 100%;
margin-top: 50px;
-webkit-transform: translateX(1500px);
transform: translateX(1500px);
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
background: #000000;
color: #fff;
position: fixed;
text-align: center;
}
.sidebarIconSearch i {
color: #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: absolute;
top: 16px;
right: 25px;
z-index: 99;
font-size: 20px;
}
input[type="checkbox"]:checked~#sidebarSearch {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.search-title {
font-size: 20px;
font-weight: bold;
margin: 20px 0 10px;
}
.search_text {
outline: none;
height: 30px;
width: 60%;
border: solid 3px #fff;
background: none;
border-radius: 30px;
color: #fff;
padding: 0 20px;
font-size: 16px;
}
.tag-list {
color: #000000;
margin: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
padding-bottom: 10px;
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.tag-list li {
background: #fff;
border-radius: 30px;
margin: 2px;
height: 24px;
width: 16%;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 12px;
}
.Category dt {
background: #fff;
width: 80px;
height: 80px;
border-radius: 50%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.Category dt img {
width: 50px;
height: 50px;
}
.Category dd {
text-transform: uppercase;
font-weight: bold;
margin: 0 auto;
}
.Category-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.Day-box {
outline: none;
height: 30px;
width: 150px;
border: solid 3px #fff;
background: none;
border-radius: 30px;
color: #fff;
padding: 0 20px;
font-size: 16px;
}
html,
body {
overflow-x: hidden;
height: 100%;
background: #fff;
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
font-weight: 100;
}
.header {
display: block;
width: 100%;
max-width: 100%;
-webkit-box-shadow: none;
box-shadow: none;
position: fixed;
height: 50px;
background: #2D2524;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li><a href="#" target="_blank">Home</a></li>
<li><a href="#" target="_blank">Events</a></li>
<li><a href="#" target="_blank">Profile</a></li>
<li><a href="#" target="_blank">Log out</a></li>
</ul>
</div>
<input type="checkbox" class="openSidebarSearch" id="openSidebarSearch">
<label for="openSidebarSearch" class="sidebarIconSearch">
<i class="fas fa-search search_icon"></i>
</label>
<div id="sidebarSearch">
<div class="search-erea">
<div class="search-title">Enter the name of event</div>
<input type="text" class="search_text">
<div class="search-title">Choose tags</div>
<ul class="tag-list">
<li>Tag</li>
<li>Tag</li>
<li>Tag</li>
<li>Tag</li>
</ul>
<ul class="tag-list">
<li>Tag</li>
<li>Tag</li>
<li>Tag</li>
<li>Tag</li>
</ul>
</div>
<div class="search-erea">
<div class="search-title">Categorys</div>
<div class="Category-list">
<dl class="Category">
<dt><img src="./martini.png" alt="bar-img"></dt>
<dd>bar</dd>
</dl>
<dl class="Category">
<dt><img src="./beer.png" alt="pub-img"></dt>
<dd>pub</dd>
</dl>
<dl class="Category">
<dt><img src="./dj.png" alt="club-img"></dt>
<dd>club</dd>
</dl>
</div>
</div>
<div class="search-erea">
<div class="search-title">Day</div>
<input type="text" class="Day-box">
</div>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>Main image</div>
</div>
</div>
Change Target your Checkbox
input[type="checkbox"].openSidebarSearch //Target with Class
input[type="checkbox"].openSidebarSearch:checked ~ #sidebarSearch {
-webkit-transform: translateX(0);
transform: translateX(0);
}