How to create mobile slide menu - the simple example

Posted by admin on Tue, 10/31/2017 - 04:58

Here is your HTML:

<div class="menu">
  <div class="menu-open"></div>
  <div class="menu-content">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    <div class="menu-close"></div>

Here is the CSS:

.menu-content {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 200px;
  height: 100%;
  transform: translateX(-100%); /* Скрываем меню */
  overflow-y: auto;
  transition: 0.2s;
.menu-opened .menu-content {
  transform: none; /* Показываем меню */


$(function() {
  $('.menu-open').on('click', function() {
  $('.menu-close').on('click', function() {

Hey! Don't miss a new cool stuff!


StevVise (not verified)

Viagra Kaufen In Munchen - Buy Cialis 50 Mg Di Sildenafil cheap cialis Cialis Original Gunstig

Add new comment