js 实现菜单上下显示附效果图
更新时间：2013年11月21日 11:53:29 作者：
菜单上下显示的实现方法有很多,在本文将为大家介绍下使用js是如何实现的，需要的朋友不要错过
复制代码 代码如下:
<!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中不像其他语言，不存在面向对象语言的相关特性2011-05-05
这篇文章主要为大家详细介绍了JavaScript字符串对象，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
理解Javascript_09_Function与Object
在《理解Javascript_08_函数对象》中讲解了很多函数对象的问题，同时也留下了许多疑问，今天让我们来解答部分问题。2010-10-10
学习C#的朋友都知道format()这个方法，本文给大家介绍在javascript中如何实现此操作，js模拟C#字符串格式化操作，需要的盆友一起学习吧2015-08-08
列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。本文给大家介绍Bootstrap列表组组件，感兴趣的朋友一起学习吧2016-05-05
Omi v1.0.2发布正式支持传递javascript表达式
这篇文章主要介绍了Omi v1.0.2发布正式支持传递javascript表达式,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JavaScript中合并数组的N种方法,本文使用concat、循环插入、reduce等方法合并JavaScript数组,需要的朋友可以参考下2014-09-09
本文主要介绍了全面讲解JavaScript原型与原型链，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了纯js+css实现仿移动端淘宝网站的弹出详情框功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
为了防止发生命名冲突，可以建立自己的代码库。2009-07-07
最新评论