Rumah > Artikel > hujung hadapan web > JS melaksanakan kemahiran kesan navigasi drop-down pintar code_javascript

JS melaksanakan kemahiran kesan navigasi drop-down pintar code_javascript

WBOYasal: 2016-05-16 15:42:411082semak imbas

Contoh dalam artikel ini menerangkan kod JS untuk melaksanakan kesan navigasi lungsur turun pintar. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu lungsur berdasarkan JS Ia adalah bar navigasi tapak web pintar yang menyokong paparan kedua, paparan meluncur ke bawah, menu lungsur turun klasik, JS dan CSS ditulis dan dilaksanakan bersama, gaya senarai menu Li. mudah Diubah suai dan serasi dengan semua pelayar utama, saya percaya anda juga akan menyukainya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-down-nav-blue-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>js暗蓝色下拉导航菜单</title>
<style>
@charset "utf-8";
body{padding:0px;margin:0px;}
body{font-family:Arial, Helvetica, sans-serif;font-size:9pt;background-color:#3A4954;}
ul,li{padding:0px;margin:0px;list-style-type: none;}
* a{text-decoration: none;color:#CFE0EE;}
a:hover{color:#F09C42;}
a:hover{color:#F09C42;}
#navMenu{width:100%;height: 34px;line-height: 34px;display:block;overflow:hidden;background-image: url(images/nav_bg.jpg);background-repeat:repeat-x;background-position: left top;}
#navMenu ul{width:95%;
margin-left:16px;}
#navMenu .onelink{background-image:none;}
#navMenu li{width:90px;text-align:center;float: left;line-height: 34px;height: 34px;background-image: url(images/nav_fg.jpg);background-repeat: no-repeat;background-position: 0 center;margin-left: -2px;}
#navMenu li a{color:#6CA7C7;font-family: "宋体";padding-right: 1em;padding-left: 1em;margin-left: 2px;display: block;}
#navMenu li a:hover, #navMenu li.hover a{background-image: url(images/hover_bg.jpg);background-repeat:repeat-x;background-position: center top;text-decoration: none;color:#FF7B0E;}
.dropMenu{position:absolute;top: 0;z-index:100;width: 110px;visibility: hidden;
margin-top: -1px;margin-left:-2px;border: 1px solid #4D5B66;border-top: 0px solid #3CA2DC;background-color: #0D1C31;padding-top:6px;padding-bottom:6px;filter: Alpha(Opacity=85);}
.dropMenu li{margin-top:2px;margin-bottom:4px;padding-left:6px;}
.dropMenu li a{width: 92%;display: block;text-align:center;color: black;padding: 4px 0 4px 0px;color:#6CA7C7;border-bottom: 1px dashed #4D5B66;}
.dropMenu+li a{border-top:none;}
* html .dropMenu a{width: 100%;color:#6CA7C7;}
.dropMenu a:hover{text-decoration: underline;color:#F09C42;}
.hdo{width:100%;
height:auto;
display:block;
overflow:hidden;}
</style>
<script type='text/javascript' src='js/dropdown.js'></script>
</head>
<body>
<div id="navMenu">
<ul>
  <li class="onelink"><a href='#' target="_blank">主页</a></li>
  <li><a href='#' target="_blank">HTML+CSS模板</a></li>
  <li><a href='#' rel='dropmenu1' target="_blank">JS代码</a></li>
  <li><a href='#' rel='dropmenu2' target="_blank">电子商务</a></li>
  <li><a href='#' >SEO优化</a></li>
  <li><a href='#' rel='dropmenu3' target="_blank">建站技巧</a></li>
  <li><a href='#' target="_blank">网络营销</a></li>
  </ul>
</div>
<ul id="dropmenu1" class="dropMenu">
  <li><a href="#" target="_blank">导航菜单</a></li>
  <li><a href="#" target="_blank">焦点幻灯片</a></li>
  <li><a href="#" target="_blank">网页特效</a></li>
  <li><a href="#" target="_blank">广告代码</a></li>
</ul>
<ul id="dropmenu2" class="dropMenu">
  <li><a href="#" target="_blank">企业类网站</a></li>
  <li><a href="#" target="_blank">行业类网站</a></li>
  <li><a href="#/" target="_blank">BLOG类网站</a></li>
  <li><a href="#" target="_blank">门户类网站</a></li>
  <li><a href="#" target="_blank">商城类网站</a></li>
</ul>
<ul id="dropmenu3" class="dropMenu">
  <li><a href="#" target="_blank">HTML技巧</a></li>
  <li><a href="#" target="_blank">CSS技巧</a></li>
  <li><a href="#" target="_blank">CMS建站技巧</a></li>
  <li><a href="#" target="_blank">其他技巧</a></li>
</ul>
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script> 
<!--//nav-->
</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：Kod kesan navigasi sekunder mendatar dilaksanakan oleh jquery_jqueryArtikel seterusnya：Kod kesan navigasi sekunder mendatar dilaksanakan oleh jquery_jquery

Artikel berkaitan

Lihat lagi