编程 Javascript

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 学习之旅（2）

Feb 05 Javascript

JavaScript 继承详解（三）

Jul 13 Javascript

js 代码集(学习js的朋友可以看下)

Jul 22 Javascript

javascript显示用户停留时间的简单实例

Aug 05 Javascript

JavaScript Ajax Json实现上下级下拉框联动效果实例代码

Nov 23 Javascript

解决extjs grid 不随窗口大小自适应的改变问题

Jan 26 Javascript

JavaScript设置、获取、清除单值和多值cookie的方法

Nov 17 Javascript

js为什么不能正确处理小数运算？

Dec 29 Javascript

原生js实现无限循环轮播图效果

Jan 20 Javascript

深入理解vue.js中的v-if和v-show

Jun 22 Javascript

详解vue-cli中模拟数据的两种方法

Jul 03 Javascript

基于Fixed定位的框选功能的实现代码

May 13 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 SQL Injection with MySQL

2011/02/27 PHP

什么是PEAR？什么是PECL？PHP中两个容易混淆的概念解释

2015/07/01 PHP

PHP5.3新特性小结

2016/02/14 PHP

PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】

2016/12/24 PHP

PHP实现负载均衡的加权轮询方法分析

2018/08/22 PHP

Laravel向公共模板赋值方法总结

2019/06/25 PHP

php多进程并发编程防止出现僵尸进程的方法分析

2020/02/28 PHP

js实现兼容IE6与IE7的DIV高度

2010/05/13 Javascript

jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法

2010/10/22 Javascript

利用毫秒减值计算时长的js代码

2013/09/22 Javascript

jQuery不兼容input的change事件问题解决过程

2014/12/05 Javascript

node.js中的http.response.removeHeader方法使用说明

2014/12/14 Javascript

JavaScript中getUTCSeconds()方法的使用详解

2015/06/11 Javascript

使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效

2015/09/24 Javascript

javascript实现unicode与ASCII相互转换的方法

2015/12/10 Javascript

Bootstrap框架下下拉框select搜索功能

2020/03/26 Javascript

jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】

2016/09/20 Javascript

js学习总结_轮播图之渐隐渐现版(实例讲解)

2017/07/17 Javascript

JS脚本加载后执行相应回调函数的操作方法

2018/02/28 Javascript

vue项目中监听手机物理返回键的实现

2020/01/18 Javascript

在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

2020/09/11 Javascript

ptyhon实现sitemap生成示例

2014/03/30 Python

python有证书的加密解密实现方法

2014/11/19 Python

完美解决python遍历删除字典里值为空的元素报错问题

2016/09/11 Python

python实战教程之自动扫雷

2018/07/13 Python

Flask框架学习笔记之模板操作实例详解

2019/08/15 Python

Python3操作Excel文件（读写）的简单实例

2019/09/02 Python

python 实现简单的FTP程序

2019/12/27 Python

python列表返回重复数据的下标

2020/02/10 Python

英国最大的奢侈品零售网络商城：Flannels

2016/09/16 全球购物

优秀的茶餐厅创业计划书

2014/01/03 职场文书

校友会欢迎辞

2014/01/13 职场文书

环境科学专业优秀毕业生自荐书

2014/02/03 职场文书

授权委托书样本及填写说明

2014/09/19 职场文书

军训阅兵新闻稿

2015/07/17 职场文书

nginx内存池源码解析

2021/11/20 Servers