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

Всегда в теме

Статистика


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


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

Рекомендуем



Главная » 2013 » Март » 21 » Музыкальное выпадающее меню


11:14
Музыкальное выпадающее меню

Музыкальное выпадающее меню


Сегодня создадим музыкальные выпадающего меню (HTML5 + CSS3). Это меню имеет css3 анимационный эффект (эффект выпадения при наведении на элементы меню). Мы также использовали HTML5 аудио элементы для того, чтобы добавить музыку к этому меню. Если вы готовы, начнем. 

 

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


Шаг 1. HTML

Как всегда, мы должны подготовить HTML макет нашего меню. Каждый элемент меню (которое на самом деле представляет собой неупорядоченный список элементов) имеет якоря, или вложенные уровни.

<ul id="nav">

    <li><a href="#">Menu element 1</a>

        <ul>

            <li><a href="#">Submenu element</a></li>

            .....

        </ul>

    </li>

    <li><a href="#">Menu 4</a></li>

    .....

</ul>

 

Шаг 2. CSS

Вот CSS стили нашего меню:

#nav,#nav ul {

    list-style: none outside none;

    margin: 0;

    padding: 0;

}

#nav {

    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;

    font-size: 13px;

    height: 36px;

    list-style: none outside none;

    margin: 40px auto;

    text-shadow: 0 -1px 3px #202020;

    width: 700px;

 

    /* border radius */

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px;

 

    /* box shadow */

    -moz-box-shadow: 0px 3px 3px #cecece;

    -webkit-box-shadow: 0px 3px 3px #cecece;

    box-shadow: 0 3px 4px #8b8b8b;

 

    /* gradient */

    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));

    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);

    background-color: #5f5f5f;

}

#nav li {

    border-bottom: 1px solid #575757;

    border-left: 1px solid #929292;

    border-right: 1px solid #5d5d5d;

    border-top: 1px solid #797979;

    display: block;

    float: left;

    height: 34px;

    position: relative;

    width: 105px;

}

#nav > li:first-child {

    border-left: 0 none;

    margin-left: 5px;

}

#nav ul {

    left: -9999px;

    position: absolute;

    top: -9999px;

    z-index: 2;

}

#nav ul li {

    background: none repeat scroll 0 0 #838383;

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

    width: 100%;

}

#nav li a {

    color: #FFFFFF;

    display: block;

    line-height: 34px;

    outline: medium none;

    text-align: center;

    text-decoration: none;

 

    /* gradient */

    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));

    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);

    background-color: #5f5f5f;

}

 

/* keyframes #animation */

@-webkit-keyframes animation {

    0% {

        -webkit-transform: scale(1);

    }

    30% {

        -webkit-transform: scale(1.2);

    }

    100% {

        -webkit-transform: scale(1.1);

    }

}

@-moz-keyframes animation {

    0% {

        -moz-transform: scale(1);

    }

    30% {

        -moz-transform: scale(1.2);

    }

    100% {

        -moz-transform: scale(1.1);

    }

}

#nav li > a:hover {

    /* CSS3 animation */

    -webkit-animation-name: animation;

    -webkit-animation-duration: 0.3s;

    -webkit-animation-timing-function: linear;

    -webkit-animation-iteration-count: 1;

    -webkit-animation-direction: normal;

    -webkit-animation-delay: 0;

    -webkit-animation-play-state: running;

    -webkit-animation-fill-mode: forwards;

 

    -moz-animation-name: animation;

    -moz-animation-duration: 0.3s;

    -moz-animation-timing-function: linear;

    -moz-animation-iteration-count: 1;

    -moz-animation-direction: normal;

    -moz-animation-delay: 0;

    -moz-animation-play-state: running;

    -moz-animation-fill-mode: forwards;

}

#nav li:hover ul {

    left: 0;

    top: 34px;

    width: 150px;

}

 

Когда вы наведите курсор мыши на элемент списка, он будет подпрыгивать один раз, чтобы имитировать эффект биений.

Шаг 3. HTML5 JavaScript

Теперь, пришло время добавить музыку в меню. В начале, мы должны подготовить новый пустой массив (чтобы разместить наши Audio объекты), а затем, когда страница готова, инициализировать музыку:

// variables

var aLoops = []; // sound loops

 

// initialization

addEvent(window, 'load', function (event) {

 

    // load music files

    aLoops[0] = new Audio('media/background.ogg');

    aLoops[0].volume = 0.3;

    aLoops[1] = new Audio('media/button.ogg');

    aLoops[1].volume = 1.0;

    aLoops[2] = new Audio('media/button_click.ogg');

    aLoops[2].volume = 1.0;

 

    aLoops[0].addEventListener('ended', function() { // loop background sound

        this.currentTime = 0;

        this.play();

    }, false);

    aLoops[0].play();

});

 

Теперь, мы должны добавить обработчики для разных событий: Наведение курсора мыши, MouseOut и нажмите кнопки:

// all the buttons

var aBtns = document.querySelectorAll('#nav li');

 

// onmouseover event handler

addEvent(aBtns, 'mouseover', function (event) {

    aLoops[1].currentTime = 0;

    aLoops[1].play(); // play click sound

});

 

// onmouseout event handler

addEvent(aBtns, 'mouseout', function (event) {

    aLoops[1].currentTime = 0;

    aLoops[1].pause(); // play click sound

});

 

// onclick event handler

addEvent(aBtns, 'click', function (event) {

    aLoops[2].currentTime = 0;

    aLoops[2].play(); // play click sound

});

 

И вуаля, мы завершили его.


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

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

Поиск

Вход

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

    Категории

    Заходи не жди