jQuery implementiert den Navigationsmenüeffekt der offiziellen Website_jquery von Meizu Meizu-js-Tutorial-php.cn

jQuery implementiert den Navigationsmenüeffekt der offiziellen Website_jquery von Meizu Meizu

WBOY

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

Original

1518 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery den Navigationsmenüeffekt der offiziellen Meizu-Website implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ich habe gelegentlich die offizielle Website von Meizu gesehen und festgestellt, dass das Navigationsmenü der Website sehr effektiv war, also habe ich es heruntergeladen. Zwei Worte: großartig. Wenn Sie die Maus über das Menü bewegen, wird eine horizontale Linie unter das Menü verschoben. Ich wollte schon immer ähnliche Effekte finden und daraus lernen. Infolgedessen habe ich entweder die URL einer Website mit ähnlichen Auswirkungen vergessen oder konnte sie überhaupt nicht finden. . Ich weiß nicht, wie ich es beschreiben soll, aber heute bin ich endlich darauf gestoßen und es ist wirklich großartig.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-meizu-web-nav-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>
<title>Meizu魅族导航菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
div,h1,h2,h3,h4,p,form,label,input,textarea,img,span{margin:0;padding:0;}ul,li{list-style:none;padding:0;margin:0;}img{border:none;}
.csc_top{background:url(images/shopping_tab.jpg) 0 0 no-repeat;width:958px;height:45px;margin:0 auto;position:relative;z-index:101;}
.slideMenu{height:38px;}
li.current a{color:#00b5f7;cursor:pointer;}
li.current a:hover{color:#00b5f7;cursor:pointer;}
.lavaLampWithImage3 li a:hover,.lavaLampWithImage3 li a:active{border:none;color:#00B5F7;text-decoration:none;}
.lavaLampWithImage3 .sep{padding-top:13px;font-size:10px;color:#aeadad;float:left;height:20px;border-top:none;}
.lavaLampWithImage3{position:relative;height:28px;float:left;}
.lavaLampWithImage3 .current{color:#008ace;}
.lavaLampWithImage3 .current a{color:#008ace;}
.lavaLampWithImage3 li{float:left;list-style:none;padding-bottom:11px;}
.lavaLampWithImage3 li.back{background:url(images/b_slider.gif) center bottom no-repeat;width:120px;height:28px;z-index:8;position:absolute;}
.lavaLampWithImage3 li a{font:bold 14px arial;text-decoration:none;color:#303030;outline:none;text-align:center;top:6px;letter-spacing:0;z-index:10;display:block;float:left;height:28px;position:relative;overflow:hidden;padding:5px 20px 0 17px;font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"&#65533;&#65533;&#65533;&#65533;";font-weight:normal;font-size:13px;}
</style>
</head>
<body>
<div class="csc_top">
 <div class="shead_left">
 <ul id="1" class="lavaLampWithImage3">  
  <li class="current">
  <a href="#" style="padding: 5px 30px 0;">Meizu</a>
  </li>
  <span class="sep">|</span>
  <li >
  <a href="#" style="padding: 5px 30px 0;">魅族</a>
  </li>
  <span class="sep">|</span>
  <li>
  <a href="#" style="padding: 5px 30px 0;">脚本之家</a>
  </li> 
 </ul>
 </div>
</div>
</div>
<script type="text/javascript" src="MZPub-CSC-0121.js"></script>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.