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

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

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;
}
Фон на всю ширину и высоту страницы... body { background: url(...) no-repeat center center fixed; -webkit-background-size: 100%; -moz-background-size: 100%; -o-backgroun...
Простое выпадающее горизонтальное меню на CSS... Пример реализации простого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+).Код html: П...
Кириллица veranda и roboto шрифт. font-family: Verdana, Geneva, sans-serif; font: normal 13px Roboto,arial,sans-serif;
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...
Читайте также  Показываем цену товара в другой валюте Simpla

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