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 变量作用域 代码分析
Jun 26 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
Express结合Webpack的全栈自动刷新
May 23 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 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画图实例
2014/11/05 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php扩展开发入门demo示例
2019/09/23 PHP
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
python获取图片颜色信息的方法
2015/03/18 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
深入理解Python装饰器
2016/07/27 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
python下载微信公众号相关文章
2019/02/26 Python
python实现手机销售管理系统
2019/03/19 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
上班迟到检讨书
2014/09/15 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python