jquery特效-鼠标点击上下伸缩式菜单
来源：互联网 发布：火车采集器 linux 编辑：程序博客网 时间：2024/04/30 23:49
<!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>
<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>
效果图如下：
0 0
- jquery特效-鼠标点击上下伸缩式菜单
- jQuery 导航菜单点击伸缩展开效果的JS特效
- Jquery鼠标右键点击弹出菜单
- 后台左侧菜单点击上下滑动显示jquery
- jquery 实现伸缩菜单效果
- jquery鼠标拖动特效
- Javascript 鼠标点击冒泡特效
- JQuery特效，上下移动的选项卡
- JQuery 实例之 伸缩的菜单
- 用jquery实现菜单的伸缩 功能
- jquery鼠标滑过特效
- Jquery特效五:图片点击变换特效
- 鼠标点击的下拉菜单！
- jquery特效 简易下拉菜单
- [整理]网页自定义鼠标右键菜单特效
- jquery鼠标悬停图片上下滚动切换
- jquery菜单式图片轮播特效仿淘宝
- jQuery响应式多级下拉导航菜单特效
- Java之System.arraycopy实现数组拷贝-类似C语言的memcpy
- 【MyBatis框架点滴】——MyBatis二级缓存
- 翻转方阵
- client.c和server.c 网络套接字socket编程热身程序
- loaded the "XXXView" nib but the view outlet was not set 解决方案
- jquery特效-鼠标点击上下伸缩式菜单
- 个人博客
- 安心练打字吧
- Hotfix安卓热部署方案https://github.com/dodola/HotFix
- Java环境变量配置备忘
- 十四.给UIView子类设置阴影，包括各种控件
- HTML总结
- [!] The dependency `AFNetworking (~> 3.1.0)` is not used in any concrete target. --------cocoapods引用
- CNN
