troubleshooting Question

CSS Toggle

Avatar of Stefan Motz
Stefan MotzFlag for United States of America asked on
CSSHTML
7 Comments2 Solutions67 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 2 Answers and 7 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros