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">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <div class="menu-close"></div>
  </div>
</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; /* Показываем меню */
}

Javascript:

$(function() {
  $('.menu-open').on('click', function() {
    $('.menu').toggleClass('menu-opened');
  });
  $('.menu-close').on('click', function() {
    $('.menu-open').click();
  });
});
×

Hey! Don't miss a new cool stuff!

Comments

asda (not verified)

Your work here on this blog has been top notch from day 1. karamba You've been continously providing amazing articles for us all to read and I just hope that you keep it going on in the future as well. Cheers!

Anonymous (not verified)

Oh, so this is how a mobile side menu is created. I have to say that this was pretty simple than the method that assignment writing people shared here. I am not sure if that's a good thing or not, because I love the work they do.

Anonymous (not verified)

the clubhouse recreations, and the reward will just draw out a misery, and won'thelp you to win. hopa

Add new comment