0

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. navigation

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>

3
  • Welcome to stack overflow! : ) Consider creating a stackoverflow.com/help/minimal-reproducible-example - so we can be more help. Oct 4, 2019 at 4:24
  • but there is no any search icon in your header
    – Ranjith v
    Oct 4, 2019 at 4:27
  • @Ranjithv I included icon right there <input type="checkbox" class="openSidebarSearch" id="openSidebarSearch"> <label for="openSidebarSearch" class="sidebarIconSearch"> <i class="fas fa-search search_icon"></i> </label> I cannot figure out why I need empty header div at the top. Oct 4, 2019 at 4:41

1 Answer 1

0

Change Target your Checkbox

input[type="checkbox"].openSidebarSearch //Target with Class


input[type="checkbox"].openSidebarSearch:checked ~ #sidebarSearch {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

https://jsfiddle.net/lalji1051/dgxye752/3/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.