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

asd (not verified)

I truly value this superb post that you have accommodated us. I guarantee this would be helpful for a large portion of the general population. iq option

emily seo (not verified)

On the off chance that they like what they encountered, anticipate that them will return and ideally with organization whenever around. storspelare

emily (not verified)

Separated of the prominence "live" roulette has a few points of interest over a PC one. casinos

emily (not verified)

In any case, a demonstrated football wagering strategy will surely help in your mission in help of profiting from lay wagering. 1xbet

aftab ali (not verified)

In any case, recollect, groups that are favored to win don't pay higher than going for the underdog. nightrush

aftab ali (not verified)

that has been doing business for a long time obviously, however you can discover an organization that has been doing business that long and now offers web based exchanging. Jetbull

Add new comment