JavaScript melaksanakan kemahiran effect_javascript menu lungsur yang sangat mudah dan praktikal-tutorial js-php.cn

JavaScript melaksanakan kemahiran effect_javascript menu lungsur yang sangat mudah dan praktikal

WBOY

Lepaskan： 2016-05-16 15:42:09

asal

1615 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara melaksanakan kesan menu lungsur turun yang sangat mudah dan praktikal dalam JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu lungsur JS yang praktikal Gerakkan tetikus ke atas menu untuk memaparkan menu kedua. Ia mengambil banyak masa untuk mengubah suainya ia lebih ringkas, dan keserasian kod nampaknya bagus. Menu lungsur dua peringkat ini pada asasnya dilaksanakan oleh CSS dan JavaScript.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.