js 实现菜单上下显示附效果图


Posted in Javascript onNovember 21, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>http://flytosky.qzone.qq.com</title> 
<style type="text/css"> 
*{font-family:"微软雅黑"; margin:0 auto; padding:0px;} 
.zj_nei_l{ width:1150px; height:130px; margin-left:25px;} 
.zj_nei_l li{ float:left; font-size:20px; color:#6f6f6f; text-align:center;margin:0px 5px; list-style:none;} 
.show_box .left_box,.show_box .right_box{ 
float:left; 
height:130px; 
} 
.text_content p{ text-align:left; font-size:16px; color:#fff; line-height:24px; padding:10px;} 
.zj_nei_l li.show_box{ 
width:98px; 
} 
.zj_nei_l li.show_box_hover{ 
width:522px; 
} 
.show_box .right_box{ 
display:none; 
width:414px; 
height:130px; 
overflow:hidden; 
margin-left: 10px; 
} 
.right_box .text_content{ 
width:414px; 
background-color:#339933; 
color:#FFF; 
height:130px; 
} 
.zj_nei_l .left_box{ 
width:88px; 
font-size:20px; 
} 
.zj_nei_l .left_box p{ 
line-height:42px; 
font-size:20px; 
} 
.zj_nei_l .img_box{ 
width: 88px; 
height:88px; 
} 
.show_box .item1{ 
background:#030; 
} 
.show_box .item2{ 
background:#300; 
} 
.show_box .item3{ 
background:#600; 
} 
.show_box .item4{ 
background:#6C0; 
} 
.show_box .item5{ 
background:#6F9; 
} 
.show_box .item6{ 
background:#3F9; 
} 
.show_box_hover .left_box{ 
color:#339933; 
} 
.show_box_hover .item1{ 
background:#0F9; 
} 
.show_box_hover .item2{ 
background:#00C; 
} 
.show_box_hover .item3{ 
background:#906; 
} 
.show_box_hover .item4{ 
background:#9F6; 
} 
.show_box_hover .item5{ 
background:#CF9; 
} 
.show_box_hover .item6{ 
background:#90F; 
} 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
</head> <body> 
<div class="zj_nei_l"> 
<ul> 
<li class="show_box show_box_hover"> 
<div class="left_box"> 
<div class="img_box item1"> 
</div> 
<p>学知识></p> 
</div> 
<div class="right_box" style="display:block;"> 
<div class="text_content"> 
<p>有事情请联系小白!交志同道合的朋友</p> 
<p>邮箱:flytosky1991@126.com</p> 
<p>QQ:879974693</p> 
</div> 
</div> 
<div class="clearboth"></div> 
</li> 
<li class="show_box"> 
<div class="left_box"> 
<div class="img_box item2"></div> 
<p>交挚友></p> 
</div> 
<div class="right_box"> 
<div class="text_content"> 
<p>有事情请联系小白!交志同道合的朋友</p> 
<p>邮箱:flytosky1991@126.com</p> 
<p>QQ:879974693</p> 
</div> 
</div> 
<div class="clearboth"></div> 
</li> 
<li class="show_box"> 
<div class="left_box"> 
<div class="img_box item3"></div> 
<p>能赚钱></p> 
</div> 
<div class="right_box"> 
<div class="text_content"> 
<p>有事情请联系小白!交志同道合的朋友</p> 
<p>邮箱:flytosky1991@126.com</p> 
<p>QQ:879974693</p> 
</div> 
</div> 
<div class="clearboth"></div> 
</li> 
<li class="zj_line"></li> 
<li class="show_box"> 
<div class="left_box"> 
<div class="img_box item4"></div> 
<p>找业务></p> 
</div> 
<div class="right_box"> 
<div class="text_content"> 
<p>有事情请联系小白!交志同道合的朋友</p> 
<p>邮箱:flytosky1991@126.com</p> 
<p>QQ:879974693</p> 
</div> 
</div> 
<div class="clearboth"></div> 
</li> 
<li class="show_box"> 
<div class="left_box"> 
<div class="img_box item5"></div> 
<p>招人才></p> 
</div> 
<div class="right_box"> 
<div class="text_content"> 
<p>有事情请联系小白!交志同道合的朋友</p> 
<p>邮箱:flytosky1991@126.com</p> 
<p>QQ:879974693</p> 
</div> 
</div> 
<div class="clearboth"></div> 
</li> 
<li class="show_box"> 
<div class="left_box"> 
<div class="img_box item6"></div> 
<p>求发展></p> 
</div> 
<div class="right_box"> 
<div class="text_content"> 
<p>有事情请联系小白!交志同道合的朋友</p> 
<p>邮箱:flytosky1991@126.com</p> 
<p>QQ:879974693</p> 
</div> 
</div> 
<div class="clearboth"></div> 
</li> 
</ul> 
</div> 
<script type="text/javascript"> 
var hide_boxw = $(".right_box").width(); 
$(".show_box").mouseenter(function(e){ 
var li = $(this).find(".right_box"); 
$(this).addClass("show_box_hover"); 
if(li.css("display")=="none"){ 
$(".right_box").hide(); 
$(".show_box").removeClass("show_box_hover"); 
$(this).addClass("show_box_hover"); 
li.css({"width":"0px","display":"block"}); 
li.animate({"width":hide_boxw},hide_boxw); 
} 
}); 
</script> 
</body> 
</html>

实现效果
js 实现菜单上下显示附效果图
Javascript 相关文章推荐
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 #Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 #Javascript
js获取对象为null的解决方法
Nov 21 #Javascript
tangram框架响应式加载图片方法
Nov 21 #Javascript
使图片旋转的3种解决方案
Nov 21 #Javascript
js单例模式详解实例
Nov 21 #Javascript
Ajax同步与异步传输的示例代码
Nov 21 #Javascript
You might like
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
护理毕业生自我鉴定
2014/02/11 职场文书
学员自我鉴定
2014/03/19 职场文书
公关活动策划方案
2014/05/25 职场文书
单位消防安全责任书
2014/07/23 职场文书
教师学期个人总结
2015/02/11 职场文书
生活委员竞选稿
2015/11/21 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis