漂亮折叠 展开 隐藏 jQuery 下拉菜单

简介:

曾祥展1        曾祥展2

 

<div class=wpn_wrapper>
<div class=wpn_right>
<span class=wpn_heading2> Friends 
 <A class="wpn_toggle-expand wpn_toggle-hide wpn_wpn_toggle-hide" href="#"></A> </span>
<div style="DISPLAY: block" class="wpn_box wpn_expandable">
<div class=textwidget>
<div>
<A href="#"> <B>学无止境?</B></A> <br>
<A href="#"> <B>学?无?止?境?</B></A> <br>
<A href="#"> <B>学?无?止?境?</B></A> <br>
<A href="#"> <B>学?无?止?境?</B></A> <br>
<A href="#"> <B>学?无?止?境?</B></A> <br>
<A href="#"> <B>学?无?止?境?</B></A> <br>
<A href="#"> <B>学?无?止?境?</B></A> <br>
</div>
</div>
</div>
<div class=wpn_clear></div>
<div class=wpn_box-bottom></div>
</div>
</div >

 

 

<style type="text/css">
a img {border:0;}
.wpn_clear {clear:both;}
a {text-decoration:none;color:#fff;}
a:hover{text-decoration:none;}
body {background:#000 url(img/bg.jpg) repeat-x top center;font-family:Arial;font-size:12px;}
.wpn_right {float:right;width:300px;overflow:hidden;}
.wpn_right .wpn_heading2:first-child {margin-top:0;}
.wpn_right .wpn_box {padding:5px;background:#222 url(img/box_bg.gif) repeat-x top;float:left;width:290px;}
.wpn_right .wpn_box-bottom {background:url(img/box_bottom.gif) repeat-x top;height:10px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;margin-bottom:15px;clear:both;}
.wpn_heading2 {display:block;width:300px;height:42px;background:url(img/heading_right.gif);font-size:16px;line-height:40px;font-weight:bold;text-transform:uppercase;text-indent:10px;position:relative;color:#999;margin-top:15px;}
.wpn_heading2 a.wpn_toggle-expand {display:block;width:28px;height:27px;background:url(img/toggle_right.gif) no-repeat 0 0;line-height:27px;text-indent:-999px;overflow:hidden;position:absolute;top:7px;right:7px;outline:none;}
.wpn_heading2 a.wpn_toggle-hide {background-position:-28px 0;}
.wpn_heading2 a.wpn_toggle-show {background-position:0 0;}
.wpn_heading2 a {color:#999;}
.wpn_heading2 a img {display:none;}
</style>

 

<script src="Script/jquery-1.4.min.js" type="text/javascript"> </script>
 jQuery(document).ready(function(){
jQuery("a.wpn_toggle-expand").each(function(i) {
var div = jQuery(this).parent('span').next('div.wpn_expandable');
jQuery(this).click(function(e){
e.preventDefault();
if(jQuery(div).css('display')=='none') {
jQuery(this).removeClass('wpn_toggle-show');
jQuery(this).addClass('wpn_wpn_toggle-hide');
}
else {
jQuery(this).removeClass('wpn_wpn_toggle-hide');
jQuery(this).addClass('wpn_toggle-show');
}
div.slideToggle("slow");
});
});
 });

 


2011-5-21 update:

 

下载:

漂亮下拉菜单

 

    本文转自曾祥展博客园博客,原文链接:http://www.cnblogs.com/zengxiangzhan/archive/2010/01/21/1653177.html,如需转载请自行联系原作者



相关文章
|
4天前
【sgCollapseBtn】自定义组件:底部折叠/展开按钮
【sgCollapseBtn】自定义组件:底部折叠/展开按钮
|
5月前
|
JavaScript 前端开发
jquery导航选中按钮颜色变化
jquery导航选中按钮颜色变化
30 0
|
5月前
|
前端开发
css动画效果代码淡入淡出折叠展开点击悬浮
css动画效果代码淡入淡出折叠展开点击悬浮
|
7月前
|
JavaScript
jQuery文本段落展开和折叠效果
jQuery文本段落展开和折叠效果
|
前端开发 JavaScript
css实现列表展开与收起
今天讲ss实现列表展开与收起
478 0
|
前端开发 JavaScript
【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持下拉列表框和列表框。   先说一下步骤和使用方法: 1、在页面里设置列表框 城市: 请选择沈阳抚顺鞍山营口大连 区县: 请先选择城市 街道: 请先选择区县 社区: 请先选择街道   排版布局可以随意设定,id、name、css等都没有任何限制。
1165 0
CSS3 3D折叠展开动画菜单
在线演示 本地下载
1582 0
|
JavaScript
jQuery多层级垂直手风琴菜单
在线演示 本地下载
1071 0
|
JavaScript 前端开发
jQuery案例demo -- 鼠标移入显示蒙版
效果展示 效果展示.png HTML代码: 摄影小白成长记 The best preparation for tomorrow is doing your best today.
1008 0