js實(shí)現(xiàn)的四級(jí)左側(cè)網(wǎng)站分類菜單實(shí)例
更新時(shí)間:2015年05月06日 09:34:53 投稿:shichen2014
這篇文章主要介紹了js實(shí)現(xiàn)的四級(jí)左側(cè)網(wǎng)站分類菜單,實(shí)例分析了javascript操作頁(yè)面元素實(shí)現(xiàn)tab切換的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)的四級(jí)左側(cè)網(wǎng)站分類菜單。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"/>
<script src="http://www.google-analytics.com/urchin.js"
type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<title>demo</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#nav, #nav ul {
list-style: none;
background: #F9F9F9;
font-weight: bold;
padding: 0px;
margin: 0px;
border: solid 1px #CCCCCC;
border-bottom: 0px;
width: 150px;
text-align: left;
}
#nav ul ul{
border: solid 1px #CCCCCC;
border-bottom: 0px;
}
#nav a {
display: block;
width: 150px;
w\idth: 140px;
color: #333333;
text-decoration: none;
text-align: center;
border-bottom: solid 1px #CCCCCC;
text-align: left;
padding-left: 10px;
}
#nav a:hover{
color: #336666;
}
#nav a.selected{
background: url(/images/bb_expand.gif) no-repeat right 50%;
}
#nav li {
line-height: 22px;
position: relative;
}
#nav li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
#nav li li {
width: 150px;
}
#nav li ul a {
width: 150px;
w\idth: 126px;
padding: 0px 12px;
line-height: 22px;
text-align: left;
}
#nav li ul ul {
margin: 0px 0 0 150px;
}
#nav li:hover ul ul,#nav li.sfhover ul ul,#nav li:hover ul ul ul{
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul,#nav li li li:hover ul
{
left: auto;
}
#nav li:hover ul,#nav li.sfhover ul{
left: 150px;
top: 0px;
}
#nav li:hover, #nav li.sfhover {
background: #F5E3C0;
}
* html #nav li {
float: left;
height: 1%;
}
* html #nav li a {
height: 1%;
}
-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"),"");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</head>
<body>
<p><a href="javascript:history.back()">Back</a></p>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="/aboutme.html">About Me</a></li>
<li><a class="selected" href="/tutorials.html">Tutorials</a>
<ul>
<li><a href="#">Sub Menu 31</a></li>
<li><a class="selected" href="#">Sub Menu 32</a>
<ul>
<li><a class="selected"href="#">Sub Menu 321</a><ul>
<li><a href="#">Sub Menu 321</a></li>
</ul></li>
<li><a href="#">Sub Menu 322</a></li>
<li><a href="#">Sub Menu 323</a></li>
<li><a class="selected"href="#">Sub Menu 324</a><ul>
<li><a href="#">Sub Menu 321</a></li>
<li><a href="#">Sub Menu 322</a></li>
<li><a href="#">Sub Menu 323</a></li>
<li><a href="#">Sub Menu 324</a></li>
</ul></li>
</ul>
</li>
<li><a href="#">Sub Menu 33</a></li>
<li><a href="#">Sub Menu 34</a></li>
</ul>
</li>
<li><a class="selected" href="/gallery/gallery.html">Gallery</a>
<ul>
<li><a href="#">Sub Menu 41</a></li>
<li><a class="selected" href="#">Sub Menu 42</a>
<ul>
<li><a href="#">Sub Menu 421</a></li>
<li><a href="#">Sub Menu 422</a></li>
<li><a href="#">Sub Menu 423</a></li>
<li><a href="#">Sub Menu 424</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 43</a></li>
<li><a href="#">Sub Menu 44</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- vue.js 左側(cè)二級(jí)菜單顯示與隱藏切換的實(shí)例代碼
- javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果
- JS實(shí)現(xiàn)新浪博客左側(cè)的Blog管理菜單效果代碼
- JS實(shí)現(xiàn)的左側(cè)豎向滑動(dòng)菜單效果代碼
- JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動(dòng)菜單效果
- js實(shí)現(xiàn)的后臺(tái)左側(cè)管理菜單代碼
- 原生JS實(shí)現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼
- js左側(cè)三級(jí)菜單導(dǎo)航實(shí)例代碼
- js左側(cè)多級(jí)菜單動(dòng)態(tài)的解決方案
- JavaScript實(shí)現(xiàn)左側(cè)菜單效果
相關(guān)文章
JavaScript Reflect Metadata實(shí)現(xiàn)詳解
這篇文章主要介紹了JavaScript Reflect Metadata實(shí)現(xiàn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JavaScript canvas實(shí)現(xiàn)帶有陰影的圖形和文字
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)帶有陰影的圖形和文字,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03
微信小程序?qū)崿F(xiàn)保存圖片到相冊(cè)功能
項(xiàng)目中有個(gè)保存二維碼到相冊(cè)的功能,所以涉及到用戶是否授權(quán)相冊(cè)權(quán)限的問(wèn)題。這篇文章主要介紹了微信小程序?qū)崿F(xiàn)保存圖片到相冊(cè)功能,需要的朋友可以參考下2018-11-11
JavaScript類的繼承多種實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript類的繼承多種實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01

