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中的prototype属性实例分析说明
Aug 09 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
输入框跟随文字内容适配宽实现示例
Aug 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函数
2006/12/06 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python3多线程操作简单示例
2018/05/22 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
python3 线性回归验证方法
2019/07/09 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
用python绘制樱花树
2020/10/09 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python
德生BCL3000抢先使用感受和评价
2022/04/07 无线电