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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
window.location.hash知识汇总
Nov 09 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP如何实现跨域
2016/05/30 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
PHP实现百度人脸识别
2019/05/06 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
python实现的防DDoS脚本
2011/02/08 Python
python通过索引遍历列表的方法
2015/05/04 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
python多线程并发实例及其优化
2019/06/27 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
考博专家推荐信
2014/05/10 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
2015年行政助理工作总结
2015/04/30 职场文书