网页特效

select下拉列表美化特效(用jquery和ul实现)

位置:首页 > 网页特效 > 窗口特效,2013-02-03
这是用select下拉列表美化特效(用jquery和ul实现)现在网站为提高用户体验效果,都采用了美化下拉列表为主,原有的select下拉列表元素样式比较难控制,兼容性比较差,用上了它往往会破坏整体展...

这是用select下拉列表美化特效(用jquery和ul实现)


现在网站为提高用户体验效果,都采用了美化下拉列表为主,原有的select下拉列表元素样式比较难控制,兼容性比较差,用上了它往往会破坏整体展示效 果,为了让下拉列表变成好看,只能用其它方法来代替select了,接下来教大家怎么实现,文章后台带有打包下载和演示例子。

 

第一步:

引入Jquery插件文件如下:

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

 

第二步:

样式代码如下:

1 body {padding:10px;}
2 * {margin:0;padding:0;font-size:12px;}
3 ul,li {list-style-type:none;}
4 .select_box {width:150px;border:1pxsolid#ccc;padding-right:20px;padding-left:10px;background:url(107.gif)no-repeat160pxcenter;position:relative;}
5 .select_box span {cursor:pointer;display:block;line-height:25px;width:100%;height:25px;overflow:hidden;}
6 .select_box ul li {cursor:pointer;}
7 .son_ul {width:179px;position:absolute;left:0;top:25px;border:1pxdashed#ccc;background:#fff;}
8 .son_ul li {display:block;line-height:25px;padding-left:10px;width:169px}
9 .hover {background:#ccc;}

 

第三步:

Jquery代码如下:

01 $(document).ready(function(){
02     $('.son_ul').hide();//初始ul隐藏
03     $('.select_box span').hover(function(){//鼠标移动函数
04         $(this).parent().find('ul.son_ul').slideDown(); //找到ul.son_ul显示
05         $(this).parent().find('li').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')});//li的hover效果
06         $(this).parent().hover(function(){},
07             function(){
08                 $(this).parent().find("ul.son_ul").slideUp();
09             }
10         );
11         },function(){}
12         );
13         $('ul.son_ul li').click(function(){
14             $(this).parents('li').find('span').html($(this).html());
15             $(this).parents('li').find('ul').slideUp();
16         });
17     }
18 );

 

第四步:

html代码如下:

01 <ulid="main_box">
02   <liclass="select_box">
03     <span>请选择...</span>
04     <ulclass="son_ul">
05       <li>选项一</li>
06       <li>选项二</li>
07       <li>选项三</li>
08       <li>选项四</li>
09       <li>选项五</li>
10     </ul>
11   </li>
12 </ul>

效果如下:

jquery实现用ul模拟表单select列表菜单特效


TAGS:select美化网页特效

猜你喜欢

NewHot