js實(shí)現(xiàn)向右橫向滑出的二級(jí)菜單效果
更新時(shí)間：2015年08月27日 10:37:42 作者：企鵝
這篇文章主要介紹了js實(shí)現(xiàn)向右橫向滑出的二級(jí)菜單效果,涉及javascript鼠標(biāo)事件及頁(yè)面元素的隱藏與顯示實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)向右橫向滑出的二級(jí)菜單效果。分享給大家供大家參考。具體如下：
這是一個(gè)網(wǎng)頁(yè)上的橫向滑出二級(jí)菜單，菜單是豎向排列的，但二級(jí)子菜單項(xiàng)是向右橫向滑出的，引入了一個(gè)JS封裝庫(kù)文件，這個(gè)菜單兼容性方面也做的挺好，只是覺(jué)得，菜單中有些代碼不便于修改，有興趣的自己看看吧。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-web-right-show-out-2l-menu-codes/
具體代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>橫向滑出的二級(jí)菜單</title>
<!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. -->
<style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end-->
<!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. -->
<style type="text/css">
#imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(images/light_arrow_right.gif); width:6px; height:9px; left:-6px; top:5px; background-repeat:no-repeat;background-position:top left;}
#imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(images/light_arrow_right.gif); background-repeat:no-repeat;background-position:top left;}
/* --[[ Sub Expand Icons ]]-- */
#imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(images/medium_purple_right.gif); width:6px; height:9px; left:-6px; top:3px; background-repeat:no-repeat;background-position:top left;}
#imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(images/medium_purple_right.gif); background-repeat:no-repeat;background-position:top left;}
#imouter0 {border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; }
#imenus0 li ul {background-color:#d3d2df; border-style:solid; border-color:#333333; border-width:1px; padding:5px; margin:4px 0px 0px; }
#imenus0 li a, #imenus0 .imctitle {height:20px; background-color:#585575; color:#dddddd; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:none; border-style:none; border-color:#ffffff; border-width:1px; padding:2px 8px; margin:0px 0px 2px; }
#imenus0 li:hover>a {text-decoration:underline; }
#imenus0 li a.ihover, .imde imenus0 a:hover {text-decoration:underline; }
#imenus0 li a.iactive {}
#imenus0 ul a, #imenus0 .imsubc li .imctitle {height:auto; background-color:transparent; color:#555555; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; margin:0px; }
#imenus0 ul li:hover>a {color:#000000; text-decoration:underline; }
#imenus0 ul li a.ihover {color:#000000; text-decoration:underline; }
#imenus0 ul li a.iactive {background-color:#ffffff; }
</style><!--end-->
</head>
<body>
<div class="imrcmain0 imgl" style="width:149px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0">
<li class="imatm" style="width:100%;"><a class="" href="#"><span class="imea imeam"><span></span></span>我是誰(shuí)</a>
<div class="imsc"><div class="imsubc" style="width:145px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style="">
<li><a href="#">成龍</a></li>
<li><a href="#">Mission & Goals</a></li>
<li><a href="#">周華健</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">學(xué)友</a></li>
<li><a href="#">Press Center</a></li>
<li><a href="#"><span class="imea imeas"><span></span></span>世界好大</a>
<div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:138px;"><div class="imunder"></div><div></div><ul style="">
<li><a href="#">美國(guó)</a></li>
<li><a href="#">晉州</a></li>
<li><a href="#">US & Canada</a></li>
<li><a href="#">Mexico</a></li>
<li><a href="#">海州</a></li>
<li><a href="#">Middle East</a></li>
</ul></div></div></li>
<li><a href="#"><span class="imea imeas"><span></span></span>海歸之鄉(xiāng)</a>
<div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:138px;"><div class="imunder"></div><div></div><ul style="">
<li><a href="#">Overview</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">故鄉(xiāng)有云</a></li>
<li><a href="#">Healthcare</a></li>
<li><a href="#">回來(lái)吧</a></li>
<li><a href="#">Engineered Producs</a></li>
<li><a href="#">Tyco Worldwide</a></li>
</ul></div></div></li>
<li><a href="#">自定義</a></li>
</ul></div></div></li>
<li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a>
<div class="imsc"><div class="imsubc" style="width:146px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style="">
<li><a href="#">預(yù)覽項(xiàng)目</a></li>
<li><a href="#">People & Values</a></li>
<li><a href="#">政府部門(mén)</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Environmental</a></li>
</ul></div></div></li>
<li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a>
<div class="imsc"><div class="imsubc" style="width:146px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style="">
<li><a href="#">Overview</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Fire & Security</a></li>
<li><a href="#">Healthcare</a></li>
<li><a href="#">Plastics & Adhesives</a></li>
<li><a href="#">Engineered Producs</a></li>
<li><a href="#">Tyco Worldwide</a></li>
</ul></div></div></li>
<li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a>
<div class="imsc"><div class="imsubc" style="width:146px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style="">
<li><a href="#">Overview</a></li>
<li><a href="#">Stock Quotes</a></li>
</ul></div></div></li>
</ul><div class="imclear"> </div></div></div>
<script language="JavaScript" src="images/ocscriptmain.js" type="text/javascript"></script>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 通用的二級(jí)菜單代碼(css+javascript)
- 簡(jiǎn)單實(shí)現(xiàn)js點(diǎn)擊展開(kāi)二級(jí)菜單功能
- vue.js 左側(cè)二級(jí)菜單顯示與隱藏切換的實(shí)例代碼
- 鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效
- JS二級(jí)菜單不同實(shí)現(xiàn)方法分析【4種方法】
- javascript鼠標(biāo)滑過(guò)顯示二級(jí)菜單特效
- vue.js實(shí)現(xiàn)二級(jí)菜單效果
- JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼
- js實(shí)現(xiàn)二級(jí)菜單點(diǎn)擊顯示當(dāng)前內(nèi)容效果
- js仿小米二級(jí)菜單顯示效果
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)手機(jī)拍照上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果(續(xù)2)
發(fā)現(xiàn)原來(lái)的方法還有是有幾個(gè)問(wèn)題：首先Js代碼冗余，導(dǎo)航條上的Tab是用js實(shí)現(xiàn)跳轉(zhuǎn)而不是超鏈接，還有導(dǎo)航條本身用fixed定位，但沒(méi)有被設(shè)置為水平居中，而是在JS中更改left值使其居中2013-09-09
js報(bào)錯(cuò):Maximum?call?stack?size?exceeded的解決方法
這篇文章主要給大家介紹了關(guān)于js報(bào)錯(cuò)Maximum?call?stack?size?exceeded的解決方法,文中通過(guò)實(shí)例代碼將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了js正則匹配出所有圖片及圖片地址src的方法,涉及javascript正則匹配及頁(yè)面元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
詳解如何用webpack打包一個(gè)網(wǎng)站應(yīng)用項(xiàng)目
本篇文章主要介紹了如何用webpack打包一個(gè)網(wǎng)站應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Javascript中的方法鏈（Method Chaining）介紹
這篇文章主要介紹了Javascript中的方法鏈（Method Chaining）介紹,本文講解了Javascript Method Chaining、Method Chaining 使用、Method Chaining VS prototype Chaining等內(nèi)容,需要的朋友可以參考下2015-03-03
JS實(shí)現(xiàn)生成由字母與數(shù)字組合的隨機(jī)字符串功能詳解
這篇文章主要介紹了JS實(shí)現(xiàn)生成由字母與數(shù)字組合的隨機(jī)字符串功能,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript生成隨機(jī)字符串的方法及相關(guān)優(yōu)化操作技巧,需要的朋友可以參考下2018-05-05
淺析js實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式
這篇文章主要介紹了淺析js實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
js 用CreateElement動(dòng)態(tài)創(chuàng)建標(biāo)簽示例
用CreateElement動(dòng)態(tài)創(chuàng)建標(biāo)簽，主要是html中常用的一些標(biāo)簽，在本文有詳細(xì)的示例，喜歡的朋友可以參考下2013-11-11
彪哥1.1(智能表格)提供下載...2006-09-09