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

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

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;
}
Многоуровневое выпадающее горизонтальное меню на C... Пример верстки многоуровневого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+). Код html: ...
CSS Styling Radio Button and Checkboxes The idea is simple. We want to change the look and feel of existing radio buttons into more of a push button. The above image pretty much t...
Внутренние тени в CSS Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, ...
3D эффект текста с помощью CSS HTML НажмиНа меня И CSS Стили @import url(http://fonts.googleapis.com/css?family=Montserrat:700); *{transition: all 0.08s ease-in-out;} :...
Читайте также  Многоуровневое выпадающее горизонтальное меню на CSS

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