首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 实现菜单上下显示附效果图

js 实现菜单上下显示附效果图

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 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
频偏(1) TOSHIBA(1) 灵敏度(1) 手调机(1) 鉴频器(1) 东芝(1) RP-F11(1) 频率(1) 数调机(1) 高放电路(1)
You might like
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php计算年龄精准到年月日
2015/11/17 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
jQuery实现单击按钮遮罩弹出对话框效果（1）
2017/02/20 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
详解angular中的作用域及继承
2017/05/31 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
python psutil库安装教程
2018/03/19 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Django设置Postgresql的操作
2020/05/14 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
品质管理部岗位职责范文
2014/03/01 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android