Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » jQuery » Красивое меню для Вашего сайта

Красивое меню для Вашего сайта

Красивое меню для Вашего сайта

Сегодня рассмотрим довольно интересную и красивую концепцию навигационного для Вашего сайта с помощью небольшого плагина , и 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

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

6 комментариев
  1. cryosun:

    Красиво. Но нормально работают только на opera и mozila. Google chrome судорожно в конвульсиях реугирует при наведении мыши. А долбаный IE 8...

    В общем долбаный он.

    Ответить
    • driver:

      Спасибо за Ваш комментарий, только не знаю, что у Вас за Chrome такой, у меня все работает замечательно...

      Ответить
  2. Moto:

    Спасибо огромное, очень красиво, мне понравилось...

    Ответить
    • driver:

      Рад, что вам понравилось. Заходите почаще, надеюсь будет еще много интересного)))

      Ответить
  3. Максим:

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

    Ответить
  4. Вадим:

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

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru