Heim > Artikel > Web-Frontend > JS implementiert intelligente Dropdown-Navigationseffekte, Code_Javascript-Fähigkeiten

JS implementiert intelligente Dropdown-Navigationseffekte, Code_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:42:411082Durchsuche

Das Beispiel in diesem Artikel beschreibt den JS-Code zur Implementierung intelligenter Dropdown-Navigationseffekte. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Dropdown-Menü, das auf JS basiert. Es handelt sich um eine intelligente Website-Navigationsleiste, die eine sekundäre Anzeige, eine nach unten verschiebbare Anzeige, ein klassisches Dropdown-Menü, JS und CSS sowie den Li-Menülistenstil unterstützt. praktisch Modifiziert und kompatibel mit allen gängigen Browsern, ich glaube, es wird Ihnen auch gefallen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-down-nav-blue-menu-style-codes/

Der spezifische Code lautet wie folgt:

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Von jquery_jquery implementierter horizontaler sekundärer NavigationseffektcodeNächster Artikel：Von jquery_jquery implementierter horizontaler sekundärer Navigationseffektcode

In Verbindung stehende Artikel

Mehr sehen