Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Март » 21 » CSS3 меню эффектом LavaLamp


11:36
CSS3 меню эффектом LavaLamp

 CSS3  меню эффектом LavaLamp


Я думаю, что вы уже видели анимированные меню с LavaLamp эффектом (основанный на JQuery плагине). Сегодня я хотел бы вам рассказать, как повторить то же самое поведение только с CSS3 (без JavaScript). Я буду использовать CSS3 переходы в нашем меню (для анимации элементов). Итак, если вы готовы, давайте начнем.


ДЕМО             СКАЧАТЬ ИСХОДНИК


 

Шаг 1. HTML

Как обычно, мы начнем с HTML. Вот HTML-код нашего меню. Как обычно - это UL-LI в основе навигации по меню. Самое интересное будет CSS стилях конечно.

index.html

<ul id="nav">

    <li> <a href="http://www.script-tutorials.com/"> Главная </ a> </ li>

    <li> <a class="hsubs" href="#"> меню 1 </ a>

        <ul class="subs">

            <li> <a href="#"> Подменю 1 </ A> </ li>

            <li> <a href="#"> Подменю 2 </ A> </ li>

            <li> <a href="#"> Подменю 3 </ a> </ li>

            <li> <a href="#"> Подменю 4 </ a> </ li>

            <li> <a href="#"> Подменю 5 </ a> </ li>

        </ UL>

    </ Li>

    <li> <a class="hsubs" href="#"> Меню 2 </ a>

        <ul class="subs">

            <li> <a href="#"> Подменю 2-1 </ a> </ li>

            <li> <a href="#"> Подменю 2-2 </ a> </ li>

            <li> <a href="#"> Подменю 2-3 </ a> </ li>

            <li> <a href="#"> Подменю 2-4 </ a> </ li>

            <li> <a href="#"> Подменю 2-5 </ a> </ li>

            <li> <a href="#"> Подменю 2-6 </ a> </ li>

            <li> <a href="#"> Подменю 2-7 </ a> </ li>

            <li> <a href="#"> Подменю 2-8 </ a> </ li>

        </ UL>

    </ Li>

    <li> <a class="hsubs" href="#"> Меню 3 </ a>

        <ul class="subs">

            <li> <a href="#"> Подменю 3-1 </ a> </ li>

            <li> <a href="#"> Подменю 3-2 </ a> </ li>

            <li> <a href="#"> Подменю 3-3 </ a> </ li>

            <li> <a href="#"> Подменю 3-4 </ a> </ li>

            <li> <a href="#"> Подменю 3-5 </ a> </ li>

        </ UL>

    </ Li>

    <li> <a href="#"> меню 4 </ a> </ li>

    <li> <a href="#"> меню 5 </ a> </ li>

    <li> <a href="#"> Меню 6 </ a> </ li>

    <li> <a href="http://www.script-tutorials.com/pure-css3-lavalamp-menu/"> Назад </ a> </ li>

    <div id="lavalamp"> </ div>

</ UL>

 

Шаг 2. CSS

Вот CSS стили нашей LavaLamp меню.

CSS / menu.css

#nav,#nav ul {

    list-style: none outside none;

    margin: 0;

    padding: 0;

}

#nav {

    background: url('menu_bg.png') no-repeat scroll 0 0 transparent;

    clear: both;

    font-size: 12px;

    height: 58px;

    padding: 0 0 0 9px;

    position: relative;

    width: 957px;

}

#nav ul {

    background-color: #222;

    border:1px solid #222;

    border-radius: 0 5px 5px 5px;

    border-width: 0 1px 1px;

    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);

    left: -9999px;

    overflow: hidden;

    position: absolute;

    top: -9999px;

    z-index: 2;

 

    -moz-transform: scaleY(0);

    -ms-transform: scaleY(0);

    -o-transform: scaleY(0);

    -webkit-transform: scaleY(0);

    transform: scaleY(0);

 

    -moz-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    -o-transform-origin: 0 0;

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

 

    -moz-transition: -moz-transform 0.1s linear;

    -ms-transition: -ms-transform 0.1s linear;

    -o-transition: -o-transform 0.1s linear;

    -webkit-transition: -webkit-transform 0.1s linear;

    transition: transform 0.1s linear;

}

#nav li {

    background: url('menu_line.png') no-repeat scroll right 5px transparent;

    float: left;

    position: relative;

}

#nav li a {

    color: #FFFFFF;

    display: block;

    float: left;

    font-weight: normal;

    height: 30px;

    padding: 23px 20px 0;

    position: relative;

    text-decoration: none;

    text-shadow: 1px 1px 1px #000000;

}

#nav li:hover > a {

    color: #00B4FF;

}

#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {

    background: none repeat scroll 0 0 #121212;

    outline: 0 none;

}

#nav li:hover ul.subs {

    left: 0;

    top: 53px;

    width: 180px;

 

    -moz-transform: scaleY(1);

    -ms-transform: scaleY(1);

    -o-transform: scaleY(1);

    -webkit-transform: scaleY(1);

    transform: scaleY(1);

}

#nav ul li {

    background: none;

    width: 100%;

}

#nav ul li a {

    float: none;

}

#nav ul li:hover > a {

    background-color: #121212;

    color: #00B4FF;

}

#lavalamp {

    background: url('lavalamp.png') no-repeat scroll 0 0 transparent;

    height: 16px;

    left: 13px;

    position: absolute;

    top: 0px;

    width: 64px;

 

    -moz-transition: all 300ms ease;

    -ms-transition: all 300ms ease;

    -o-transition: all 300ms ease;

    -webkit-transition: all 300ms ease;

    transition: all 300ms ease;

}

#lavalamp:hover {

    -moz-transition-duration: 3000s;

    -ms-transition-duration: 3000s;

    -o-transition-duration: 3000s;

    -webkit-transition-duration: 3000s;

    transition-duration: 3000s;

}

#nav li:nth-of-type(1):hover ~ #lavalamp {

    left: 13px;

}

#nav li:nth-of-type(2):hover ~ #lavalamp {

    left: 90px;

}

#nav li:nth-of-type(3):hover ~ #lavalamp {

    left: 170px;

}

#nav li:nth-of-type(4):hover ~ #lavalamp {

    left: 250px;

}

#nav li:nth-of-type(5):hover ~ #lavalamp {

    left: 330px;

}

#nav li:nth-of-type(6):hover ~ #lavalamp {

    left: 410px;

}

#nav li:nth-of-type(7):hover ~ #lavalamp {

    left: 490px;

}

#nav li:nth-of-type(8):hover ~ #lavalamp {

    left: 565px;

}

 


ДЕМО                СКАЧАТЬ ИСХОДНИК

Источник урока


Заключение

Надеюсь, вам понравилось меню CSS3, не забудьте сказать спасибо и оставить комментарий  J  Удачи!

Категория: CSS//HTML//JS | Просмотров: 776 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди