—»     —»   Анимированное меню навигации на CSS3
  Раздел: Меню и Навигация, CSS/Style Sheets   Нет комментариев  

Анимированное меню навигации на CSS3

Вот уже несколько дней мы стараемся уделить немного времени CSS3. Сегодня мы будем учиться создавать анимированное меню навигации на CSS3. Кроме анимированного меню на CSS3, мы также постараемся сделать ту же самую анимацию посредством jQuery. Итак, приступим!

Посмотрите на демо-файл - сайт прекратил существование

1. Анимированное меню навигации на CSS3 – работает в браузерах Safari и Chrome

2. Анимированное меню на jQuery

Будем считать, что вы и вправду ознакомились с демо. Теперь мы знаем точно, над чем нам придется работать, так что первым делом нам понадобится документация по HTML. Здесь нам потребуются неупорядоченные списки и 2 div-элемента с различными атрибутами в тэгах li. Мы будем использовать два div-элемента в тэгах li, потому, что мы разделим их отступом в нашем коде CSS, а также установим в параметрах тэгах ul, чтобы те перекрывались полностью. И как только пользователь наводит курсор мыши на тэг li, тэг ul будет смещать отображенный div-элемент к верху для того, чтобы отобразить скрытый элемент. Итак, давайте приступим к написанию HTML-кода. Далее перейдем к написанию кода CSS.

HTML-Код:

<div id="menu-demo">
<ul>
        <li>
        <div id="up"><a href="#">Home</a></div>
    <div id="slide"><a href="#">Home</a></div>
    </li>

        <li>
        <div id="up"><a href="#">About Us</a></div>
    <div id="slide"><a href="#">About Us</a></div>
        </li>

        <li>
        <div id="up"><a href="#">Services</a></div>
    <div id="slide"><a href="#">Services</a></div>
        </li>

        <li>
        <div id="up"><a href="#">Contact Us</a></div>
    <div id="slide"><a href="#">Contact Us</a></div>
        </li>
</ul>
</div>

Далее – CSS

Здесь объяснения только в виде комментариев

Назначьте переполнение для тэгов UL в качестве скрытого. Т.е., когда скользящая анимация передвинет div к верху, и скрытый div будет отображен.

Здесь мы будем использовать градацию CSS3 в качестве фона меню, Text shadow, Box shadow, а также анимацию CSS3.

#menu-demo ul {
    width:500px;
    height:50px;
    background-color:#CCC;
    overflow:hidden;
    /*CSS3 Border radius*/
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    /*CSS3 Box Shadow*/
    -moz-box-shadow:1px 2px 4px #666;
    -webkit-box-shadow:1px 2px 4px #666;
    /*CSS3 Gradient Property for menu*/
    background-image:-moz-linear-gradient(rgb(48,161,171), rgb(56,192,207));
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
                          from(rgb(48,161,171)), to(rgb(56,192,207)));

}
#menu-demo li {
    float:left;
    list-style-type:none;
    margin-left:40px;
    text-shadow: 1px 1px 2px #ccc;
}
#menu-demo li a {
    text-decoration:none;
    color:#303;
    font-size:20px;
    font-family:Tahoma, Geneva, sans-serif;    
}
#up {
    margin-top:13px;
    margin-bottom:40px;
}
li:hover {
    /*As soon as hover over li elements animation will start*/
    -webkit-animation-name: slide;
    /*Duration of Animation would be 1 Second*/
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes slide {
    0% { margin-top: 0px;}
    /* When animation completed the li will move up 60pixel*/
    100% { margin-top: -60px;}
}

Тот же эффект посредством jQuery

Теперь мы получим тот же результат, применив параметры jQuery.

$(document).ready(function() {
    $("#menu-demo li").hover(function() {//as soon as the mouse hovers over li
        $(this).stop().animate({//animation will start now
            marginTop: "-60"//move li tag up with 60px
        }, 1000);//time to complete animation would be 1 second
    } , function() {
        $(this).stop().animate({
            marginTop: "0"
        }, 0);
    });

});
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Mysterious Master   Прочитано (раз): 12074   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031