Анимированное выдвигающееся меню
Время чтения: 3 мин.
Около месяца назад был урок о том как создать выдвигающееся меню, но меню, которое мы создадим в этом уроке будет отличаться от прошлого. Данное меню скорее появляется, чем выдвигается, но всё же. Эффект красивый: затемняется основная часть сайта и активной становится меню. В демо присутствует 5 вариантов этого меню, так что можете выбрать то, которое вам больше всего понравилось.
Прошлый урок о том как создать выдвигающееся меню на CSS3 — Создание выдвигающегося меню
Пример можно увидеть здесь:
Посмотреть примерСкачать
Мы рассмотрим более подробно как создать меню из Демо 2, когда меню появляется слева вверху.
HTML часть
Меню состоит из элемента <nav>, в котором будут находиться все элементы списка и элемент отвечающий за появление меню:
1 2 3 4 5 6 7 8 9 10 | <nav>
<a href="#"><span>Меню</span></a>
<ul>
<li><a href="#">Увеличить</a></li>
<li><a href="#">Обновить</a></li>
<li><a href="#">Заблокировать</a></li>
<li><a href="#">Звук</a></li>
<li><a href="#">Избранное</a></li>
</ul>
</nav> |
CSS часть
Осталось всему этому придать красивый вид.
1 2 3 4 5 | *,
*:after,
*::before {
box-sizing: border-box;
} |
Мы используем данное свойство для того, чтобы вычитать из ширины и высоты блока значения padding и border. Затем зададим стиль цвет фона и внутренний отступ для блока с классом
1 2 3 4 5 6 7 | body {
background: #04a466;
}
.container {
padding: 80px;
} |
Свойство padding необходимо для того, чтобы при появлении меню, было достаточно места для отображения основного содержимого сайта. Меню у нас зафиксировано, поэтому не имеет значения где оно находится на странице. Также мы задаем задержку по времени при появлении и закрытии.
1 2 3 4 5 6 7 8 9 10 11 12 | .bt-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
border-width: 0px;
border-style: solid;
border-color: #333;
background-color: rgba(0,0,0,0);
transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
} |
При появлении меню задаем ему прозрачный фон, устанавливая альфа-канал в 0.3.
1 2 3 4 5 6 | .bt-menu.bt-menu-open {
height: 100%;
border-width: 30px 30px 30px 90px;
background-color: rgba(0,0,0,0.3);
transition: border-width 0.3s, background-color 0.3s;
} |
Пропишем свойства включателю нашего меню:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .bt-menu-trigger {
position: fixed;
top: 15px;
left: 20px;
display: block;
width: 50px;
height: 50px;
cursor: pointer;
}
.bt-menu-trigger span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 4px;
margin-top: -2px;
background-color: #fff;
font-size: 0px;
user-select: none;
transition: background-color 0.3s;
} |
Когда меню появляется то три полоски переключателя превращаются в крестик, которые позволяет закрыть меню:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .bt-menu-open .bt-menu-trigger span {
background-color: transparent;
}
.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: #fff;
content: '';
transition: transform 0.3s;
}
.bt-menu-trigger span:before {
transform: translateY(-250%);
}
.bt-menu-trigger span:after {
transform: translateY(250%);
}
.bt-menu-open .bt-menu-trigger span:before {
transform: translateY(0) rotate(45deg);
}
.bt-menu-open .bt-menu-trigger span:after {
transform: translateY(0) rotate(-45deg);
} |
Элементы меню находятся в неупорядоченном списке, который также имеет фиксированное положение и находится слева вверху:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | .bt-menu ul {
position: fixed;
top: 75px;
left: 0;
margin: 0;
padding: 0;
width: 90px;
list-style: none;
backface-visibility: hidden;
}
.bt-menu ul li,
.bt-menu ul li a {
display: block;
width: 100%;
text-align: center;
}
.bt-menu ul li {
padding: 16px 0;
opacity: 0;
visibility: hidden;
transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
}
.bt-menu ul li:first-child {
transform: translate3d(-100%,200%,0);
}
.bt-menu ul li:nth-child(2) {
transform: translate3d(-100%,100%,0);
}
.bt-menu ul li:nth-child(3) {
transform: translate3d(-100%,0,0);
}
.bt-menu ul li:nth-child(4) {
transform: translate3d(-100%,-100%,0);
}
.bt-menu ul li:nth-child(5) {
transform: translate3d(-100%,-200%,0);
} |
Когда меню появилось все элементы становятся видны, но изначально они должны быть скрыты, что мы и сделали в самом начале урока(прописав в классе bt-menu скрыть всё меню):
1 2 3 4 5 6 | .bt-menu .bt-menu-open ul li {
visibility: visible;
opacity: 1;
transition: transform 0.3s, opacity 0.3s;
transform: translate3d(0,0,0);
} |
Вывод
Красивые варианты меню, которые вы можете использовать. Данное меню освобождает место на странице, т.к. может быть вызвано только при необходимости.
Успехов!
Источник: tympanus.net
sitehere.ru
Фиксированное боковое меню на чистом CSS
В этом посте мы сделаем фиксированное боковое информационное меню. Для реализации иконок подключим шрифт FontAwesome.
Шаг 1. Подключаем шрифт с иконками, создаем пустой документ
Подробную инфу о работе со шрифтом FontAwesome и ссылку на сам проект вы можете найти в моем посте – вот ссылка.
Вот код странички с подключенными файлами:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Фиксированное боковое меню</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> </head> <body> </body> </html>
Шаг 2. Добавляем HTML разметку фиксированного меню
Вот и сам код разметки нашего фиксированного меню:
<nav>
<ul>
<li>
<i></i>
</li>
<li>
<i></i>
</li>
<li>
<i></i>
</li>
</ul>
</nav>
Как вы заметили я применил тег <nav> – это элемент разметки html5, если вы используете html4, то можете заменить этот тег на обычный <div> или вовсе его убрать, а идентификатор перенести к списку, вот так:
<ul>
...
</nav>
Шаг 3. Добавляем HTML разметку подменю
<b></b> <ul> <li><a href="">Текст вашей ссылки</a></li> <li><a href="">Текст вашей ссылки</a></li> <li><a href="">Текст вашей ссылки</a></li> </ul>
Подменю как представляет собой такой же список как и основное меню, плюс тег <b class=”fa fa-caret-left”></b>, который выводит иконку “каретки слева”, выполняет функцию некого “хвостика”, более подробнее на картинке ниже 🙂
Фиксированное боковое менюТакже этот элемент соединяет пустоту между блоком меню и подменю, тем самым позволяя нам осуществить возможность перехода.
Шаг 4. Прописываем стили для фиксированного бокового меню
Код стилей я постарался прокомментировать в местах где это имеет значение. В целом все не прокомментированные моменты относятся к банальной стилизации фона, цвета и т.д.
#sidebar-menu {
position: fixed; /* фиксируем наше меню */
top: 200px; /* положение меню относительно верхнего края браузера */
left: 0; /* прилипили меню к левому краю */
padding: 10px;
background: #323A45;
color: #FFF;
border-radius: 0 8px 8px 0;
}
#sidebar-menu li {
position: relative;
cursor: pointer;
}
#sidebar-menu li i {
/* Задаем иконкам фиксированный размер, height и line-height должны быть одинаковыми */
width: 27px;
height: 27px;
line-height: 27px;
border-radius: 4px;
background: #3CB7E7;
text-align: center;
}
#sidebar-menu li+li {margin-top: 4px;}
#sidebar-menu b {
display: none;
position: absolute;
/* позиция относительно левого края равна ширине эл-та li */
left: 27px;
top: 0;
height: 27px;
/* ширина равна зазору между блоком меню и подменю */
width: 16px;
line-height: 27px;
background: transparent;
color: #323A45;
/* саму иконку позиционируем вправо, чтобы визуально она смотрелась вместе с блоком подменю */
text-align: right;
}
#sidebar-menu li > ul {
display: none;
position: absolute;
top: -10px;
left: 42px;
width: 120px;
padding: 10px;
background: #323A45;
border-radius: 8px;
}
#sidebar-menu li:hover b,
#sidebar-menu li:hover ul {display: block;}
#sidebar-menu li a {
display: block;
padding: 4px 8px;
border-radius: 4px;
color: #FFF;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
#sidebar-menu li a:hover {
display: block;
background: #3CB7E7;
}
Если по стилизации у вас есть вопросы пишите в комментарии к этому посту, с удовольствием отвечу.
Вот и все! Фиксированное боковое меню готово 🙂
webcomplex.com.ua
Фиксированное меню для сайта с помощью CSS3
/*====================
Цветовая схема меню
===============================*/
body {
background: #000000 url(header.jpg) no-repeat center top;
color: #666;
font: 14px/18px ‘Lato’, Arial, sans-serif;
text-align: justify;
}
/* Цвет строки меню */
#navigation,
#nav li ul li,
#nav li ul li a{
background: #000;
}
/* Цвет пункта меню */
#nav li a,
#nav li a:hover,
#nav li ul li,
#nav li ul li a,
#nav li ul li a:hover {
color: #fff;
}
/* Цвет при наведении*/
#nav li a:hover,
#nav li ul li a:hover {
background: #9ACD32;
}
/* Тени*/
#nav li a,
#nav li a:hover,
#nav li ul li a:hover {
text-shadow: 0 1px 1px #333;
}
/* Цвета формы поиска */
.searchform input, .searchform input:not(:focus){
color:#B1B1B1; /*Цвет текста по умолчанию*/
background: #fff; /*Цвет фона по умолчанию*/
}
.searchfield:focus{
color: #000; /* Цвет текста при нажатии */
}
/*=====================================================================
Пункты отвечающие за фиксацию меню
====================*/
#menu_div{
clear: both;
position: relative;
top: 0;
left: 0;
}
#navigation {
position: fixed;
}
#navigation, #menu_div {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
#menu_div, #navigation, #menu, #nav{
height: 45px; /* Высота меню */
}
#menu_div:hover,
#navigation:hover,
#nav li a:hover, #nav li ul a
{
opacity: 0.95;/* Прозрачность меню при наведении*/
}
#menu_div,
#navigation,
#nav li a,
#menu_div:not(:hover),
#navigation:not(:hover)
{
opacity: 0.8;/* Когда убираем курсор мыши */
}
#menu {
width: 960px;
margin:0 auto; /*Центр меню*/
padding:0;
position: relative;
}
#nav{
width: 960px;
margin:0;
padding:0;
position: relative;
font-family: ‘Arial’, Helvetica, sans-serif;
}
#nav li a,#nav li {
float:left;
}
#nav li {
list-style:none;
position:relative;
}
#nav li a {
line-height: 45px;
padding:0 15px;
text-decoration:none;
margin:0;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}
/*====================
Подменю
=====================*/
#nav li ul {
display:none;
position:absolute;
left:0;
top:100%;
padding:0;
margin:0;
} /* Спрятать меню*/
#nav li:hover > ul {
display:block;
} /* Показать подменю при наведении */
#nav li ul li,#nav li ul li a {
float:none;
height: 35px; /* Высота подменю*/
min-width: 150px; /* Минимальная ширина */
line-height: 35px;
border-right: 0;
text-shadow: none;
display:block;
font-size:13px;
font-weight:400;
text-transform:inherit;
}
#nav li ul li {
_display:inline; /* Для IE */
}
/* == 12. Под-под пункты == */
#nav li ul li ul {
display:none;
}
#nav li ul li:hover ul {
left:100%;
top:0;
}
/*====================
Форма поиска
====================*/
.searchform {
position: absolute;
right: 15px;
top: 6px;
display: inline-block;
zoom: 1;
*display: inline;
border: 0;
padding: 0;
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
height: 27px;
line-height: 27px;
padding-left: 10px;
padding-right: 10px;
width: 150px;
border: 2px solid #333;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 1px 1px 2px #A1A1A1;
-webkit-box-shadow: inset 1px 1px 2px #A1A1A1;
box-shadow: inner 1px 1px 2px #A1A1A1;
}
.searchfield:focus{
font-weight: 700;
width: 220px;
}
.searchfield:not(:focus){
width: 150px;
}
/*========================
Переходы
========================*/
#nav li a:hover,
#nav li ul li a:hover {
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}
.searchfield:focus,
.searchfield:not(:focus){
-webkit-transition-property:width;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}
#menu_div:hover,
#navigation:hover,
#nav li ul a,
#menu_div,
#navigation,
#nav li a,
#menu_div:not(:hover),
#navigation:not(:hover)
{
-webkit-transition-property:opacity;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}
www.rudebox.org.ua
Плавно открывающееся меню с помощью CSS
Осуществим нашу задумку с помощью самого обычного CSS
. В следующей статье, если не забуду, то опишу этот же эффект с помощью jQuery. Но а пока, давайте приступим к разбору данного метода. Но, сначала предложу посмотреть, что получится в итоге:Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.
<nav> <ul> <li> <a href="#">пункт 1</a> <ul> <li><a href="#">Выпадающий пункт 1</a></li> <li><a href="#">Выпадающий пункт 2</a></li> <li><a href="#">Выпадающий пункт 3</a></li> </ul> </li> <li> <a href="#">пункт 2</a> <ul> <li><a href="#">Выпадающий пункт 1</a></li> <li><a href="#">Выпадающий пункт 2</a></li> <li><a href="#">Выпадающий пункт 3</a></li> </ul> </li> </ul> </nav>
Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂
#slow_nav > ul{
width: 500px;
margin:25px auto 0;
}
#slow_nav > ul > li{
list-style: none;
display: inline-block;
position:relative;
padding:0;
}
#slow_nav a{text-decoration:none;}
#slow_nav > ul > li > a{
font-size:18px;
padding:5px;
background-color:#333;
color:#fff;
}
#slow_nav li ul{
position:absolute;
list-style:none;
text-align:center;
top:15px;
font-size:15px;
left:0;
margin:0;
padding:0;
/* Данные строки нужны для правильной работы анимации */
max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
/* конец */
}
#slow_nav li:hover ul{
max-height:300px;
}
#slow_nav li ul li{
background-color:#333;
border-bottom:1px solid #888;
}
#slow_nav li ul li:last-child{
border-bottom:none;
}
#slow_nav li ul li a{
padding:5px 12px;
color:#fff;
display:block;
}
#slow_nav li ul li:hover{
background-color:#444;
}
#slow_nav li ul li:first-child{
margin-top:25px;
position:relative;
}
#slow_nav li ul li:first-child:before{
content:'';
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#333;
left:10px;
top:-10px;
}
Код CSS не маленький., но по своей сути не сложный. Если Вы владеете навыками верстки, то запросто разберетесь что и как. Я лишь остановлюсь на некоторых моментах, которые являются важными.
Первым делом это сама анимация. Нужный код выделен комментариев в коде — /* Данные строки нужны для правильной работы анимации */. Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей —
max-height:0px; и прописываем свойство overflow:hidden;, чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition, которое совершит анимацию.
-webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear;
Тут можете изменить разве что время анимации. В данный момент время задано 0.4 секунды. Сразу после того как задали анимацию, добавлено свойство , для задания новой высоты при наведении на главные пункты меню:
#slow_nav li:hover ul{
max-height:300px;
}
Тут такая картинка. Высота задается максимальная фиксированная, если у Вас высота выпадающего меню будет побольше, то и значение меняйте на больше. В противном случаи Ваше меню обрежет по высоте 300 пикселей.
Далее уже задаем стили для выпадающего меню, так что на них подробно останавливаться не буду. Ту как бы и все. Это и есть весь способ. Он простой и действенный и справляется со своей задачей на все 100%.
Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.
На этом все, спасибо за внимание. 🙂
gnatkovsky.com.ua