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动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Pycharm及python安装详细教程(图解)
2020/07/31 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
会计专业毕业自荐书范文
2014/02/08 职场文书
开业庆典策划方案
2014/02/18 职场文书
车间机修工岗位职责
2014/02/28 职场文书
优乐美广告词
2014/03/14 职场文书
本科应届生求职信
2014/08/05 职场文书
物业保洁员管理制度
2015/08/05 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
Python代码风格与编程习惯重要吗?
2021/06/03 Python