cari

Rumah >hujung hadapan web >tutorial js >JS melaksanakan kemahiran kod_javascript menu sekunder paparan tetikus responsif ultra ringkas

JS melaksanakan kemahiran kod_javascript menu sekunder paparan tetikus responsif ultra ringkas

WBOY
WBOYasal
2016-05-16 15:39:441368semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan JS kod menu sekunder paparan tetikus responsif ultra-mudah. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah versi ringkas menu navigasi kedua. Ia bertindak balas kepada pergerakan tetikus dan memaparkan menu apabila tetikus diletakkan. Ia adalah gaya menu biasa. Kawan-kawan yang suka boleh ambil dan ubah suai dan cantikkan, dan sudah memadai.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

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

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：tayangan slaid karusel gambar super indah jQuery kesan khas kod sharing_jqueryArtikel seterusnya：tayangan slaid karusel gambar super indah jQuery kesan khas kod sharing_jquery

Artikel berkaitan

Lihat lagi