js 實(shí)現(xiàn)菜單上下顯示附效果圖
更新時(shí)間：2013年11月21日 11:53:29 作者：
菜單上下顯示的實(shí)現(xiàn)方法有很多,在本文將為大家介紹下使用js是如何實(shí)現(xiàn)的，需要的朋友不要錯(cuò)過(guò)
復(fù)制代碼 代碼如下:
<!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>學(xué)知識(shí)></p>
</div>
<div class="right_box" style="display:block;">
<div class="text_content">
<p>有事情請(qǐng)聯(lián)系小白！交志同道合的朋友</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>有事情請(qǐng)聯(lián)系小白！交志同道合的朋友</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>有事情請(qǐng)聯(lián)系小白！交志同道合的朋友</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>找業(yè)務(wù)></p>
</div>
<div class="right_box">
<div class="text_content">
<p>有事情請(qǐng)聯(lián)系小白！交志同道合的朋友</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>有事情請(qǐng)聯(lián)系小白！交志同道合的朋友</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>求發(fā)展></p>
</div>
<div class="right_box">
<div class="text_content">
<p>有事情請(qǐng)聯(lián)系小白！交志同道合的朋友</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>
實(shí)現(xiàn)效果
相關(guān)文章
TypeScript條件類型與內(nèi)置條件類型超詳細(xì)講解
我們可以使用TypeScript中的條件類型來(lái)根據(jù)邏輯定義某些類型，就像是在編寫代碼那樣。它采用的語(yǔ)法和我們?cè)贘avaScript中熟悉的三元運(yùn)算符很像：condition ? ifConditionTrue : ifConditionFalse。我們來(lái)看看他是怎么工作的2023-03-03
JavaScript 模塊化開(kāi)發(fā)實(shí)例詳解【seajs、requirejs庫(kù)使用】
這篇文章主要介紹了JavaScript 模塊化開(kāi)發(fā),結(jié)合實(shí)例形式詳細(xì)分析了基于seajs、requirejs庫(kù)的JavaScript模塊化使用相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
JavaScript設(shè)計(jì)模式之工廠模式簡(jiǎn)單實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式,結(jié)合完整實(shí)例形式分析了工廠模式的概念、原理及javascript定義與使用工廠模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
BOM系列第二篇之定時(shí)器requestAnimationFrame
這篇文章主要介紹了BOM系列第二篇之定時(shí)器requestAnimationFrame 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
Bootstrap中的fileinput 多圖片上傳及編輯功能
這篇文章主要介紹了Bootstrap中的fileinput 多圖片上傳及編輯功能的實(shí)現(xiàn),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
很久以前還在學(xué)校的時(shí)候，在網(wǎng)上看到有的關(guān)于js切換的效果我自己會(huì)用 很笨拙的方法試著寫出來(lái)2010-11-11
webapi根據(jù)id獲取元素的實(shí)現(xiàn)思路
掌握document.getElementById() 根據(jù)id獲取元素,在頁(yè)面畫出一個(gè)寬200 高200 粉色的盒子, 在控制臺(tái)打印這個(gè)盒子,接到這樣的需求如何處理呢,下面小編給大家分享webapi根據(jù)id獲取元素的實(shí)現(xiàn)思路,感興趣的朋友一起看看吧2024-02-02
javascript中window.open在原來(lái)的窗口中打開(kāi)新的窗口(不同名)
本文給大家介紹使用window.open在原來(lái)的窗口中打開(kāi)新的窗口，涉及到win.open新窗口相關(guān)知識(shí)，對(duì)本文感興趣的朋友參考下2015-11-11
javascript css紅色經(jīng)典選項(xiàng)卡效果實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了javascript css紅色經(jīng)典選項(xiàng)卡效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-05-05
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹(shù)添加/刪除節(jié)點(diǎn)操作示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹(shù)添加/刪除節(jié)點(diǎn)操作,涉及javascript二叉樹(shù)的定義、節(jié)點(diǎn)添加、刪除、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03