jquery特效-鼠标点击上下伸缩式菜单
2016-06-27 19:58
483 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jquery特效-鼠标点击上下伸缩式菜单 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--css-->
<style type="text/css">
*{padding:0px;margin:0px;}
.nav{width:210px; background:#282828;}
.nav .logo{width:210px; height:52px; text-align:center;}
.nav ul {border-top:1px solid #000; border-bottom:1px solid #424242;}
.nav ul li{color:#fff; width:210px; border-top:1px solid #424242; border-bottom:1px solid #000;list-style-type:none; font-size:14px; font-family:"微软雅黑"; line-height:50px; text-indent:30px;}
.nav ul li img{margin-right:5px;}
.nav ul li .menu{width:210px; height:380px; background:rgba(8,6,4,0.6); display:none;/*隐藏*/}
.nav ul li.hover{background:rgba(8,2,4,0.5);}
.nav .menu .item a{text-decoration:none; font-size:14px; color:#ddd;}
</style>
</head>
<body>
<div class="nav">
<div class="logo"><img src="img/logo.png" /></div>
<ul>
<li>
<img src="img/text_block.png" align="absmiddle"/>菜单1
<div class="menu">
<ul class="item">
<li><img src="img/html.png" align="absmiddle"/><a href="#">选项1</a></li>
<li><img src="img/html.png" align="absmiddle"/><a href="#">选项2</a></li>
<li><img src="img/html.png" align="absmiddle"/><a href="#">选项3</a></li>
<li><img src="img/html.png" align="absmiddle"/><a href="#">选项4</a></li>
</ul>
</div>
</li>
<li>
<img src="img/pen.png" align="absmiddle"/>菜单2
<div class="menu">
<ul class="item">
<li><img src="img/tm_edit.png" align="absmiddle"/><a href="#">选项1</a></li>
<li><img src="img/tm_edit.png" align="absmiddle"/><a href="#">选项2</a></li>
<li><img src="img/tm_edit.png" align="absmiddle"/><a href="#">选项3</a></li>
<li><img src="img/tm_edit.png" align="absmiddle"/><a href="#">选项4</a></li>
</ul>
</div>
</li>
<li>
<img src="img/reload.png" align="absmiddle"/>菜单3
<div class="menu">
<ul class="item">
<li><img src="img/css.png" align="absmiddle"/><a href="#">选项1</a></li>
<li><img src="img/css.png" align="absmiddle"/><a href="#">选项2</a></li>
<li><img src="img/css.png" align="absmiddle"/><a href="#">选项3</a></li>
<li><img src="img/css.png" align="absmiddle"/><a href="#">选项4</a></li>
</ul>
</div>
</li>
<li>
<img src="img/setting.png" align="absmiddle"/>菜单4
<div class="menu">
<ul class="item">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
<li><a href="#">选项4</a></li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".nav ul li").click(function(){
if($(this).hasClass("hover")){
$(this).removeClass("hover");
}else{
$(this).addClass("hover");
}
$(this).find(".menu").slideToggle("slow");//
//除了点击之外的其它的li 全部隐藏
$(this).siblings().removeClass("hover").find(".menu").slideUp();
});
</script>
</body>
</html>
效果图如下：
<html>
<head>
<title> jquery特效-鼠标点击上下伸缩式菜单 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--css-->
<style type="text/css">
*{padding:0px;margin:0px;}
.nav{width:210px; background:#282828;}
.nav .logo{width:210px; height:52px; text-align:center;}
.nav ul {border-top:1px solid #000; border-bottom:1px solid #424242;}
.nav ul li{color:#fff; width:210px; border-top:1px solid #424242; border-bottom:1px solid #000;list-style-type:none; font-size:14px; font-family:"微软雅黑"; line-height:50px; text-indent:30px;}
.nav ul li img{margin-right:5px;}
.nav ul li .menu{width:210px; height:380px; background:rgba(8,6,4,0.6); display:none;/*隐藏*/}
.nav ul li.hover{background:rgba(8,2,4,0.5);}
.nav .menu .item a{text-decoration:none; font-size:14px; color:#ddd;}
</style>
</head>
<body>
<div class="nav">
<div class="logo"><img src="img/logo.png" /></div>
<ul>
<li>
<img src="img/text_block.png" align="absmiddle"/>菜单1
<div class="menu">
<ul class="item">
<li><img src="img/html.png" align="absmiddle"/><a href="#">选项1</a></li>
<li><img src="img/html.png" align="absmiddle"/><a href="#">选项2</a></li>
<li><img src="img/html.png" align="absmiddle"/><a href="#">选项3</a></li>
<li><img src="img/html.png" align="absmiddle"/><a href="#">选项4</a></li>
</ul>
</div>
</li>
<li>
<img src="img/pen.png" align="absmiddle"/>菜单2
<div class="menu">
<ul class="item">
<li><img src="img/tm_edit.png" align="absmiddle"/><a href="#">选项1</a></li>
<li><img src="img/tm_edit.png" align="absmiddle"/><a href="#">选项2</a></li>
<li><img src="img/tm_edit.png" align="absmiddle"/><a href="#">选项3</a></li>
<li><img src="img/tm_edit.png" align="absmiddle"/><a href="#">选项4</a></li>
</ul>
</div>
</li>
<li>
<img src="img/reload.png" align="absmiddle"/>菜单3
<div class="menu">
<ul class="item">
<li><img src="img/css.png" align="absmiddle"/><a href="#">选项1</a></li>
<li><img src="img/css.png" align="absmiddle"/><a href="#">选项2</a></li>
<li><img src="img/css.png" align="absmiddle"/><a href="#">选项3</a></li>
<li><img src="img/css.png" align="absmiddle"/><a href="#">选项4</a></li>
</ul>
</div>
</li>
<li>
<img src="img/setting.png" align="absmiddle"/>菜单4
<div class="menu">
<ul class="item">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
<li><a href="#">选项4</a></li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".nav ul li").click(function(){
if($(this).hasClass("hover")){
$(this).removeClass("hover");
}else{
$(this).addClass("hover");
}
$(this).find(".menu").slideToggle("slow");//
//除了点击之外的其它的li 全部隐藏
$(this).siblings().removeClass("hover").find(".menu").slideUp();
});
</script>
</body>
</html>
效果图如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery学习之：Validation表单验证插件
- jquery-validation 使用
- jQuery图片延迟加载插件jQuery.lazyload
- 原创新闻 11 个最佳 jQuery 滚动条插件
- 15个带示例的jQuery滚动条插件
- jQuery函数的第二个参数获取指定上下文中的DOM元素
- jQuery用法小结
- Jquery删除table里面checkbox选中的多个行
- 仿阿里云购买时长选择
- jQuery 中 attr 和 prop 方法的区别
- jQuery插件的几种写法
- Jquery和BigFileUpload实现大文件上传及进度条显示
- jquery实现腾讯夜学堂功能模块开发
- jQuery LigerUI 插件介绍及使用之ligerTree
- C#项目发布到IIS后CSS及Jquery出现问题的几种情况
- Jquery用法
- jquery获取所有checked的value
- jquery的链式操作以及事件绑定
- jQuery的deferred对象详解
- 详解强大的jQuery选择器之过滤选择器、表单选择器