JavaScript模拟下拉菜单 JQuery 插件 v1.0

当前位置：网页特效 > 网页特效演示页

菜单导航特效日期时间特效背景图像特效图层样式特效鼠标特效代码页面窗口特效色彩表格特效文字特效代码表单按钮特效计数转换特效游戏网页特效实例网页特效

JavaScript模拟下拉菜单 JQuery 插件 v1.0 - 网页特效代码演示 - 特效代码运行

复制内容到剪贴板

代码:

<div id="test1" class="dropdown" tabIndex="0">
    <select name="birthday">
            <option>请选择</option>
            <option>1988</option>
            <option>1989</option>
            <option>1988</option>
            <option>1989</option>
    </select>
</div>

2、为需要转换的select绑定插件函数。
例如
$("#test1").sSelect();

复制内容到剪贴板

代码:

<div id="test1" class="dropdown" tabIndex="0">
    <select name="birthday">
            <option>请选择</option>
            <option>1988</option>
            <option>1988</option>
            <option>1988</option>
            <option>1989</option>
            <option>1988</option>
            <option>1989</option>
    </select>
</div>

3、按照您的想法定制模拟select的样式。

复制内容到剪贴板

代码:

/* select style */
/* must have this */
/* 必须包含的样式，不要删除，不过你可以修改样式名称*/
.dropdown {outline:none}
.dropdown h4{cursor:default;}
.dropdown h4.over {}
.dropdown div {display:none; position:relative;}
.dropdown ul{position:absolute;display:none;}
.dropdown ul li{}
.dropdown ul li.over{}
/* write you style here */
/* 按照你想的样子去定制 */
.dropdown {float:left;}
.dropdown h4{display:block; padding:0; margin:0; font:12px/23px Arial, Helvetica, sans-serif; width:146px;height:26px;background:url(select.gif) left top no-repeat;line-height:26px;text-indent:12px;border:solid 1px #83BBD9;}
.dropdown h4.over{background-position:left bottom;border-color:#B4C91A;}
.dropdown div {}
.dropdown ul{width:198px;border:1px solid #000}
.dropdown ul li{background:#FFF;height:20px;width:100%;padding:3px 0;text-indent:12px;cursor:default; font:400 12px/23px Arial, Helvetica, sans-serif;}
.dropdown ul li.over{background:#0A246A; color:#FFF;}
/* select style */

==============================完成========================

我在IE6 IE7 FF2 FF3上测试，未发现问题，如果您在其他浏览器上发现问题，请反馈。

演示：如果不能看，多刷新几次，或者直接下载压缩包。

以下是HTML网页特效代码，点击运行按钮可查看效果：
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下拉菜单</title> <style type="text/css"> * {margin:0; padding:0; border:none; list-style:none; font-size:1;} /* select style */ /* must have this*/ .dropdown {outline:none} .dropdown h4{cursor:default;} .dropdown h4.over {} .dropdown div {display:none; position:relative;} .dropdown ul{position:absolute;display:none;} .dropdown ul li{} .dropdown ul li.over{} /* write you style here */ .dropdown {float:left;} .dropdown h4{display:block; padding:0; margin:0; font:12px/23px Arial, Helvetica, sans-serif; width:146px;height:26px;background:url(http://www.zhangjingwei.com/select.gif) left top no-repeat;line-height:26px;text-indent:12px;border:solid 1px #83BBD9;} .dropdown h4.over{background-position:left bottom;border-color:#B4C91A;} .dropdown div {} .dropdown ul{width:198px;border:1px solid #000} .dropdown ul li{background:#FFF;height:20px;width:100%;padding:3px 0;text-indent:12px;cursor:default; font:400 12px/23px Arial, Helvetica, sans-serif;} .dropdown ul li.over{background:#0A246A; color:#FFF;} /* select style */ #test1, #test2 {float:left; margin-right:20px;} </style> <script type="text/javascript" src="http://www.zhangjingwei.com/jquery.js"></script> <script type="text/javascript" src="http://www.zhangjingwei.com/jquery.select.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#test1").sSelect(); $("#test2").sSelect(); $("#test3").sSelect(); //提交表单 $("#postform").click(function(){ $("#value").append("提交的表单值为:"+$("select option:selected").text()); }) }) </script> </head> <body> <div style="background:#000; height:10px; clear:both;"></div> <form action="#" method="get"> <div id="test1" class="dropdown" tabIndex="0"> <select name="birthday"> <option>请选择</option> <option>1988</option> <option>1988</option> <option>1988</option> <option>1989</option> <option>1988</option> <option>1989</option> </select> </div> <div id="test2" class="dropdown" tabIndex="1"> <select name="sex"> <option>性别</option> <option>男</option> <option>女</option> </select> </div> <div id="test3" class="dropdown" tabIndex="2"> <select name="student"> <option>请选择学历</option> <option>幼儿班</option> <option>小学</option> <option>初中</option> </select> </div> <div style="background:#000; height:10px; clear:both;"></div> <input type="button" id="postform" value="提交表单" style="border:1px solid #000; width:auto; height:23px; margin:30px 0 0;" /> </form> <br /> <br /> <div id="value"></div> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
[提示：可先修改代码再按运行]

当前位置：网页特效 > 网页特效演示页

JavaScript模拟下拉菜单 JQuery 插件 v1.0 - 网页特效代码演示 - 特效代码运行

代码:

代码:

代码:

刚被其它网友点击的网页特效

搜索查询面板

本月特效排行

本周特效排行

本日特效排行