Div simulated drop-down box effects, div simulated drop-down box Effects

Div simulated drop-down box effects, div simulated drop-down box Effects

I got it from the Internet and shared it if it feels good.

<style type="text/css">    body, ul, li    {        margin: 0;        padding: 0;        font-size: 13px;    }    ul, li    {        list-style: none;    }    #divselect    {        width: 186px;        margin: 80px auto;        position: relative;        z-index: 10000;    }    #divselect cite    {        width: 150px;        height: 24px;        line-height: 24px;        display: block;        color: #807a62;        cursor: pointer;        font-style: normal;        padding-left: 4px;        padding-right: 30px;        border: 3px solid #333333;        background: url(xjt.png) no-repeat right center;    }    #divselect ul    {        width: 184px;        border: 1px solid #333333;        background-color: #ffffff;        position: absolute;        z-index: 20000;        margin-top: -1px;        display: none;    }    #divselect ul li    {        height: 24px;        line-height: 24px;    }    #divselect ul li a    {        display: block;        height: 24px;        color: #333333;        text-decoration: none;        padding-left: 10px;        padding-right: 10px;    }    #divselect ul li a:hover    {        background-color: #CCC;    }    p    {        margin: 10px auto;        width: 920px;    }    #n    {        margin: 10px auto;        width: 920px;        border: 1px solid #CCC;        font-size: 12px;        line-height: 30px;    }    #n a    {        padding: 0 4px;        color: #333;    }</style>

　　

<Form id = "form1" action = "" method = "post"> <div id = "divselect" class = "divselect"> <cite> select special effect Category </cite> <ul> <li> <a href = "javascript :; "selectid =" 1 "> navigation menu </a> </li> <a href =" javascript :; "selectid =" 2 "> drop-down select effect </a> </li> <a href =" javascript :; "selectid =" 3 "> select simulation </a> </li> <a href =" javascript :; "selectid =" 4 "> DIVCSS5 effect </a> </li> <a href =" javascript :; "selectid =" 5 "> jquery drop-down effects </a> </li> </ul> </div> <br/> <div id =" divselect "class =" divselect1 "> <cite> select special effect Category </cite> <ul> <li> <a href =" javascript :; "selectid =" 6 "> navigation </a> </li> <a href =" javascript :; "selectid =" 7 "> drop-down </a> </li> <a href =" javascript :; "selectid =" 8 "> simulation </a> </li> <a href =" javascript :; "selectid =" 9 "> special effects </a> </li> <a href =" javascript :; "selectid =" 10 "> drop-down effects </a> </li> </ul> </div> <input name =" "value =" "id =" inputselect" // obtain the data </form> <input type = "button" value = "get" onclick = "get () "/>

 

$(function(){    $.divselect(".divselect", "#inputselect");    $.divselect(".divselect1", "#inputselect");});function get() {        var dd = document.getElementById("inputselect");        alert(dd.value);    }

Download Sample Code http://www.51xuediannao.com/js/jquery/divselect.html

How does div + css implement the drop-down box? Such? Can it be simulated by js? How can this problem be solved? Solution

The drop-down box cannot be controlled by css. The effect is actually the background image used in a div, the option is displayed by li, and the display effect is controlled by js.

Special effects of the select drop-down box written by div

The jqueryui plug-in has a ready-made effect called selectmenu. The Code is as follows (three different methods are available in the sample code ):
<! DOCTYPE html>