JS implementiert extrem vereinfachte, reaktionsfähige Mausanzeige-Sekundärmenü-Code_Javascript-Fähigkeiten-js-Tutorial-php.cn

JS implementiert extrem vereinfachte, reaktionsfähige Mausanzeige-Sekundärmenü-Code_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:39:44

Original

1328 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung des extrem vereinfachten sekundären Menücodes für die reaktionsfähige Mausanzeige. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine vereinfachte Version des sekundären Navigationsmenüs. Es reagiert auf Mausbewegungen und zeigt das Menü an, wenn die Maus platziert wird. Freunde, denen es gefällt, können es nehmen, modifizieren und verschönern, und es wird ausreichen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/

Der spezifische Code lautet wie folgt:

<html>
<head>
<title>二级菜单，响应鼠标</title>
<style type="text/css">
.mainNav ul li {float: left;width: 150px;}
.mainNav li ul {display: none;}
li.hover ul {display: block;}
</style>
<script language="javascript" type="text/javascript">
 function showSubLevel(Obj){
  Obj.className="hover";
 }
 function hideSubLevel(Obj){
  Obj.className="";
 }
</script>
</head>
<body>
<div class="mainNav">
 <ul>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目A
 <ul>
 <li>A的二级栏目</li>
 <li>A的二级栏目</li>
 <li>A的二级栏目</li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目B
 <ul>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目C
 <ul>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 </ul>
 </li>
 </ul>
</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.