Горизонтальное CSS3+jQuery слайд-меню

Свежий помидор в бокале с водойВ очередной раз мое желание "допилить", доделать и улучшить не оставило меня в покое. А я не оставил в покое свою недавнюю разработку - слайд меню на CSS3 и решил ее, как говорится: "довести до ума". В итого получилось полноценное, кроссбрузерное jQuery слайд меню.
  В общем-то это скорее даже не изменения, а дополнения к предыдущей версии этой менюшки. CSS для меню, практически остался прежним - добавлены градиент для IE и несколько условий для IE7, а также "костыль"(условный комментарий) для IE8. Теперь вся анимация блоков происходит по средствам jQuery, думаю что так будет правильнее, но тут собственно существует выбор. При помощи плагина можно управлять типом анимации, но об этом ниже.
  Для начала посмотрим :)
DEMO
  Итак, начнем. Для работы меню нам потребуются, естественно, подключенная к сайту библиотека jQuery и jQuery Easing Plugin, он есть в архиве.
  Подключаем эти скрипты добавляем в шаблон, выглядеть это должно примерно так:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src=".../jquery-easing-1.3.pack.js"></script>
Теперь сам скрипт менюшки, он не большой:
$(function(){
 $("ul.slide-menu").css({'bottom':'110%', 'left':'110%'});
 $("ul.slide-menu li").css({'opacity':'0','right':'110%'});
 $("ul.slide-menu li a").css('borderWidth', '0px');

 $("ul.slide-menu li a").hover(
  function(){
   $(this).stop().animate({borderWidth: "5px"}, 300, 'easeOutBack');},
  function(){
   $(this).stop().animate({borderWidth: "0px"}, 100);}
 );

 $("li.visible").hover(
  function(){
    $(this).children().stop().animate({bottom: "0%", left: "0%"}, 600, 'easeInOutBack',
     function(){
       $(this).children("li").stop().animate({opacity: "1",right: "0%"}, 500, 'easeInOutBack');
     });
  },
  function(){
    $(this).children().stop().animate({bottom: "110%", left: "110%"}, 500, 'easeOutQuart',
      function(){
        $(this).children("li").stop().animate({opacity: "0",right: "110%"}, 100);
     });
  }
 );
});
Значения easeInOutBack, easeInOutBack, easeOutQuart, easeOutBack - это тип применяемой анимации, узнать больше, посмотреть примеры и выбрать подходящие можно на этом сайте - http://easings.net
  Что касается IE8, для него есть пару условий. Кто-то может сказать что на него обращать внимания не стоит, но все же... Блок размещается перед основным стилем.
<!--[if IE 8]>
<style type="text/css">
.home:before,
.about:before,
.dev:before,
.contact:before,
.social:before {
display: none;
}
.home li a:hover:after,
.about li a:hover:after,
.dev li a:hover:after,
.contact li a:hover:after {
top: 1px !important;
right: 1px !important;
border-width: 14px 2px 14px 12px !important;
}
</style>
<![endif]-->
  А вот и сам немного обновленный CSS для меню:
ul.menu,
ul.menu li.visible,
.slide-menu {
position: relative;
display: inline-block;
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
ul.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;
}

/*
Стили для всех блоков по умолчанию
----------------------------------------------*/

.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;
*margin: 1px 2px 0 2px; /*IE7*/
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;
}

/*
CSS3 анимации для всех необходимых элементов.
Если вы хотите использовать муню без jQuery,
просто разкомментируйте блок ниже.
-----------------------------------*/

/*
.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;
}
*/


/*
Прибавим шарма. Фоны слайдер блоков
----------------------------*/

.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(img/slide-background-icons/home.png) no-repeat;
}
.about:before {
background: url(img/slide-background-icons/about.png) no-repeat;
}
.dev:before {
background: url(img/slide-background-icons/code.png) no-repeat;
}
.contact:before {
background: url(img/slide-background-icons/open_mail.png) no-repeat;
}
.social:before {
background: url(img/slide-background-icons/network.png) no-repeat;
}
.home {
background: #B87094;
background-image: -webkit-linear-gradient(left, #7A2952 0%,transparent 80%);
background-image: -moz-linear-gradient(left, #7A2952 0%,transparent 80%);
background-image: linear-gradient(to right, #7A2952 0%,transparent 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7A2952', endColorstr='#00000000',GradientType=1 );
}
.dev {
background: #336699;
background-image: -webkit-linear-gradient(left, #29527A 0%,transparent 30%);
background-image: -moz-linear-gradient(left, #29527A 0%,transparent 30%);
background-image: linear-gradient(to right, #29527A 0%,transparent 30%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29527A', endColorstr='#00000000',GradientType=1 );
}
.about {
background: #669999;
background-image: -webkit-linear-gradient(left, #005C5C 0%,transparent 50%);
background-image: -moz-linear-gradient(left, #005C5C 0%,transparent 50%);
background-image: linear-gradient(to right, #005C5C 0%,transparent 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005C5C', endColorstr='#00000000',GradientType=1 );
}
.contact {
background: #666699;
background-image: -webkit-linear-gradient(left, #6B6BB2 0%,transparent 100%);
background-image: -moz-linear-gradient(left, #6B6BB2 0%,transparent 100%);
background-image: linear-gradient(to right, #6B6BB2 0%,transparent 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6B6BB2', endColorstr='#00000000',GradientType=1 );
}
.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;
height: 50%;
width: 50%;
}
.social li a,
.social li a:hover {
box-shadow: none;
border: none;
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(img/social-backgrounds/facebook.png) 100% 50% no-repeat;
}
.social li .twitter:hover {
background: #0099FF url(img/social-backgrounds/twitter.png) 50% 100% no-repeat;
}
.social li .google:hover {
background: #A30000 url(img/social-backgrounds/google-plus.png) 0 0 no-repeat;
}
.social li .rss:hover {
background: #FF9933 url(img/social-backgrounds/rss.png) 0 0 no-repeat;
}
 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>

 На этом все. Вопросы пожелания, критика в комментариях.
   Кому понравилось, качаем исходник из сферы и радуемся. Файл jQuery+CSS3-slide-menu
СКАЧАТЬ ZIP
©http://magentawave.com

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

  1. Красота не описуемая!! Долго игралась в демо версии :) Правда сама решиться последовать вашим инструкциям пока не могу :) Духу не хватает и знаний!

    ОтветитьУдалить
    Ответы
    1. Спасибо за лестный отзыв, приятно :) Ну а на счет знания, все еще впереди :)

      Удалить
  2. Мега круто! Запилю на какой0нибудь сайт обязательно ^^

    Спасибо!

    ОтветитьУдалить
  3. Константин01.04.13, 18:20

    Здравствуйте. Попробовал установить данное меню, но возникла проблема в анимации, так как туплю в вопросе:-"Куда установить скрипт "Теперь сам скрипт, он не большой" $(function(){
    $("ul.slide-menu").css({'bottom':'110%', 'left':'110%'});
    $("ul.slide-menu li").css({'opacity':'0','right':'110%'});
    $("ul.slide-menu li a").css('borderWidth', '0px'); .............???????????" Остальное установилось нормально и само меню работает, но повторюсь БЕЗ АНИМАЦИИ. Подскажите пожалуйста, как решить проблему? Заранее спасибо.

    ОтветитьУдалить
    Ответы
    1. Это не проблема, это неосведомленность. Для начала изучаем:
      http://www.magentawave.com/2013/03/how-connect-scripts.html
      http://www.magentawave.com/2013/03/jquery.html
      Качаем архив, там скрипты плагинов, их заливаем к себе на хостинг и подключаем как показано в статье. На всякий случай:
      http://www.magentawave.com/2012/09/how-create-google-code-account.html
      Затем добавляем сам скрипт-обработчик на сайт и все будет работать.

      Удалить
  4. Анонимный31.10.13, 14:02

    Спасибо за меню, вот только проблема с firefox и chrome. При наведении мыши высвечивается только первый пункт подменю, а если навести мышей на этот пункт, то он выделяется не блоком со стрелочкой, а блоком во всю высоту кнопки. В опере и ИЕ раьотает нормально

    ОтветитьУдалить
    Ответы
    1. Это в демо такое? Перед тем как публиковалась статья, меню неоднакратно было проверено на кроссбраузерность. Сейчас смотрю через Хрому(последний) - все работает отлично, FF 3.5 и последний, тоже все хорошо.
      Проверьте правильно ли установлены вами коды, если да, то опишите подробнее проблему и покажите страницу с примером.

      Удалить
    2. Анонимный31.10.13, 20:01

      да, что-то явно неправильно я сделал, с другой стороны в опере все нормально, IE 10 тоже, IE 8 криво. Вот пример http://indego.ru/index_temp.php Помогите пожалуйста, больно уж менюшка хорошая

      Удалить
    3. Анонимный01.11.13, 10:12

      Вроде получилось:
      в стиле .slide-menu li a {
      убрал комментарий
      margin: 1px 2px 0 2px; /*IE7*/
      height: 100%;
      height: auto; /*IE7*/

      Удалить
    4. Собственно, при копировании, коменты из кода лучше всегда убирать, если нужно, то потом уж, по ходу, свои самостоятельно дописать

      Удалить
  5. Анонимный23.12.14, 12:45

    Мой вопрос касается скрипта и горизонтального меню, поэтому спрошу в этой теме. Хочу сделать простенькую панель навигации, но не знаю как сделать так, чтобы выделялась ссылка текущей страницы. Эта фишка есть в гаджете "страницы", но я хочу сделать свое простое меню типа nav-ul-li-/li-/ul-/nav. Для этого нужен какой-то скрипт?

    ОтветитьУдалить
    Ответы
    1. Да, для этого нужен дополнительный скрипт. Посмотреть пример такого срипта и меню можно в этой статье
      http://www.magentawave.com/2012/12/how-make-smart-menu-for-site.html

      Удалить

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

BestProject