Бургер меню без плагинов.

Бургер меню без плагинов.

HTML

<img class="opener" src="/images/icon-menu.png" />
<ul class="hidden_menu">
<ul class="hidden_menu">
     <li>Главная</li>
</ul>
</ul>
<ul>
     <li>Блог</li>
</ul>
<ul>
     <li>Доставка</li>
</ul>
<ul>
     <li class="selected">Оплата</li>
</ul>
<ul>
     <li>Статьи</li>
</ul>

JS

$(document).on('ready', function(){
var $dropdown = $('.hidden_menu'),
    $drpBtn   = $('.opener');
 
$drpBtn.on('click', function(e){
    e.stopPropagation();
    $('.hidden_menu').fadeToggle(2000);
  });

  $("body").click(function(){
    $('.hidden_menu').fadeOut(20000);
  });
});

CSS

.hidden_menu{
display: none;
  background: #fff;
  position: absolute;
  border-radius: 5px;
  box-shadow: 1px 2px rgba(, , , 0.31);
  padding: 15px;
  width: 200px;
  top: 52px;
  list-style: none;
  line-height: 35px;
  text-align: initial;
  right: 50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}
.hidden_menu li{
border-bottom: 1px solid #EAEAEA;
  margin-bottom: 5px;
}
.hidden_menu a{
  text-decoration: none;
}
.hidden_menu:after, .hidden_menu:before {
     bottom: 100%;
     left: 50%;
     border: solid transparent;
     content: " ";
     height: ;
     width: ;
     position: absolute;
     pointer-events: none;
}
.hidden_menu:after {
     border-color: rgba(255, 255, 255, );
     border-bottom-color: #fff;
     border-width: 10px;
     margin-left: -10px;
}
.hidden_menu:before {
     border-color: rgba(, , , );
     border-bottom-color: #d6d6d6;
     border-width: 11px;
     margin-left: -11px;
}
3D эффект текста с помощью CSS HTML НажмиНа меня И CSS Стили @import url(http://fonts.googleapis.com/css?family=Montserrat:700); *{transition: all 0.08s ease-in-out;} :...
Простой и приятный шрифт Простой и приятный шрифт. font: 16px/1.5 "PT Sans",Arial,sans-serif; font-size: 14px; color: #837666; /* font-weight: bold; */
Выпадающее горизонтальное меню с задержкой на CSS... Пример реализации выпадающего горизонтального меню с задержкой на CSS, без JavaScript. Показанное нами ранее Простое выпадающее горизонтальное ме...
Кириллица veranda и roboto шрифт. font-family: Verdana, Geneva, sans-serif; font: normal 13px Roboto,arial,sans-serif;
Читайте также  Показываем цену товара в другой валюте Simpla

Сохрани, чтобы не потерять