本文目录
用jquery怎样做一个有弹动效果的下拉菜单
/*样式*/
*{margin:0;padding:0;}
ul,li{list-style:none;}
ul{height:50px; width:1000px; margin:50px auto;}
ul li{width:25%; height:50px; float:left; text-align:center; position:relative;}
ul li a{display:block; line-height:50px; color:#f00;}
ul li dl{position:absolute; left:0; top:100%; width:100%; display:none; overflow:hidden;}
ul li dl dt{height:30px; width:100%; float:left;}
ul li dl dt a{line-height:30px !important; color:#000 !important;}
html
《ul》
《li》
《a href=““》导航1《/a》
《dl》
《dt》《a href=““》下拉1-1《/a》《/dt》
《dt》《a href=““》下拉1-2《/a》《/dt》
《dt》《a href=““》下拉1-3《/a》《/dt》
《dt》《a href=““》下拉1-4《/a》《/dt》
《/dl》
《/li》
《li》
《a href=““》导航2《/a》
《dl》
《dt》《a href=““》下拉2-1《/a》《/dt》
《dt》《a href=““》下拉2-2《/a》《/dt》
《/dl》
《/li》
《li》
《a href=““》导航3《/a》
《dl》
《dt》《a href=““》下拉3-1《/a》《/dt》
《dt》《a href=““》下拉3-2《/a》《/dt》
《dt》《a href=““》下拉3-3《/a》《/dt》
《/dl》
《/li》
《li》
《a href=““》导航4《/a》
《dl》
《dt》《a href=““》下拉4-1《/a》《/dt》
《dt》《a href=““》下拉4-2《/a》《/dt》
《dt》《a href=““》下拉4-3《/a》《/dt》
《dt》《a href=““》下拉4-4《/a》《/dt》
《dt》《a href=““》下拉4-5《/a》《/dt》
《/dl》
《/li》
《/ul》
js,记得嵌入jquery库
$(“li“).mouseenter(function(){
var dl = $(this).find(“dl“);
var hei = $(this).find(“dl“).height();
dl.show();
dl.height(0);
dl.animate({height:hei},“fast“,function(){
$(this).animate({height:hei/3},300,function(){
$(this).animate({height:hei},300,function(){
$(this).animate({height:hei/2},300,function(){
$(this).animate({height:hei},300);
});
});
});
});
});
$(“li“).mouseleave(function(){
$(this).find(“dl“).hide();
});
粗糙的写了一个例子
jquery实现html的控件select的缓慢下拉效果
的确有这样的效果，但用select标签本身是做不到的，一般是用图层重新和表格重新画一个类似select框的东西平时把表格隐藏并且讲的高度设为0，遇到事件触发时，用动画慢慢把高度拉大。而且select的外观是由系统外观决定的无法改变，一般看到的网页上的很漂亮的下拉菜单，如果不是用flash做的话，都是用其他标签重画的。
