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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 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
消息持续发送的完整例子
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python多线程原理与用法详解
2018/08/20 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
销售经理工作职责
2014/02/03 职场文书
仓库文员岗位职责
2014/04/06 职场文书
投标保密承诺书
2014/05/19 职场文书
关于安全的标语
2014/06/10 职场文书
法制宣传口号
2014/06/16 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
新学期开学标语2015
2015/07/16 职场文书
python3操作redis实现List列表实例
2021/08/04 Python