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 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 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
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python 从相对路径下import的方法
2018/12/04 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python标识符命名规范原理解析
2020/01/10 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Python实现弹球小游戏
2020/08/01 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
python实现学生通讯录管理系统
2021/02/25 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
优秀应届生推荐信
2013/11/09 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
安全生产月活动总结
2014/05/04 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
微观世界观后感
2015/06/10 职场文书
关于感恩的作文
2019/08/26 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏