We help IT Professionals succeed at work.

CSS Toggle

Stefan Motz
Stefan Motz asked
on
56 Views
Last Modified: 2020-04-18
Hi Experts,
Would you please help me customize the CSS on this page so that the result looks like it's shown on the attached picture? I would really appreciate your help.
Before and after clicking the hamburgerThis is the code of my page:
<html>
<head>
<title>Hamburger</title>
<style>

#container {
  display: flex;
  min-height: 100%;
}

input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

label {
  position: relative;
  top: 10px;
  left: 20px;
  z-index: 1;
  display: block;
  font-size: 4em;
  color: #444;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  transition: transform .4s;
}

input[type=checkbox]:checked~label {
  transform: translate3d(250px, 0, 0) rotate(90deg);
}

.content {
  width: 100%;
  padding: 40px;

  transform: translate3d(0, 0, 0);
  transition: transform .4s;
}

input[type=checkbox]:checked~.content {
  transform: translate3d(250px, 0, 0);
}

input[type=checkbox]:checked~.slide-menu {
  transform: translate3d(0, 0, 0);
}

input[type=checkbox]:checked~.slide-menu .menu li {
  width: 100%;
}

.slide-menu {
  transform: translate3d(-250px, 0, 0);
  position: absolute;
  width: 250px;

  color: #ddd;
  left: 20;
  height: 100%;
  transition: all .4s;
}

.slide-menu h1 {
  margin: 10px;
  text-shadow: 1px 1px 1px #000;
  color: #628297;
}
</style>
</head>

<body bgcolor="white">
  <div id="container">
    <input id="toggle" type="checkbox"><label for="toggle">&equiv;</label>
    <div class="content">
      &nbsp;<br /><br /><br />
    </div>
    <div class="slide-menu">
      <h1> &nbsp;Search</h1>

      <!-- search form start -->
      <input type="text" />
      <!-- search form end -->

    </div>
  </div>

</body>
</html>

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Stefan MotzIT Developer

Author

Commented:
Thank you so much, this looks great. I was just wondering if it's possible to make the hamburger turn, like it's on the picture I attached. If not, it's not a big issue. This is basically what I tried to accomplish.
Stefan MotzIT Developer

Author

Commented:
It's beautiful, thank you very much!
CERTIFIED EXPERT

Commented:
I was just wondering if it's possible to make the hamburger turn, like it's on the picture I attached

try change:

input[type=checkbox]:checked~label {
	transform: translate(20px, 0px);
}

Open in new window


to this:
input[type=checkbox]:checked~label {
	transform: rotate(90deg);
}

Open in new window

Stefan MotzIT Developer

Author

Commented:
Thank you for your suggestion. I've tried changing the line, but now the hamburger doesn't stay at the same place, it moves far down to the middle of the screen:
<html>
<head>
<title>Hamburger</title>
<style>

#container {
  display: flex;
  min-height: 100%;
}

input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

label {
  position: relative;
  top: 0px;
  left: 20px;
  z-index: 1;
  display: block;
  font-size: 4em;
  color: #444;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  transition: transform .4s;
}

input[type=checkbox]:checked~label {
	transform: rotate(90deg);
}

.content {
  width: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform .4s;
}

input[type=checkbox]:checked~.slide-menu {
  transform: translate(0px, 0px);
  background-color: #ffffff;
  padding-bottom: 1600px;
}

input[type=checkbox]:checked~.slide-menu .menu li {
  width: 100%;
}

.slide-menu {
  transform: translate3d(-250px, 0, 0);
  position: absolute;
  width: 210px;
  color: #ddd;
  padding-top: 60px;
  padding-left: 20px;
  height: 100%;
  transition: all .4s;
  border: 1px solid #000;
}

.slide-menu h1 {
  margin: 10px;
  text-shadow: 1px 1px 1px #000;
  color: #628297;
}
</style>
</head>

<body bgcolor="white">
  <div id="container">
    <input id="toggle" type="checkbox"><label for="toggle">&equiv;</label>
    <div class="content">
      &nbsp;<br /><br /><br />
    </div>
    <div class="slide-menu">
      <h1> &nbsp;Search</h1>

      <!-- search form start -->
      <input type="text" />
      <!-- search form end -->

    </div>
  </div>

</body>
</html>

Open in new window

CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Stefan MotzIT Developer

Author

Commented:
Thank you so much, I've tried in different browsers, and it looks different. I really appreciate your help.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.