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

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

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;
}
Google Chrome как текстовый редактор... Да еще с подсветкой кода! Все что нам потребуется так это вставить в адресную строку вот этот код: data:text/html;base64,PHN0eWxlIHR5cGU9InRleHQ...
Многоуровневое выпадающее горизонтальное меню на C... Пример верстки многоуровневого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+). Код html: ...
Фон на всю ширину и высоту страницы... body { background: url(...) no-repeat center center fixed; -webkit-background-size: 100%; -moz-background-size: 100%; -o-backgroun...
Верстка сетки из ромбов с изображениями... Стала перед нами задача верстки страницы для сайта, где сетка на которой изображения представляются в виде ромбов с ссылками. Пример как сверст...
Читайте также  Равномерное выравнивание блоков по ширине.

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