快捷導(dǎo)航

JavaScript實(shí)現(xiàn)非常簡單實(shí)用的下拉菜單效果

更新時(shí)間：2015年08月27日 14:55:17 作者：企鵝

這篇文章主要介紹了JavaScript實(shí)現(xiàn)非常簡單實(shí)用的下拉菜單效果,通過定義顯示及隱藏菜單項(xiàng)及鼠標(biāo)事件調(diào)用該函數(shù)實(shí)現(xiàn)下拉菜單功能,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)非常簡單實(shí)用的下拉菜單效果。分享給大家供大家參考。具體如下：

這是一款實(shí)用的JS下拉菜單，鼠標(biāo)移上菜單就顯示出二級(jí)菜單，是從其它網(wǎng)站上整理下來的，修改花了不少時(shí)間，現(xiàn)在去除了一些無用代碼，更簡潔了，而且代碼兼容性似乎也表現(xiàn)不錯(cuò)，這款兩級(jí)下拉菜單，基本是由CSS和JavaScript共同實(shí)現(xiàn)的，真的挺簡潔實(shí)用。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-css-down-show-menu-codes/

具體代碼如下：

<!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 runat="server"> 
<title>JavaScript下拉菜單</title> 
<style type="text/css"> 
* { 
padding:0; 
margin:0; 
} 
body { 
font-family:verdana, sans-serif; 
font-size:14px; background-color:#000;
} 
#navigation, #navigation li ul { 
list-style-type:none; 
} 
#navigation { 
} 
#navigation li { 
float:left; 
text-align:center; 
position:relative; 
} 
#navigation li a:link, #navigation li a:visited { 
display:block; 
text-decoration:none; 
color:#fff; 
width:82px; 
height:40px; 
line-height:40px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#255f9e; 
padding-left:10px; 
} 
#navigation li a:hover { 
color:#fff; 
background:#ffb100; 
} 
#navigation li ul li a:hover { 
color:#fff; 
background:#ffb100
} 
#navigation li ul { 
display:none; 
position:absolute; 
top:40px;
margin-top:1px; 
font-size:12px;
} 
</style> 
<script type="text/javascript"> 
function displaySubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "block"; 
} 
function hideSubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "none"; 
} 
</script> 
</head> 
<body> 
<ul id="navigation"> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">菜單1</a> 
<ul> 
<li><a href="#">菜單1</a></li> 
<li><a href="#">菜單1</a></li> 
<li><a href="#">菜單1</a></li> 
<li><a href="#">菜單1</a></li> 
</ul> 
</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">菜單2</a> 
<ul> 
<li><a href="#">欄目2</a></li> 
<li><a href="#">欄目2</a></li> 
<li><a href="#">欄目2</a></li> 
<li><a href="#">欄目2</a></li> 
<li><a href="#">欄目2</a></li> 
</ul> 
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">菜單3</a> 
<ul> 
<li><a href="#">菜單3</a></li> 
<li><a href="#">菜單3</a></li> 
<li><a href="#">菜單3</a></li> 
<li><a href="#">菜單3</a></li> 
<li><a href="#">菜單3</a></li> 
</ul> 
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">菜單4</a> 
<ul> 
<li><a href="#">菜單4</a></li> 
<li><a href="#">菜單4</a></li> 
<li><a href="#">菜單4</a></li> 
<li><a href="#">菜單4</a></li> 
<li><a href="#">菜單4</a></li> 
</ul> 
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">欄目5</a> 
<ul> 
<li><a href="#">菜單5</a></li> 
<li><a href="#">菜單5</a></li> 
<li><a href="#">菜單5</a></li> 
<li><a href="#">菜單5</a></li> 
<li><a href="#">菜單5</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">欄目6</a> 
<ul> 
<li><a href="#">菜單6</a></li> 
<li><a href="#">菜單6</a></li> 
<li><a href="#">菜單6</a></li> 
<li><a href="#">菜單6</a></li> 
<li><a href="#">菜單6</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">欄目7</a> 
<ul> 
<li><a href="#">菜單7</a></li> 
<li><a href="#">菜單7</a></li> 
<li><a href="#">菜單7</a></li> 
<li><a href="#">菜單7</a></li> 
<li><a href="#">菜單7</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">欄目8</a> 
<ul> 
<li><a href="#">菜單8</a></li> 
<li><a href="#">菜單8</a></li> 
<li><a href="#">菜單8</a></li> 
<li><a href="#">菜單8</a></li> 
<li><a href="#">菜單8</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">欄目09</a> 
<ul> 
<li><a href="#">菜單9</a></li> 
<li><a href="#">菜單9</a></li> 
<li><a href="#">菜單9</a></li> 
<li><a href="#">菜單9</a></li> 
<li><a href="#">菜單9</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">欄目10</a> 
<ul> 
<li><a href="#">菜單10</a></li> 
<li><a href="#">菜單10</a></li> 
<li><a href="#">菜單10</a></li> 
<li><a href="#">菜單10</a></li> 
<li><a href="#">菜單10</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">欄目11</a> 
<ul> 
<li><a href="#">菜單11</a></li> 
<li><a href="#">菜單11</a></li> 
<li><a href="#">菜單11</a></li> 
<li><a href="#">菜單11</a></li> 
<li><a href="#">菜單11</a></li> 
</ul> 
</li>
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: