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

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

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;
}
Простое выпадающее горизонтальное меню на CSS... Пример реализации простого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+).Код html: П...
Простой и приятный шрифт Простой и приятный шрифт. font: 16px/1.5 "PT Sans",Arial,sans-serif; font-size: 14px; color: #837666; /* font-weight: bold; */
Кириллица veranda и roboto шрифт. font-family: Verdana, Geneva, sans-serif; font: normal 13px Roboto,arial,sans-serif;
Google Chrome как текстовый редактор... Да еще с подсветкой кода! Все что нам потребуется так это вставить в адресную строку вот этот код: data:text/html;base64,PHN0eWxlIHR5cGU9InRleHQ...
Читайте также  Пакетное изменение цен в Simpla

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