1500字范文 > html 下拉菜单不能下拉_音乐下拉菜单

html 下拉菜单不能下拉_音乐下拉菜单

时间：2023-06-03 21:18:42

html 下拉菜单不能下拉

Musical drop down menu

音乐下拉菜单

Our new tutorial tells about developing cool musical drop down menu (html5 + css3). This menu has css3 animation effects (neat hover effect to menu elements). We also used html5 Audio element in order to add music to this menu. If you are ready, lets start.

我们的新教程介绍了如何开发酷炫的音乐下拉菜单(html5 + css3)。此菜单具有css3动画效果(对菜单元素具有整洁的悬停效果)。我们还使用了html5 Audio元素来向此菜单添加音乐。如果您准备好了，那就开始吧。

最后结果 (Final result)

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

打包下载

步骤1. HTML (Step 1. HTML)

As the first, we should prepare HTML layout of our menu. Each menu element (which actually is a unordered list item) has anchor, or nested level.

首先，我们应该准备菜单HTML布局。每个菜单元素(实际上是无序列表项)都有锚点或嵌套级别。

<ul id="nav"><li><a href="#">Menu element</a><ul><li><a href="#">Submenu element</a></li>.....</ul></li><li><a href="#">Menu 4</a></li>.....</ul>

步骤2. CSS (Step 2. CSS)

Here are the CSS styles of our menu:

以下是菜单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 #20;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;}

When we hover over a list item, we will animate (scale) it once to emulate beat effect.

当我们将鼠标悬停在列表项上时，将对其进行动画处理(缩放)以模拟节拍效果。

步骤3. HTML5 JavaScript (Step 3. HTML5 JavaScript)

Now, it is time to add music here. In the beginning, we should prepare a new empty array (to keep our Audio objects), and then, when the page is ready, initialize the music:

现在，是时候在这里添加音乐了。首先，我们应该准备一个新的空数组(保留音频对象)，然后在页面准备好后初始化音乐：

// variablesvar aLoops = []; // sound loops// initializationaddEvent(window, 'load', function (event) {// load music filesaLoops[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 soundthis.currentTime = 0;this.play();}, false);aLoops[0].play();});

And then, we should add the handlers to different events: mouseover, mouseout and click:

然后，我们应该将处理程序添加到不同的事件中：mouseover，mouseout并单击：

// all the buttonsvar aBtns = document.querySelectorAll('#nav li');// onmouseover event handleraddEvent(aBtns, 'mouseover', function (event) {aLoops[1].currentTime = 0;aLoops[1].play(); // play click sound});// onmouseout event handleraddEvent(aBtns, 'mouseout', function (event) {aLoops[1].currentTime = 0;aLoops[1].pause(); // play click sound});// onclick event handleraddEvent(aBtns, 'click', function (event) {aLoops[2].currentTime = 0;aLoops[2].play(); // play click sound});

And voila, we have finalized it.

瞧，我们已经完成了它。