How to create mobile slide menu - the simple example

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();
  });
});

Tags:

javascript

css

Hey! Don't miss a new cool stuff!

Comments

04/19/2020 - 22:18

enetibliole (not verified)

free slots best online casino casino slots casino online slots http://casinorealmoneysoe.com/ - casino game

01/23/2022 - 13:05

JaimeTes (not verified)

Заказать бады чтобы мужчин чтобы повышения либидо и потенции, китайская медицина.
Женские возбудители и афродизиаки. Однако дозволительно Заказать тогда :
fito-shop.in.ua

03/04/2022 - 20:14

VictorPutle (not verified)

Full List Of Meta Tags, Why They Matter For Search Engine Optimization & Tips On How To Write Them

03/05/2022 - 14:59

VictorPutle (not verified)

Html Meta Tag

04/24/2020 - 02:21

enetibliole (not verified)

online casino bonus casino games casino real money

04/24/2020 - 02:28

enetibliole (not verified)

online casino bonus casino games casino real money

04/24/2020 - 02:31

enetibliole (not verified)

online casino bonus casino games casino real money

04/24/2020 - 08:36

enetibliole (not verified)

big fish casino casino games cashman casino slots casino real money

04/24/2020 - 08:44

enetibliole (not verified)

big fish casino casino games cashman casino slots casino real money

04/24/2020 - 08:46

enetibliole (not verified)

big fish casino casino games cashman casino slots casino real money

04/24/2020 - 15:17

enetibliole (not verified)

world class casino slots free online slots free casino real casino slots http://onlinecasinogamespcx.com/ - play online casino

04/24/2020 - 22:39

enetibliole (not verified)

free online slots best online casino casino blackjack

04/24/2020 - 22:42

enetibliole (not verified)

free online slots best online casino casino blackjack

04/24/2020 - 23:38

inticleni (not verified)

online casino casino play play online casino free slots

04/25/2020 - 05:10

enetibliole (not verified)

play slots online play slots online online casino gambling free casino games

04/25/2020 - 05:13

enetibliole (not verified)

play slots online play slots online online casino gambling free casino games

04/25/2020 - 05:52

inticleni (not verified)

http://onlinecasinosw.com/ play casino http://onlinecasinosw.com/ - gold fish casino slots casino game

04/25/2020 - 12:36

enetibliole (not verified)

http://onlinecasinogamespcx.com/ online casino free slots games vegas slots online real casino slots

04/25/2020 - 13:21

inticleni (not verified)

free slots games free casino casino online free casino games

04/25/2020 - 19:13

Bwyvzo t (not verified)

Pscfeo ntyvxc online viagra purchase

04/25/2020 - 19:26

enetibliole (not verified)

free casino games online slots online free slots games no deposit casino http://onlinecasinogamespcx.com/ - casino play

04/25/2020 - 19:29

enetibliole (not verified)

free casino games online slots online free slots games no deposit casino http://onlinecasinogamespcx.com/ - casino play

04/25/2020 - 19:45

inticleni (not verified)

play online casino http://onlinecasinosw.com/ - casino slots casino bonus codes slots for real money casino slots

04/26/2020 - 01:53

enetibliole (not verified)

best online casino online slots online casino real casino slots http://onlinecasinogamespcx.com/ - real casino slots

04/26/2020 - 02:08

inticleni (not verified)

http://onlinecasinosw.com/ real money casino http://onlinecasinosw.com/ - slot games big fish casino

04/26/2020 - 02:12

enetibliole (not verified)

best online casino online slots online casino real casino slots http://onlinecasinogamespcx.com/ - real casino slots

04/26/2020 - 08:53

inticleni (not verified)

best online casinos casino online slots casino games play casino

04/26/2020 - 08:56

enetibliole (not verified)

free casino slot games http://onlinecasinogamespcx.com/ - free casino games online online casino bonus casino play

04/26/2020 - 09:00

enetibliole (not verified)

free casino slot games http://onlinecasinogamespcx.com/ - free casino games online online casino bonus casino play

04/26/2020 - 09:03

enetibliole (not verified)

free casino slot games http://onlinecasinogamespcx.com/ - free casino games online online casino bonus casino play

04/26/2020 - 15:59

inticleni (not verified)

world class casino slots free casino slot games play slots online free slots

04/26/2020 - 16:12

enetibliole (not verified)

free casino slot games http://onlinecasinogamespcx.com/ - free casino games online casino games world class casino slots

04/26/2020 - 22:55

inticleni (not verified)

http://onlinecasinosw.com/ free slots games free casino games online online casino play slots online

04/26/2020 - 23:26

enetibliole (not verified)

online casino slots http://onlinecasinogamespcx.com/ - best online casinos online gambling vegas slots online

04/27/2020 - 07:11

inticleni (not verified)

http://onlinecasinosw.com/ best online casino casino bonus codes real casino slots vegas casino slots

04/27/2020 - 07:13

inticleni (not verified)

http://onlinecasinosw.com/ best online casino casino bonus codes real casino slots vegas casino slots

04/27/2020 - 07:47

enetibliole (not verified)

free slots casino slots no deposit casino

04/27/2020 - 07:49

enetibliole (not verified)

free slots casino slots no deposit casino

04/27/2020 - 07:52

enetibliole (not verified)

free slots casino slots no deposit casino

04/27/2020 - 13:30

inticleni (not verified)

slots games free slots games free real casino slots slots for real money http://onlinecasinosw.com/ - slots online

04/27/2020 - 13:36

inticleni (not verified)

slots games free slots games free real casino slots slots for real money http://onlinecasinosw.com/ - slots online

04/27/2020 - 13:38

inticleni (not verified)

slots games free slots games free real casino slots slots for real money http://onlinecasinosw.com/ - slots online

04/27/2020 - 14:11

enetibliole (not verified)

online casino real money free casino games online online gambling

04/27/2020 - 14:12

enetibliole (not verified)

online casino real money free casino games online online gambling

04/27/2020 - 19:49

inticleni (not verified)

http://onlinecasinosw.com/ online casino bonus http://onlinecasinosw.com/ - online casino slots big fish casino

04/27/2020 - 23:19

enetibliole (not verified)

online casino slots http://onlinecasinopc.com/ - casino blackjack casino play casino game

04/28/2020 - 02:17

inticleni (not verified)

play online casino online slots play online casino

04/28/2020 - 05:44

enetibliole (not verified)

slots games free http://onlinecasinopc.com/ free casino slot games free slots casino bonus codes

04/28/2020 - 05:50

enetibliole (not verified)

slots games free http://onlinecasinopc.com/ free casino slot games free slots casino bonus codes

04/28/2020 - 05:50

enetibliole (not verified)

slots games free http://onlinecasinopc.com/ free casino slot games free slots casino bonus codes

1
2
3
4
5
6
7
8
9
…
next
last