Pure CSS Sliding Menu

May 6, 2017 - 4 minute read -
code tutorial css

Introduction

Lets see what we need to do here. So, basically we want menu to open and close without using any JavaScript or JavaScript libraries, we will only use CSS.

Implementation

  • We will use <input type="checkbox" /> for opening/closing menu.
  • So, when checkbox is checked we will open the menu and as soon as checkbox is unchecked we will close it.

Template design

Okay, lets code our html template for the same.

  • Lets have header tag which will hold our menu.
  • Inside header we will have menu-container and importantly our <input type="checkbox" id="navigation" />
  • Then we will have label which will work as replacement for checkbox as we will hide checkbox and only label will be seen on page.
  • Actually label will work as hamburger-menu and behind the scene we will be checking/un-checking checkbox as label clicked.
  • We need nav tag for navigation menu item.
  • thats it for now :) and our template will something like below
<header>
  <div class="sliding--menu__wrapper">
    <input type="checkbox" id="navigation"/>   
		<label id="hamburger--icon" for="navigation">
			<span class="icon-menu"></span>
		</label>  
		<nav>
			<ul>      
				<li>
					<a href="#">Home</a>
					<a href="#">About us</a>
					<a href="#">Contact us</a>
				</li>
			</ul>
		</nav>
  </div>
</header>

UI/CSS design

  • Okay now we have template ready lets see how our styles will look like.
  • First for our menu icon to look like menu we will use iconmoon font.
  • Then our navigation item should look like list.
  • At last on checking/un-checking we open/hide menu. For that we will use ~(sibling selector) property of css.
  • And style for that will look something like below
  /* Hamburger icon and using iconmoon font */
  @font-face {
    font-family: 'icomoon';
    src: url("../fonts/icomoon.eot?o7okb4");
    src: url(".//fonts/icomoon.eot?o7okb4#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?o7okb4") format("truetype"), url("../fonts/icomoon.woff?o7okb4") format("woff"), url("../fonts/icomoon.svg?o7okb4#icomoon") format("svg");
    font-weight: normal;
    font-style: normal; 
  }

  [class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon-menu {
    color: #000;
  }
  .icon-menu:before {
    content: "\e900";
  }

  /* navigation list item vertically 
   * and ease-in transition as soon as checkbox checked
   * initially we will hide it from screen using -250px left margin
   */
  .sliding--menu__wrapper nav {
    -moz-transition: all 200ms ease-in;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    margin: 0 0 0 -250px; 
  }
  .sliding--menu__wrapper nav ul {
    list-style: none;
  }
  .sliding--menu__wrapper nav a {
    display: block;
  }

  /* menu show/hide 
   * sibling selector will select nav tag 
   * and update its margin from -250px left to 0px left
   * that will bring nav to back in page
   * and after clicking section time checkbox will unchecked and nav will
   * back to prev state which is -250px to left and wont be visible to screen
   */
  .sliding--menu__wrapper input[type="checkbox"] {
    display: none; 
  }
  .sliding--menu__wrapper input[type="checkbox"]:checked ~ nav {
    margin-left: 0; 
  }

Result

See the Pen RVjLVG by pradeep singh (@pradeep1991singh) on CodePen.

Working demo

See the Pen Pure CSS slide menu by pradeep singh (@pradeep1991singh) on CodePen.

Source code

Pure CSS Only Slide Menu