—»     —»   Создаем выезжающие скрытые меню при помощи CSS3
  Раздел: Меню и Навигация   Нет комментариев  

Создаем выезжающие скрытые меню при помощи CSS3



Сегодня речь пойдет о разработке выезжающих скользящих меню при помощи CSS3-переходов. Меню поначалу будут скрыты от глаз, и переход будет происходить только после нажатия соответствующей кнопки.

Создаем выезжающие скрытые меню при помощи CSS3

Давайте для начала выясним разницу между двумя типами меню:

* Slide- меню будет выезжать из границы экрана поверх контента страницы, когда кнопка будет нажата.
* Push-меню будет выезжать из границы экрана, и смещать при этом контент страницы.

Перед тем как продолжить, позвольте отметить несколько важных аспектов:

* Это руководство построено на CSS-переходах для более плавной работы. На устаревших браузерах, тем не менее, контент будет «перепрыгивать» на необходимую позицию.
* Мы используем classie.js для быстрого и простого удаления и добавления классов.
* Мы используем javascript-функции querySelector и querySelectorAll, которые поддерживаются в IE8 и выше.

Наконец, давайте взглянем на 8 вариаций меню, разработкой которых мы займемся:

* Меню slide left, которое выезжает из левой части экрана поверх контента
* Меню slide right, которое выезжает из правой части экрана поверх контента
* Меню slide top, которое выезжает из верхней части экрана поверх контента
* Меню slide bottom, которое выезжает из нижней части экрана поверх контента
* Меню push left, которое выезжает из левой части экрана и смещает контент вправо
* Меню push right, которое выезжает из правой части экрана и смещает контент влево
* Меню push top, которое выезжает из верхней части экрана и смещает контент вниз
* Меню push bottom, которое выезжает из нижней части экрана и смещает контент вверх

Когда меню будет открыто, мы отобразим «маску» поверх основной оболочки. Это будет полупрозрачное наложение, которое скрывает основной контент. Когда пользователь кликает по этому наложение, меню снова скрывается из виду. В каждом меню также будет представлена кнопка закрытия, которая будет удобна в том случае, если на устройствах с маленькими устройствами меню занимает весь экран. Давайте прежде всего взглянем на основную разметку и CSS-код.

HTML-код

<body>

<nav class="menu slide-menu-left">
<ul>
<li><button class="close-menu">&larr; Close</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /slide menu left -->

<nav class="menu slide-menu-right">
<ul>
<li><button class="close-menu">Close &rarr;</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /slide menu right -->

<nav class="menu slide-menu-top">
<ul>
<li><button class="close-menu">&uarr; Close</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /slide menu top -->

<nav class="menu slide-menu-bottom">
<ul>
<li><button class="close-menu">Close &darr;</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /slide menu bottom -->

<nav class="menu push-menu-left">
<ul>
<li><button class="close-menu">&larr; Close</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /push menu left -->

<nav class="menu push-menu-right">
<ul>
<li><button class="close-menu">Close &rarr;</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /push menu right -->

<nav class="menu push-menu-top">
<ul>
<li><button class="close-menu">&uarr; Close</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /push menu top -->

<nav class="menu push-menu-bottom">
<ul>
<li><button class="close-menu">Close &darr;</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /push menu bottom -->

<div id="wrapper">
<div id="main">
<div class="container">
<div class="buttons">
<button class="nav-toggler toggle-slide-left">Slide Menu Left</button>
...
</div><!-- /buttons -->
<section class="content">
<h1>Vegetables</h1>
<p>Turnip greens yarrow...</p>
</section><!-- /.content -->
</div>
</div><!-- #main -->

</div><!-- /#wrapper -->

</body>

Общий CSS-код

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Template
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
body {
overflow-x: hidden
}
#wrapper {
position: relative;
z-index: 10;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
section {
margin-bottom: 30px
}
section h1 {
font-family: "Oswald", sans-serif;
margin-bottom: 10px;
}
section p {
margin-bottom: 30px
}
section p:last-child {
margin-bottom: 0
}
section:last-child {
margin-bottom: 0
}
section.toggle {
text-align: center
}
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 15;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Menus
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
/* general style for all menus */
nav.menu {
position: fixed;
z-index: 20;
background-color: #67b5d1;
overflow: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav.menu a {
font-weight: 300;
color: #fff;
}
button.close-menu {
background-color: #3184a1;
color: #fff;
}
button.close-menu:focus {
outline: none
}

Понимание структуры

У нас параметр body overflow-x выставлен на hidden, так как нам не нужны скроллинги, когда оболочка будет смещена влево или вправо. Когда она смещается вертикально, это не имеет особого значения. Здесь более важно расположить наши навигационные меню ЗА ПРЕДЕЛАМИ оболочки, так как очевидно то, что когда к элементу будет применяться трансформация, он будет временно находиться на относительном позиционировании. Так как наше навигационное меню должно быть фиксировано по отношению ко внешним частям окна браузера, нам оно не нужно внутри элемента с относительным позиционированием. Внутри каждого меню имеется список пунктов меню и кнопка закрывания.

Разработчики так и не пришли к консенсусу относительно работы absolute positioning/left/top против transforms/translating. Paul Irish более подробно углубляется в эту тему, и прочесть об этом вы можете здесь. Мы в данном случае используем позиционирование, так как предоставляем также запасной вариант для устаревших браузеров без переходов, без использования условных таблиц стилей. Также, после того, как мы протестировали оба варианта, различия оказались практически незаметными человеческому глазу. Давайте сейчас взглянем на версию нашего меню.

Slide Menu Left

Создаем выезжающие скрытые меню при помощи CSS3

Это меню выезжает с левой стороны поверх контента. И вот CSS-код для него:

nav.slide-menu-left {
top: 0;
width: 300px;
height: 100%;
}
nav.slide-menu-left li {
display: block;
text-align: center;
border-bottom: solid 1px #3184a1;
border-top: solid 1px #b5dbe9;
}
nav.slide-menu-left li:first-child {
border-top: none
}
nav.slide-menu-left li:last-child {
border-bottom: none
}
nav.slide-menu-left a {
display: block;
padding: 10px;
font-size: 18px;
}
nav.slide-menu-left button.close-menu {
margin: 10px 0;
padding: 10px 30px;
background-color: #3184a1;
color: #fff;
}
nav.slide-menu-left {
left: -300px
}
body.sml-open nav.slide-menu-left {
left: 0
}

Slide Menu Right

Создаем выезжающие скрытые меню при помощи CSS3

Это меню выезжает с правой стороны поверх контента. И вот CSS-код для него:

nav.slide-menu-right {
top: 0;
width: 300px;
height: 100%;
}
nav.slide-menu-right li {
display: block;
text-align: center;
border-bottom: solid 1px #3184a1;
border-top: solid 1px #b5dbe9;
}
nav.slide-menu-right li:first-child {
border-top: none
}
nav.slide-menu-right li:last-child {
border-bottom: none
}
nav.slide-menu-right a {
display: block;
padding: 10px;
font-size: 18px;
}
nav.slide-menu-right button.close-menu {
margin: 10px 0;
padding: 10px 30px;
background-color: #3184a1;
color: #fff;
}
nav.slide-menu-right {
right: -300px
}
body.smr-open nav.slide-menu-right {
right: 0
}

Slide Menu Top

Создаем выезжающие скрытые меню при помощи CSS3

Это меню выезжает с верхней стороны поверх контента. И вот CSS-код для него:

nav.slide-menu-top {
left: 0;
width: 100%;
height: 100px;
}
nav.slide-menu-top ul {
text-align: center;
padding: 25px 0 0 0;
}
nav.slide-menu-top li {
display: inline-block;
margin: 0;
vertical-align: middle;
}
nav.slide-menu-top a {
display: block;
line-height: 50px;
padding: 0 10px;
font-size: 18px;
}
nav.slide-menu-top button.close-menu {
display: block;
line-height: 50px;
margin: 0;
padding: 0 10px;
}
nav.slide-menu-top {
top: -100px
}
body.smt-open nav.slide-menu-top {
top: 0
}

Slide Menu Bottom

Создаем выезжающие скрытые меню при помощи CSS3

Это меню выезжает с нижней стороны поверх контента. И вот CSS-код для него:

nav.slide-menu-bottom {
left: 0;
width: 100%;
height: 100px;
}
nav.slide-menu-bottom ul {
text-align: center;
padding: 25px 0 0 0;
}
nav.slide-menu-bottom li{
display: inline-block;
margin: 0;
vertical-align: middle;
}
nav.slide-menu-bottom a{
display: block;
line-height: 50px;
padding: 0 10px;
font-size: 18px;
}
nav.slide-menu-bottom button.close-menu{
display: block;
line-height: 50px;
margin: 0;
padding: 0 10px;
}
nav.slide-menu-bottom {
bottom: -100px
}
body.smb-open nav.slide-menu-bottom {
bottom: 0
}

Push Menu Left

Создаем выезжающие скрытые меню при помощи CSS3

Это меню выезжает с левой стороны, и смещает контент вправо. Большая часть кода походит на код для меню, выезжающего слева, за исключением того факта, что здесь также перемещается и оболочка. Давайте рассмотрим CSS-код:

nav.push-menu-left {
top: 0;
width: 300px;
height: 100%;
}
nav.push-menu-left li {
display: block;
text-align: center;
border-bottom: solid 1px #3184a1;
border-top: solid 1px #b5dbe9;
}
nav.push-menu-left li:first-child {
border-top: none
}
nav.push-menu-left li:last-child {
border-bottom: none
}
nav.push-menu-left a {
display: block;
padding: 10px;
font-size: 18px;
}
nav.push-menu-left button.close-menu {
margin: 10px 0;
padding: 10px 30px;
background-color: #3184a1;
color: #fff;
}
nav.push-menu-left {
left: -300px
}
body.pml-open nav.push-menu-left {
left: 0
}
body.pml-open #wrapper {
left: 300px
}

Push Menu Right

Создаем выезжающие скрытые меню при помощи CSS3

Это меню выезжает с правой стороны, и смещает контент влево. Большая часть кода походит на код для меню, выезжающего справа, за исключением того факта, что здесь также перемещается и оболочка. Давайте рассмотрим CSS-код:

nav.push-menu-right {
top: 0;
width: 300px;
height: 100%;
}
nav.push-menu-right li {
display: block;
text-align: center;
border-bottom: solid 1px #3184a1;
border-top: solid 1px #b5dbe9;
}
nav.push-menu-right li:first-child {
border-top: none
}
nav.push-menu-right li:last-child {
border-bottom: none
}
nav.push-menu-right a {
display: block;
padding: 10px;
font-size: 18px;
}
nav.push-menu-right button.close-menu {
margin: 10px 0;
padding: 10px 30px;
background-color: #3184a1;
color: #fff;
}
nav.push-menu-right {
right: -300px
}
body.pmr-open nav.push-menu-right {
right: 0
}
body.pmr-open #wrapper {
left: -300px
}

Push Menu Top

Создаем выезжающие скрытые меню при помощи CSS3

Это меню выезжает с верхней стороны, и смещает контент вниз. Большая часть кода походит на код для меню, выезжающего сверху, за исключением того факта, что здесь также перемещается и оболочка. Давайте рассмотрим CSS-код:

nav.push-menu-top {
left: 0;
width: 100%;
height: 100px;
}
nav.push-menu-top ul {
text-align: center;
padding: 25px 0 0 0;
}
nav.push-menu-top li {
display: inline-block;
margin: 0;
vertical-align: middle;
}
nav.push-menu-top a {
display: block;
line-height: 50px;
padding: 0 10px;
font-size: 18px;
}
nav.push-menu-top button.close-menu {
display: block;
line-height: 50px;
margin: 0;
padding: 0 10px;
}
nav.push-menu-top {
top: -100px
}
body.pmt-open nav.push-menu-top {
top: 0
}
body.pmt-open #wrapper {
top: 100px
}

Push Menu Bottom

Создаем выезжающие скрытые меню при помощи CSS3

Это меню выезжает с нижней стороны, и смещает контент вверх. Большая часть кода походит на код для меню, выезжающего с нижней части, за исключением того факта, что здесь также перемещается и оболочка. Давайте рассмотрим CSS-код:

nav.push-menu-bottom {
left: 0;
width: 100%;
height: 100px;
}
nav.push-menu-bottom ul {
text-align: center;
padding: 25px 0 0 0;
}
nav.push-menu-bottom li {
display: inline-block;
margin: 0;
vertical-align: middle;
}
nav.push-menu-bottom a {
display: block;
line-height: 50px;
padding: 0 10px;
font-size: 18px;
}
nav.push-menu-bottom button.close-menu {
display: block;
line-height: 50px;
margin: 0;
padding: 0 10px;
}
nav.push-menu-bottom {
bottom: -100px
}
body.pmb-open nav.push-menu-bottom {
bottom: 0
}
body.pmb-open #wrapper {
top: -100px
}

javascript-код

Теперь давайте взглянем на javascript-код, который переключает наши классы при нажатии на различные кнопки меню. С его помощью мы также отображаем нашу маску поверх остального контента, и реализуем функционал кнопки закрытия, когда пользователь кликает по маске или кнопке. Помните, что мы используем classie.js для того, чтобы добавлять или исключать классы. Наш javascript-код, конечно же, охватывает все 8 меню. Возможно, вам захочется минимизировать ваш javascript-код, и удалить из него ненужные фрагменты. Давайте взглянем на javascript-код:

(function( window ){

'use strict';

var body = document.body,
mask = document.createElement("div"),
toggleSlideLeft = document.querySelector( ".toggle-slide-left" ),
toggleSlideRight = document.querySelector( ".toggle-slide-right" ),
toggleSlideTop = document.querySelector( ".toggle-slide-top" ),
toggleSlideBottom = document.querySelector( ".toggle-slide-bottom" ),
togglePushLeft = document.querySelector( ".toggle-push-left" ),
togglePushRight = document.querySelector( ".toggle-push-right" ),
togglePushTop = document.querySelector( ".toggle-push-top" ),
togglePushBottom = document.querySelector( ".toggle-push-bottom" ),
slideMenuLeft = document.querySelector( ".slide-menu-left" ),
slideMenuRight = document.querySelector( ".slide-menu-right" ),
slideMenuTop = document.querySelector( ".slide-menu-top" ),
slideMenuBottom = document.querySelector( ".slide-menu-bottom" ),
pushMenuLeft = document.querySelector( ".push-menu-left" ),
pushMenuRight = document.querySelector( ".push-menu-right" ),
pushMenuTop = document.querySelector( ".push-menu-top" ),
pushMenuBottom = document.querySelector( ".push-menu-bottom" ),
activeNav
;
mask.className = "mask";

/* slide menu left */
toggleSlideLeft.addEventListener( "click", function(){
classie.add( body, "sml-open" );
document.body.appendChild(mask);
activeNav = "sml-open";
} );

/* slide menu right */
toggleSlideRight.addEventListener( "click", function(){
classie.add( body, "smr-open" );
document.body.appendChild(mask);
activeNav = "smr-open";
} );

/* slide menu top */
toggleSlideTop.addEventListener( "click", function(){
classie.add( body, "smt-open" );
document.body.appendChild(mask);
activeNav = "smt-open";
} );

/* slide menu bottom */
toggleSlideBottom.addEventListener( "click", function(){
classie.add( body, "smb-open" );
document.body.appendChild(mask);
activeNav = "smb-open";
} );

/* push menu left */
togglePushLeft.addEventListener( "click", function(){
classie.add( body, "pml-open" );
document.body.appendChild(mask);
activeNav = "pml-open";
} );

/* push menu right */
togglePushRight.addEventListener( "click", function(){
classie.add( body, "pmr-open" );
document.body.appendChild(mask);
activeNav = "pmr-open";
} );

/* push menu top */
togglePushTop.addEventListener( "click", function(){
classie.add( body, "pmt-open" );
document.body.appendChild(mask);
activeNav = "pmt-open";
} );

/* push menu bottom */
togglePushBottom.addEventListener( "click", function(){
classie.add( body, "pmb-open" );
document.body.appendChild(mask);
activeNav = "pmb-open";
} );

/* hide active menu if mask is clicked */
mask.addEventListener( "click", function(){
classie.remove( body, activeNav );
activeNav = "";
document.body.removeChild(mask);
} );

/* hide active menu if close menu button is clicked */
[].slice.call(document.querySelectorAll(".close-menu")).forEach(function(el,i){
el.addEventListener( "click", function(){
classie.remove( body, activeNav );
activeNav = "";
document.body.removeChild(mask);
} );
});

})( window );

Подытожим

И на этом все! Теперь наши великолепные эффекты для меню готовы к применению в ваших проектах! Мы также внедрили сюда media queries, так что вы можете без сомнений скачивать эти коды или ознакомиться с функционалом в представленном демо.

Получить исходный код | Посмотреть демо
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 12428   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728