Горизонтальное слайд меню на CSS

Бегущая девушка отражается в воде Не оставляя без внимания тему различных меню для сайтов и блогов, сделанных только на CSS, и более того, как сейчас модно писать - на CSS3. Хочу поделится своей дизайнерской разработкой - горизонтальное, выпадающие слайд-меню. Менюшка получилась довольно компактная и пожалуй, "выпадающие" - это не совсем верное определение, так как по сути ничего никуда не выпадает - блок ссылок плавно и красиво, благодаря CSS3, выезжает в виде слайдера. Направление и скорость появления слайд-блока легко регулируются заменой пары строк в CSS коде, но об этом позже. Главное, что меню не страдает зависимостью от версий браузера, даже нерадивые пользователи IE7 с этим меню, не будут ущемлены в функционале на вашем сайте :).
  Итак, смотрим демо:
DEMO
  Теперь небольшая прогулка по коду, кто сам с усам - исходник в конце статьи.
Обновленный и дополненный вариант кода CSS для этого меню, а также скрипт jQuery для полной кроссбраузерности анимации выложен в статье Горизонтальное CSS3+jQuery слайд-меню
  Как я уже упоминал, HTML структура - это обычное выпадающие меню, ничего лишнего:
<div id='menu-block'>
<ul class='menu'>
<li class='visible'><a href="#">Home</a>
 <ul class='slide-menu home'>
  <li><a href="#">Home Page</a>
  <li><a href="#">Blog</a>
  <li><a href="#">Site Map</a>
 </ul>
<li class='visible'><a href="#">About</a>
 <ul class='slide-menu about'>
  <li><a href="#">About Me</a>
  <li><a href="#">I'am Today</a>
  <li><a href="#">Photo with Me</a>
  <li><a href="#">My Family</a>
 </ul>
</li>
<li class='visible'><a href="#">Development</a>
 <ul class='slide-menu dev'>
  <li><a href="#">PHP</a>
  <li><a href="#">JavaScript</a>
  <li><a href="#">jQuery</a>
  <li><a href="#">CSS</a>
 </ul>
</li>
<li class='visible'><a href="#">Contact</a>
 <ul class='slide-menu contact'>
  <li><a href="#">Email</a>
  <li><a href="#">Skype</a>
  <li><a href="#">Forum</a>
 </ul>
</li>
<li class='visible'><a href="#">Follow Me</a>
 <ul class='slide-menu social'>
  <li><a class='facebook' href="#">facebook</a></li>
  <li><a class='twitter' href="#">twitter</a></li><br>
  <li><a class='google' href="#">google+</a></li>
  <li><a class='rss' href="#">RSS</a></li>
 </ul>
</li>
</ul>
</div>
  А теперь начнем "колдовать" с CSS. Для оформления текста я решил подключить веб-шрифты от Google Web Fonts. В CSS исходника, используемые в демо, уже подключены, но вы можете и подобрать свои.
 Итак, стиль. Собственно особо сложного ничего нет, основная часть самая обычная:
.menu,
ul.menu li.visible,
.slide-menu {
display: inline-block; /*отображаем как встроенные элементы*/
position: relative; /*сразу позиционируем относительно*/
list-style: none; /*убираем маркеры*/
text-align: center;
/*убираем отступы*/
padding: 0;
margin: 0;
}
.menu li a {
display: block; /*делаем ссылки блочными*/
text-decoration: none;
}
ul.menu li.visible {
background: #CCF;
border: 1px solid #8F8FB2;
float: left; /*обтекание*/
overflow: hidden; /*скрываем все что за пределами блока*/
height: 120px; /*высота блоков меню*/
width: 180px; /*ширина блоков меню*/
}
ul.menu li.visible:hover {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
z-index: 1; /*чтобы тень отображалась поверх следующего блока*/
}
ul.menu li.visible > a {
color: #3D3D5C;
/*
в значении шрифта межстрочный пробел равен высоте блока
чтобы тест отображался по центру
*/

font: normal normal 22px/120px 'Tenor Sans', Verdana, sans-serif;
white-space: nowrap; /*запрещаем перенос*/
}
  Дальше - веселее. Стили для слайд-блоков, здесь сразу задаются параметры для будущей анимации. С помощью значений top, left, bottom, и right мы не только скрываем, но и определяем откуда и как будет появляться слайд-блок.
/*
Стили для слайд-блоков и их элементов
*/

.slide-menu {
position: absolute; /*позиционируем абсолютно*/
bottom: 110%; /*сдвигаем блок вверх - отступ снизу*/
left: 110%; /*сдвигаем вправо - отступ слева*/
overflow: hidden; /*скрываем все что за пределами блока*/
background: #3D3D4C;
color: #fff;
height: 100%; /*заполняем по высоте*/
width: 100%; /*заполняем по ширине*/
}
ul.menu li.visible:hover .slide-menu {
/*при наведении на основной блок, "ставим" слайд-блок на место*/
bottom: 0%;
left: 0%;
}
.slide-menu li {
/*позиционируем и скрываем элементы списка*/
position: relative;
right: 110%;
opacity: 0;
}
ul.menu li.visible:hover .slide-menu li {
/*восстанавливаем элементы списка при наведении на основной блок*/
right: 0;
opacity: 1;
}
/*стили для ссылок*/
.slide-menu li a {
font: normal normal 18px 'Open Sans Condensed', Tahoma, sans-serif;
color: #fff;
opacity: .8;
padding: 1px 5px;
margin: 2px 14px 2px 2px;
height: 100%;
*height: auto; /*IE7*/
}
.slide-menu li a:hover {
background: #E6E6E6;
border-left: 5px solid #666;
color: #000;
-webkit-box-shadow: 0 0 10px 1px #E0E0FF;
-moz-box-shadow: 0 0 10px 1px #E0E0FF;
box-shadow: 0 0 10px 1px #E0E0FF;
opacity: 1;
}
Ну а вот и самое веселое - функции CSS анимации:
/*
CSS3 анимации для всех участвующих элементов,
*/

.slide-menu {
-webkit-transition: bottom .5s ease-out, left .5s ease-out;
-moz-transition: bottom .5s ease-out, left .5s ease-out;
-o-transition: bottom .5s ease-out, left .5s ease-out;
transition: bottom .5s ease-out, left .5s ease-out;
}
.slide-menu li {
-webkit-transition: right .8s ease, opacity 1s ease;
-moz-transition: right .8s ease, opacity 1s ease;
-o-transition: right .8s ease, opacity 1s ease;
transition: right .8s ease, opacity 1s ease;
}
.slide-menu li a {
-webkit-transition: border .5s ease;
-moz-transition: border .5s ease;
-o-transition: border .5s ease;
transition: border .5s ease;
}
Давайте разберемся, На демо видно что блок "выезжает" из правого верхнего угла:
Движение слад-блока в меню
 В данном случаи мы используем свойство transition, для плавного изменения расстояния, от точки расположения заданной слайд-блоку в состоянии покоя до точки, в которой он должен находится при наведении на родительский элемент. Тоже самое происходит и с внутренними элементами слайд-блока. Таким образом, чтобы изменить направление появления блока, достаточно просто изменить свойства его положения и аналогично прописать их в функции CSS анимации, свойства transition.
 Ну и наконец добавим немного шарма, придадим каждому слайд-блоку свой, индивидуальный стиль:
.home,
.about,
.dev,
.contact {
text-align: left;
}
/*
обозначим каждый блок индивидуальным фоновым изображением
*/

.home:before,
.about:before,
.dev:before,
.contact:before,
.social:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
/*
положение фоновой картинки - смещение и поворот
*/

top: 0;
left: 50%;
-webkit-transform:scale(1) rotate(-20deg);
-moz-transform:scale(1) rotate(-20deg);
-ms-transform:scale(1) rotate(-20deg);
-o-transform:scale(1) rotate(-20deg);
transform:scale(1) rotate(-20deg);
opacity: .4;
}
.home:before {
background: url(home.png) no-repeat;
}
.about:before {
background: url(about.png) no-repeat;
}
.dev:before {
background: url(code.png) no-repeat;
}
.contact:before {
background: url(open_mail.png) no-repeat;
}
.social:before {
background: url(network.png) no-repeat;
}
/*
сделаем также и индивидуальный цвет фона и градиент
*/

.home {
background: #B87094;
background-image: linear-gradient(to right, #7A2952 0%,transparent 80%);
background-image: -webkit-linear-gradient(left, #7A2952 0%,transparent 80%);
background-image: -moz-linear-gradient(left, #7A2952 0%,transparent 80%);
}
.dev {
background: #336699;
background-image: linear-gradient(to right, #29527A 0%,transparent 30%);
background-image: -webkit-linear-gradient(left, #29527A 0%,transparent 30%);
background-image: -moz-linear-gradient(left, #29527A 0%,transparent 30%);
}
.about {
background: #669999;
background-image: linear-gradient(to right, #005C5C 0%,transparent 50%);
background-image: -webkit-linear-gradient(left, #005C5C 0%,transparent 50%);
background-image: -moz-linear-gradient(left, #005C5C 0%,transparent 50%);
}
.contact {
background: #666699;
background-image: linear-gradient(to right, #6B6BB2 0%,transparent 100%);
background-image: -webkit-linear-gradient(left, #6B6BB2 0%,transparent 100%);
background-image: -moz-linear-gradient(left, #6B6BB2 0%,transparent 100%);
}
/*
сделаем ссылки похожими на указатель, добавив симпатичный уголок
*/

.home li a:hover:after,
.about li a:hover:after,
.dev li a:hover:after,
.contact li a:hover:after {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 13px 2px 13px 12px;
border-style:  solid;
border-radius: 0 12px 12px 0;
border-color: transparent transparent transparent #E6E6E6;;
}
/*
Стили для блока ссылок в социальных сетях
*/

.social {
background: #000;
}
.social li {
display: inline-block;
text-align: center;
float:left;
padding: 0;
/*
при добавлении ссылок, высоту нужно указывать
в зависимости от их количества,
если 6 ссылок, то 30%, 8 - 25%
*/

height: 50%;
width: 50%;
}
.social li a,
.social li a:hover {
box-shadow: none; /*уберем общую тень*/
border: 0; /*уберем общую рамку*/
color: #E6E6E6;
text-shadow: 1px 1px 1px #000;
margin: 0;
}
.social li a:hover {
color: #fff;
}
/*
обыграем стиль текста с помощью различных (безопасных) шрифтов
*/

.social li .facebook {
font: normal normal 20px/3 Impact, sans-serif;
}
.social li .twitter {
font: normal bolder 20px/3 Trebuchet MS, sans-serif;
}
.social li .google {
font: normal 500 20px/3 Georgia, serif;
}
.social li .rss {
font: normal bold 20px/3 Verdana, sans-serif;
}
/*
зададим индивидуальный фоновый цвет и картинку
*/

.social li .facebook:hover {
background: #003399 url(facebook.png) 100% 50% no-repeat;
}
.social li .twitter:hover {
background: #0099FF url(twitter.png) 50% 100% no-repeat;
}
.social li .google:hover {
background: #A30000 url(google-plus.png) 0 0 no-repeat;
}
.social li .rss:hover {
background: #FF9933 url(rss.png) 0 0 no-repeat;
}
  Вот и все, наше CSS3 слайд-меню, готово!
  И код, и стиль в примерах и в архиве, рассчитан на максимальное количество ссылок в слад-блоке - 4, кроме вкладки с социальными аккаунтами - там, при желании, можно разместить 8. Однако, при необходимости можно увеличить размер блоков меню или добавить прокрутку в слайд-блоки
  Понравилось? - Архив исходника качаем из сферы, файл - CSS3-slide-menu.
Скачать ZIP
Делимся впечатлениями, и с друзьями :)

©http://magentawave.com

25 комментариев:

  1. Круто, очень стильно и оригинально!
    Только вот навскидку не совсем понял, как изменить фон у родительского элемента (на демо он бледно-голубой) на какой-нибудь другой...

    ОтветитьУдалить
    Ответы
    1. Стили для родителя в самом начале.

      ul.menu li.visible {
      background: #CCF;
      ......

      Удалить
    2. Ага, уже увидел.
      Спасибо огромное за блог, много интересного узнал! Продолжайте, а мы поддержим =)

      Удалить
  2. Интересное, красивое решение. Будем пробовать, не возражаете?

    ОтветитьУдалить
    Ответы
    1. Конечно не возражаем! Для того и делюсь :)

      Удалить
    2. Добрый вечер. "Внедрила" ваше красивое меню к себе в блог, правда, несколько уменьшила блоки. Спасибо Вам! Будет желание посмотреть, пожалуйста: http://olgaview2.blogspot.com/

      Удалить
    3. О, зелененькое :) Смотрю градиент радиальный добавили, по истине - нет предела совершенству, На "живом" сайте даже и как-то другому смотрится - лучше. Спасибо что используете мои скромные разработки :)

      Удалить
  3. Я так понял можно поменять всё (Цвета блоков, картинки, текст), а вот возможно ли установить это меню только на определённых страницах?

    ОтветитьУдалить
    Ответы
    1. Если речь идет о Blogger, то данный элемент(меню), как и любой другой, можно отображать только на определённых страницах
      http://www.magentawave.com/2012/10/most-popular-conditions-tags.html
      http://www.magentawave.com/2012/10/hide-elements-from-some-pages.html

      Удалить
  4. Подскажите пожалуйста, как сделать меню как у вас "Плюшки и менюшки" ?

    ОтветитьУдалить
    Ответы
    1. Подобное такому меню скоро будет выложено в блоге, также можете почитать эту статью - http://www.magentawave.com/2012/05/super-dropdown-menu-on-css.html второе, оригинальное мега-меню сделано по этому же принципу.

      Удалить
  5. Анонимный28.08.2013, 14:23

    Здравствуйте, подскажите а в данном меню можно ли сделать 3 уровня, т.е. например при наведении на HOME выпадает 3 подраздела и соотвественно затем при наведении на home page открывались еще несколько подпунктов

    ОтветитьУдалить
    Ответы
    1. Можно сделать все что угодно, но не думаю что это будет практично именно в этом меню, Проще будет сделать обычное выпадающие меню. Данное же меню моя дизайнерская разработка, так сказать "как есть", но я , в принципе, не запрещаю над ней поиздеваться. :)

      Удалить
    2. Анонимный19.09.2013, 10:46

      Спасибо, я конечно новичок в этом деле, так вот подскажите как сделать ваше вертикальное меню горизонтальным http://www.magentawave.com/2013/01/vertical-drop-down-css-menu.html
      оно очень хорошо вписалось мне на сайт как по дизайну так и даже по цвету и функциональности, но на некоторых страницах просто необходимо горизонтальное меню в таком же стиле

      Удалить
    3. Анонимный15.05.2014, 09:37

      А как сделать аналогичное меню, но с вертикальным расположением? Например для левого сайд-бара?

      Удалить
    4. В CSS для ul.menu li.visible убираем обтекание (float: left;) и значение для display указать как block

      Удалить
    5. Анонимный22.05.2014, 07:49

      Спасибо, зря задавал вопрос - уже сделал.. Действительно, заменил display: inline-block на display: block, и убрал обтекание и все произошло.

      Удалить
  6. Добрый день! Завис конкретно.)) Подскажите, а как вместо фона поставить картинку? И как поставить картинки внутри каждого блока ?

    ОтветитьУдалить
    Ответы
    1. Укажите для каждого блока (ссылки) дополнительные селекторы и отдельно фон для каждого, Например там где "About" добавьте селектор для ссылки
      <a class="about" href="#">About</a>
      ul.menu li.visible > a.about {
      background: url(image.png);
      }
      и т.д.

      Удалить
  7. Здравствуйте. У меня все работает, но почему-то... Ссылки не "списком" как у вас, на панельке, а вразноброс.
    Вот мой блог -> http://akemi-diaryofamemory.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. В Blogger нужно обнулять обтекание для этой области
      .tabs .widget li, .tabs .widget {
      float: none !important;
      }

      Удалить
    2. Начнем с конца.
      Данное меню написано для стандартной HTML страницы и не учитывает различные потребности разнообразных CMS.
      Для Blogger. Все настройки цвета прописываются непосредственно в коде, в дизайнере шаблона ничего делать не нужно, только через код стиля.
      У вас менюшка расположена в секции к которой уже присвоены определенные стили в шаблоне (Tabs) и они противоречат добавленным. В первую очередь, если вы хотите расположить в этой секции свое меню, то найдите в шаблоне блоки с классом tabs-inner и замените именно это сочетание на menu-inner, все должно выровняться. все это схожая проблема с http://www.magentawave.com/2012/10/why-not-droping.html
      Шрифт измениться только у тех элементов, которым вы его укажите, а не у всех.

      Удалить
  8. И еще, не помню, написал ли, но при смене фона вкладок в настройках на прозрачный, фон в блоках при наведении исчезает и текст накладывается на текст.
    И как сменить шрифт? В этой статье написано что какой-то шрифт уже подключен, но у меня почему-то не действует. ( посмотрела блог "http://olgaview2.blogspot.com/" - там шрифт работает корректно) Возможно у меня ручки кривые? =)
    Прочитала вашу статью про шрифты... Немного насторожилась. Если подключить шрифты к блогу, не сменится ли весь шрифт на нем?
    Еще раз заранее спасибо!

    ОтветитьУдалить
    Ответы
    1. Начнем с конца. Данное меню написано для стандартной HTML страницы и не учитывает различные потребности разнообразных CMS. Для Blogger. Все настройки цвета прописываются непосредственно в коде, в дизайнере шаблона ничего делать не нужно, только через код стиля. У вас менюшка расположена в секции к которой уже присвоены определенные стили в шаблоне (Tabs) и они противоречат добавленным. В первую очередь, если вы хотите расположить в этой секции свое меню, то найдите в шаблоне блоки с классом tabs-inner и замените именно это сочетание на menu-inner, все должно выровняться. все это схожая проблема с http://www.magentawave.com/2012/10/why-not-droping.html Шрифт измениться только у тех элементов, которым вы его укажите, а не у всех.

      Удалить
    2. Спасибо вам еще раз! Все получилось вполне аккуратно и красиво! =)

      Удалить

Следующее Предыдущее

BestProject