Togglable And Expandable Side Menu With Pure CSS

no-js-menu is a pure CSS side menu where you can expand submenu items on mouseover. Expandable, interchangeable navigation menu with a single-string hamburger JavaScript.

Responsive Animated 3D Hamburger Menu with CSS/CSS3

How to make use of it:

1. Create a hidden checkbox to control the position of the menu.

<input type="checkbox" id="menu-button">

2. Create a label associated with the hidden checkbox.

<label for="menu-button" class="menu-button--label">&#9636;</label>

3. Create a side menu with the following html structure.

<div class="menu-wrap">
  <div class="side-menu">
    <ul class="side-menu--list">
    
        <li>
            <a class="subset">Company</a>
            <a href="">Mission</a>
            <a href="">People</a>
            <a href="">Social Responsibility</a>
        </li>
        <li>
            <a class="subset" href="">Products</a>
            <a href="">Solar panels</a>
            <a href="">Electronics</a>
            <a href="">Utilizers</a>
        </li>
        <li>
            <a class="subset" href="">Contacts</a>
            <a href="">Staff</a>
            <a href="">Contact</a>
            <a href="">Media</a>
        </li>

    </ul>

  </div>
</div>

4. CSS/CSS3 Basic Rules for Expanded Side Menu.

/*We are fixing a menu and pulling them out of the screen by negative 'left'*/


.side-menu {
  padding: 0;
  margin: 0;
  font-size: 0;
  position: fixed;
  left: -120px;
  top: 100px;
  opacity: .95;
  overflow: hidden;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

/*We need to hide the default input box*/


#menu-button { display: none; }

/*if checkbox is checked next sibling's .side menu child slides in*/


#menu-button:checked + .menu-wrap .side-menu { left: 0px; }

/*this is the label for the checkbox which act as a button for our menu*/


.menu-button--label {
  color: black;
  position: fixed;
  top: 50px;
  left: 10px;
  font-size: 3rem;
  text-align: center;
  line-height: 0;
  cursor: pointer;
  -webkit-transition: all 1s;
  transition: all 1s;
}

/*Fancy rotation effect for our menu button. It rotates back when mouse leaves it */


.menu-button--label:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transition: all 1s;
  transition: all 1s;
}

/*We are giving the li item a shorter width to activate 'pop-out' effect when you hover*/


.side-menu--list li {
  font-size: 0;
  width: 110px;
}

.side-menu--list a {
  color: #fff;
  display: block;
  text-decoration: none;
  height: 2rem;
  line-height: 2rem;
  background: #333;
  padding-left: 1rem;
  width: 180px;
  font-size: 1.2rem;
}

.side-menu--list {
  list-style: none;
  padding-left: 0;
}

/*.subset is a sub-menu that we are styling to stand out a bit*/


.side-menu--list li a.subset {
  font-size: 1.4rem;
  height: 2.2rem;
  line-height: 2.2rem;
 padding-left: .5rem;
  background: #222;
}

/*Applying overflow:hidden to get rid of the cluttering when the height is minimized*/


.side-menu--list li {
  height: 2.2rem;
  overflow: hidden;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

/*when you hover a li it expands to show all the menu links(and expands itself only)*/


.side-menu--list li:hover {
  height: 8.2rem;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  cursor: pointer;
  width: 180px;
}

/*We are skipping a sub-menu link and applying transformation to the follow-ups*/


.side-menu--list li a:not(:first-child):hover {
  cursor: pointer;
  background-color: #fff;
  color: #333;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}