Customise the code so the menu is open by default on the webpage?

HTML & CSS
1

How do we customise the code so the menu is open by default on the webpage:

HTML:

<nav role="navigation">
  <div id="menuToggle">
    <!--
    A fake / hidden checkbox is used as click receiver,
    so you can use the :checked selector on it.
    -->
    <input type="checkbox" />
    
    <!--
    Some spans to act as a hamburger.
    -->
    <span></span>
    <span></span>
    <span></span>
    
    <!--
    Too bad the menu has to be inside of the button
    but hey, it's pure CSS magic.
    -->
    <ul id="menu">
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
      <a href="#"><li>Info</li></a>
      <a href="#"><li>Contact</li></a></a>
    </ul>
  </div>
</nav>

CSS:

/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

body
{
  margin: 0;
  padding: 0;
  
  /* make it look decent enough */
  background: #232323;
  color: #cdcdcd;
  font-family: "Avenir Next", "Avenir", sans-serif;
}

#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}
2

The menu starts at a transform of - 100% to the left in the above code and when clicked it is not transformed at all as shown here:

Swap those rules around for the opposite effect.

Do similar for the hamburger and reverse the normal state rules for the :checked rules.

Or alternatively if you can access the html just add the checked attribute manually by default to the input. No need to change the css in that case.

All you need change is this:

<input type="checkbox">

Add the checked attribute like this:

<input checked type="checkbox">

Note your ul menu structure is invalid as you can’t have anchors outside the list elements. All html in a ul must be inside the li tags.

It should be:


  <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

And then to keep the same look you can change the css to this:

#menu li {
  font-size: 22px;
}
#menu li a{
  padding: 10px 0;
   display:block; 
}

Note that using position: relative to move things is a bad idea and in your case causes a horizontal scrollbar on the viewport which is a very bad for all devices.

This is the code that causes the problem.

#menuToggle {
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

Instead of top and left I would just use a margin or indeed absolutely position that element as the menu is absolutely positioned anyway. (However it is unclear of your use case without seeing the rest of the page because now that the menu is open by default it will cover what else was on the page in that position.)

Lastly when you post code here use the preformatted text button on the top of the editor </> to enclose the code and it will get formatted correctly. I have edited your post to show it correctly :slight_smile:

3

@emailgarvin I just noticed you asked a very similar question 9 months ago and never replied to thread?

Please reply to answers so that we know you are real.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.