JavaScript实现非常简单实用的下拉菜单效果

作者：bea

本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果。分享给大家供大家参考。具体如下：这是一款实用的JS下拉菜单，鼠标移上菜单就显示出二级菜单，是从其它网站上整理下来的，修改花了不少时间，现在去除了一些无用代码，更简洁了，而且代码兼容性似乎也表现不错，这款两级下拉菜单，基本是由CSS和JavaScript共同实现的，真的挺简洁实用。运行效果截图如下：在线演示地址如下： http://demo./js/2015/js-css-down-show-menu-c

本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果。分享给大家供大家参考。具体如下：

这是一款实用的JS下拉菜单，鼠标移上菜单就显示出二级菜单，是从其它网站上整理下来的，修改花了不少时间，现在去除了一些无用代码，更简洁了，而且代码兼容性似乎也表现不错，这款两级下拉菜单，基本是由CSS和JavaScript共同实现的，真的挺简洁实用。

运行效果截图如下：

在线演示地址如下：

http://demo./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程序设计有所帮助。

有用 | 无用

JavaScript实现非常简单实用的下拉菜单效果

猜你喜欢

您可能感兴趣的文章: