Rumah > Artikel > hujung hadapan web > js melaksanakan kemahiran kod_javascript menu navigasi sekunder yang meluas secara mendatar

js melaksanakan kemahiran kod_javascript menu navigasi sekunder yang meluas secara mendatar

WBOYasal: 2016-05-16 15:41:461469semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan js bagi kod menu navigasi sekunder yang dilanjutkan secara mendatar. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu navigasi sekunder memanjangkan mendatar yang dilaksanakan oleh js. Letakkan tetikus pada item menu keempat menu utama untuk mengembangkan menu kedua, hanya ubah suai umum boleh mencantikkan semula gaya menu mengikut gaya laman web anda sendiri.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-r-show-menu-style-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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>横向伸展开来的二级导航菜单</title>
 <style type="text/css">
  .suckerdiv { }
  .suckerdiv ul { width: 120px; position: relative; }
  .suckerdiv ul li ul { left: 120px; /* Parent menu width - 1*/ position: absolute; width: 140px; /*sub menu width*/ top: 0; display: none; }
   /*All subsequent sub menu levels offset */
  .suckerdiv ul li ul li ul { left: 159px; /* Parent menu width - 1*/ }
   /* menu links style */
  .suckerdiv ul li a { display: block; color: #353302; text-decoration: none; font:12px 宋体; background: #eee; line-height:24px; padding: 0px 10px; border: 1px solid #fff; border-bottom: 0; }
  .suckerdiv ul li a:visited { color: black; }
  .suckerdiv ul li a:hover{ color: white; background-color: #97c839; }
  .suckerdiv .subfolderstyle { }
  .suckerdiv a.subfolderstyle:hover { background: #97c839 url() no-repeat center right; }
 </style>
</head>
<body>
<script type="text/javascript">
 var menuids = ["suckertree1"]
 function buildsubmenus() {
  for (var i = 0; i < menuids.length; i++) {
   var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
   for (var t = 0; t < ultags.length; t++) {
    ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle"
    ultags[t].parentNode.onmouseover = function () {
     this.getElementsByTagName("ul")[0].style.display = "block";
     this.firstChild.style.backgroundColor = 'green';
    }
    ultags[t].parentNode.onmouseout = function () {
     this.getElementsByTagName("ul")[0].style.display = "none"
     this.firstChild.style.backgroundColor = '';
    }
   }
  }
 }
 if (window.addEventListener)
  window.addEventListener("load", buildsubmenus, false)
 else if (window.attachEvent)
  window.attachEvent("onload", buildsubmenus)
</script>
<div class="suckerdiv">
 <ul id="suckertree1">
  <li><a href="#">腾讯新闻</a></li>
  <li><a href="#">腾讯汽车</a></li>
  <li><a href="#">腾讯科技</a></li>
  <li><a href="#">腾讯手机</a>
   <ul>
    <li><a href="#">HTC</a></li>
    <li><a href="#">联想</a></li>
    <li><a href="#">华为</a></li>
    <li><a href="#">中兴</a></li>
   </ul>
  </li>
 </ul>
</div>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk 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：jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jqueryArtikel seterusnya：jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery

Artikel berkaitan

Lihat lagi