Avatar of Stefan Motz
Stefan MotzFlag for United States of America asked on

CSS Toggle

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

CSSHTML

Avatar of undefined
Last Comment
Stefan Motz

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Ryan Chong

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Stefan Motz

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.
ASKER
Stefan Motz

It's beautiful, thank you very much!
Ryan Chong

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

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER
Stefan Motz

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

SOLUTION
Ryan Chong

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Stefan Motz

Thank you so much, I've tried in different browsers, and it looks different. I really appreciate your help.