Стильное меню для Вашего сайта на jQuery

Категории: jQuery 30.01.2010 комментариев 6

Сегодня рассмотрим довольно интересную и красивую концепцию навигационного меню для Вашего сайта с помощью небольшого плагина jQuery, CSS и HTML. Уверен, такой вариант меню способно оживить и выделить из общей массы любой проект.

Для начала, чтобы убедиться в том что оно вам точно надо, посмотрите живой пример работы, этого замечательного меню. Демо расположено на сайте первоисточнике:

Смотреть Демо

Приступим…

HTML

Единственное что нам понадобится для этого меню — это неупорядоченный список с ссылками и текстом внутри элементов списка:

<ul id="navigation">
      <li class="home"><a><span>Home</span></a></li>
      <li class="about"><a><span>About</span></a></li>
      <li class="search"><a><span>Search</span></a></li>
      <li class="photos"><a><span>Photos</span></a></li>
      <li class="rssfeed"><a><span>Rss Feed</span></a></li>
      <li class="podcasts"><a><span>Podcasts</span></a></li>
      <li class="contact"><a><span>Contact</span></a></li>
</ul>

CSS

Для начала мы определяем свойства для списка:

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}

Мы позиционируем список в правом верхнем углу страницы. Навигация должна быть всегда доступна пользователю, даже если он прокручивает страницу вниз. Поэтому мы фиксируем позиционирование. Все отступы и границы мы выставляем на 0. Навигация также должна быть поверх всех элементов на странице. Именно поэтому мы также выставляем высокой значение z-index. Также нам необходимо прописать ширину меню, чтобы элементы списка не наезжали друг на друга при изменении размера окна браузера.

Теперь давайте взглянем на свойства элементов списка:

ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
}

Если Вы хотите, чтобы список показывался горизонтально, необходимо установить значение display на inline. После этого элементы списка будут отображаться рядом друг с другом, а не под.

Теперь посмотрим на свойства ссылок в элементах списка:

ul#navigation li a {
    display: block;
    float: left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color: #E7F2F9;
    background-repeat: no-repeat;
    background-position: 50% 10px;
    border: 1px solid #BDDCEF;
    text-decoration: none;
    text-align: center;
    padding-top: 80px;
}

Тут стоить упомянуть только свойство padding, которое помогает переместить текст ссылки в самый низ блока.

Давайте теперь добавим круглых углов (не будут работать в Internet Explorer) и прозрачности:

ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Последнее значение filter сделает меню прозрачным и в IE.

Теперь давайте позаботимся о красивых иконках:

ul#navigation .home a{
    background-image: url(../images/home.png);
}
ul#navigation .about a      {
    background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../images/mail.png);
}

При наведении мышки мы хотим, чтобы фоновый цвет менялся:

ul#navigation li a:hover{
     background-color:#CAE3F2;
}

Еще добавим немного стиля нашим текстовым блокам:

ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;
}

jQuery

Первым делом нам необходимо сделать, так чтобы элементы списка были спрятаны (похоже на клавиши рояля). Мы можем видеть только текст ссылки. При наведении на элемент, мы запускаем анимацию и показываем полностью блок с иконкой.

$(function() {
    var d=300;
    $('#navigation a').each(function(){
        $(this).stop().animate({
            'marginTop':'-80px'
        },d+=150);
    });
 
    $('#navigation &gt; li').hover(
    function () {
        $('a',$(this)).stop().animate({
            'marginTop':'-2px'
        },200);
    },
    function () {
        $('a',$(this)).stop().animate({
            'marginTop':'-80px'
        },200);
    }
);
});

Скрипт устанавливает marginTop на -80 пикселей. Эффект для первого элемента должен продолжаться 300+150 миллисекунд и каждый следующий элемент должен исчезать с задержкой 150 миллисекунд.

После того, как мышку пользователь убирает — все возвращается на свои места.

Скачать Исходники

Урок закончен! До следующих встреч!

Данный урок подготовлен для Вас командой сайта http://ruseller.com

Источник урока:www.tympanus.net

Метки: css · jQuery · меню · уроки

Всего комментариев: 6

cryosun: 7 июля, 2010 в 00:23
Красиво. Но нормально работают только на opera и mozila. Google chrome судорожно в конвульсиях реугирует при наведении мыши. А долбаный IE 8…
В общем долбаный он.
Ответить
- driver: 21 июля, 2010 в 12:15
  Спасибо за Ваш комментарий, только не знаю, что у Вас за Chrome такой, у меня все работает замечательно…
  Ответить
Moto: 4 ноября, 2012 в 22:50
Спасибо огромное, очень красиво, мне понравилось…
Ответить
- driver: 5 ноября, 2012 в 17:02
  Рад, что вам понравилось. Заходите почаще, надеюсь будет еще много интересного)))
  Ответить
Максим: 6 февраля, 2013 в 22:33
Добрый вечер, вот столкнулся с проблемой не большой, почему-то все правильно настроилось, но меню полностью не выдвигается :), в чем может быть проблема)
Ответить
Вадим: 27 февраля, 2013 в 13:02
Добрый день, скажите а как это меню повернуть так что бы оно вылазило сбоку? Срочно надо
Ответить

Стильное меню для Вашего сайта на jQuery

HTML

CSS

jQuery

Всего комментариев: 6

Оставить комментарий Отменить ответ

Разработка тем для WordPress