精华内容
下载资源
问答
  • html下拉菜单

    2013-02-15 18:52:34
    纯css得下拉菜单但是不支持跨iframe框架,
  • 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...

    html 下拉菜单不能下拉

    Musical drop down menu
    Musical drop down menu

    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)

    Musical drop down menu

    Musical drop down menu

    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>
    
    
    <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 #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;
    }
    
    
    #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;
    }
    
    

    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:

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

    
    // 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();
    });
    
    
    // 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();
    });
    
    

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

    然后,我们应该将处理程序添加到不同的事件中:mouseover,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
    });
    
    
    // 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
    });
    
    

    And voila, we have finalized it.

    瞧,我们已经完成了它。

    现场演示

    结论 (Conclusion)

    Hope that you’ve enjoyed with our new menu. Good luck!

    希望您喜欢我们的新菜单。 祝好运!

    翻译自: https://www.script-tutorials.com/musical-drop-down-menu/

    html 下拉菜单不能下拉

    展开全文
  • HTML下拉菜单

    千次阅读 2010-02-17 17:09:00
    一个简单的下拉菜单,主要说明CSS中posistion的作用。浮动窗体<!--.submenu { background: #ff3398; position: absolute; display: none;}.siteactive { color: red;}-->.submenu { background: #ff339

    一个简单的下拉菜单,主要说明CSS中posistion的作用。


    这些内容完全可以用JS实现。

    展开全文
  • html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出现下拉菜单,用户...

    html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单?

    很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出现下拉菜单,用户就可以点击其中一个选项来访问来进入另外一个网址。

    打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)

    一:首先我们打开Notepad ++,如果使用Notepad ++的话,请在HTML窗口顶部的“ 语言”菜单设置成“H”。

    二:创建下拉菜单代码,输入以下代码以确定下拉菜单的大小和颜色,确保将“#”替换为您要使用的数字(数字越大,下拉菜单越大)。您还可以使用您选择的任何颜色(或HTML颜色代码)替换“背景颜色”和“颜色”值。

    三:表示您要将链接放在下拉菜单中,也可以将添加指向下拉菜单的链接,您可以通过输入代码将它们放在下拉菜单中。

    四:创建下拉菜单的外观,可以确定下拉菜单的大小,以及其他网页元素时的位置以及颜色。请务必将“min-width”部分的“#”替换为编号(例如250),并将“background-color”标题更改为自己喜欢的颜色。

    五:在下拉菜单的内容中添加细节,当我们解决了下拉菜单的文本颜色和下拉菜单按钮的大小,请务必将“#”替换为像素数,来指定按钮的大小。

    六:编辑下拉菜单的悬停操作,将鼠标悬停在下拉菜单按钮上时,需要更改几种颜色,第一个“背景颜色”线指的是在下拉菜单中选择出现的颜色变化。

    七:下一步我们来创建下拉按钮的名称,输入以下代码,确保将“名称”替换为您想要的下拉按钮名称(例如,菜单):

    < divclass = “dropdown” >

     < buttonclass = “dropbtn” >名称< / button>

    < divclass = “dropdown-content” >

    八:添加下拉菜单的链接,下拉菜单中的每个子选项都应链接到某个内容,可以是网站上的页面或外部网站,可以添加到下拉菜单中,确保http://www.php.cn/使用链接的地址(保留引号)和“名称”替换链接的名称正常。

    代码实例:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    .dropbtn {

        background-color: black;

        color: white;

        padding: #px;

        font-size: #px;

        border: none;

    }

    .dropdown {

        position: relative;

        display: inline-block;

    }

    .dropdown-content {

        display: none;

        position: absolute;

        background-color: lightgrey;

        min-width: #px;

        z-index: 1;

    }

    .dropdown-content a {

        color: black;

        padding: #px #px;

        text-decoration: none;

        display: block;

    }

    .dropdown-content a:hover {background-color: white;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown:hover .dropbtn {background-color: grey;}

    </style>

    </head>

    <body>

    <divclass="dropdown">

    <buttonclass="dropbtn">Name</button>

    <divclass="dropdown-content">

    <ahref="http://www.php.cn/">Name</a>

    <ahref="http://www.php.cn/">Name</a>

    <ahref="http://www.php.cn/">Name</a>

    </div>

    </div>

    </body>

    </html>

    效果如图:

     

    以上就是对html下拉菜单怎么做?高手教你如何在HTML和CSS中创建下拉菜单的全部介绍,需要更多内容请关注我。

    展开全文
  • css+html 下拉菜单

    2013-04-11 23:03:24
    css+html 下拉菜单
  • 在浏览网站的时候,我们经常可以看到下拉菜单的效果,所以网页的开发过程中下拉菜单有时是不得不使用的,今天的这篇文章就来给大家分享一下html下拉菜单的实现方法,有需要的朋友可以参考一下。话不多说,让我们来...

    在浏览网站的时候,我们经常可以看到下拉菜单的效果,所以网页的开发过程中下拉菜单有时是不得不使用的,今天的这篇文章就来给大家分享一下html下拉菜单的实现方法,有需要的朋友可以参考一下。

    话不多说,让我们来直接看正文~

    在html中有一个select标签可以创建单选和多选菜单,select标签中的option属性用于定义列表中的可用选项。

    下面我们就来看看html下拉菜单的具体代码:

    城市

    合肥

    芜湖

    南京

    高邮

    html下拉菜单效果如下:

    7411bf1f999d52a3138715a9383854d3.png

    在这里说明一下:select 元素是一种表单控件,可用于在表单中接受用户输入。

    上面的这个html下拉菜单感觉太过单调,接下来我们就看看利用css来实现一个好看一点的下拉菜单。

    html+css实现的下拉菜单代码:

    .a{

    width: 200px;

    }

    .b{

    width: 100px;

    height: 50px;

    text-align: center;

    line-height: 50px;

    background: lightblue;

    font-size: 30px;

    }

    .c{

    height: 200px;

    width: 100px;

    display: none;

    background: gray;

    }

    .b:hover{

    background: green;

    cursor: pointer;

    }

    .a:hover .c{

    display: block;

    }

    a{

    display: block;

    text-decoration: none;

    height: 40px;

    text-align: center;

    line-height: 40px;

    color: #ccc;

    }

    a:hover{

    background: green;

    color: pink;

    }

    下拉菜单效果如下:

    5c4f144b8d334d8874c4ba017c08b49c.png

    说明:上述代码中:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

    本篇文章到这里就全部结束了,更多精彩内容大家可以关注php中文网的相关栏目!!!

    展开全文
  • html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单?很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出现下拉菜单,用户就...
  • 主要介绍了html下拉菜单提交后如何保留选中值而不返回默认值,方法虽简单,但比较实用,需要的朋友可以参考下
  • html下拉菜单栏代码

    千次阅读 2019-10-11 18:30:40
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> 纯CSS实现下拉菜单</title> <style> * {...
  • 新手,临时被安排写html,涉及到筛选问题,第一个下拉菜单可以通过我预设的值,就称为type吧,type有123456几个大类,第二个下拉菜单是根据php链接mysql查出来的一堆数据,需要在选择第一个下拉菜单后,第二个下拉...
  • html下拉菜单提交后保留选中值

    千次阅读 2014-08-11 17:29:44
    html下拉菜单提交后保留选中值而不返回默认值
  • 很多人学习html之后,想动手实践一下一些特效,很多人都想写二级菜单,那么,html下拉菜单怎么做?今天就来分享一下下拉菜单怎么做?程序猿的生活:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加...
  • html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单?很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出现下拉菜单,用户就...
  • html下拉菜单的实现

    2015-05-13 14:33:00
    这是简单的下拉菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">...
  • ** 方法一:纯css实现下拉菜单 ** <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ...
  • html 下拉菜单 被图片遮挡住了

    万次阅读 2016-08-19 16:21:34
    解决方案: 可以给当前下拉菜单设置为最高层,让他在页面文档流的上面就可以了 给所在的下拉菜单添加以下样式就可以了: position:absolute; z-index:10;
  • html 下拉菜单select 获取数据库内容

    万次阅读 2018-01-08 17:38:01
    //页面上的<html:select>元素 if(userList!=null){ //后台传回来的select选项 for(var i=0;i;i++){ //遍历后台传回的结果,一项项往select中添加option unitObj.options.add(new Option(userList[i].name,user...
  • 使用JS实现年月日下拉列表的选择 如下图: 具体操作: 两个js文件,设置效果 在.html中导入两个外部js文件 jquery.time.js $(function () { $.ms_DatePicker({ YearSelector: ".sel_year", MonthSelector: "....
  • html 下拉菜单被挡住解决办法

    千次阅读 2019-10-16 19:55:16
    问题: 可以发现内容分类被富文本遮挡住了 思路:内容分类的div层级比内容div的层级低 方法:改层级 代码:style="z-index: 100; position: relative;"
  • 最简单的html下拉菜单级联

    千次阅读 2019-05-23 20:52:00
    DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>下拉框城市联动</title> <style> select {width: 200px; height: 30px;} <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,755
精华内容 2,302
关键字:

html下拉菜单