Von jQuery_jquery implementierter Code für den vertikalen Menüeffekt einer Webseite-js-Tutorial-php.cn

Von jQuery_jquery implementierter Code für den vertikalen Menüeffekt einer Webseite

WBOY

Freigeben： 2016-05-16 15:42:31

Original

1120 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den von jQuery implementierten Code für den vertikalen Menüeffekt einer Webseite. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein vertikaler Webseitenmenücode, der auf jQuery basiert, einem faltbaren und erweiterbaren sekundären Webseitenmenü. Ändern Sie das Verwaltungsmenü, das in der Hintergrundverwaltung verwendet werden kann, um es auf der linken Seite anzuzeigen. Nach dem Hinzufügen von jquery ist es praktisch, die Funktion zum Erweitern und Reduzieren von Menüs zu realisieren und außerdem einige Animationseffekte hinzuzufügen, was eine gute Kompatibilität aufweist.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-v-web-menu-style-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 function initMenu() {
 $('#menu ul').hide();
 $('#menu ul:first').show();
 $('#menu li a').click(
 function() {
 var checkElement = $(this).next();
 if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
 return false;
 }
 if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
 $('#menu ul:visible').slideUp('normal');
 checkElement.slideDown('normal');
 return false;
 }
 }
 );
 }
$(document).ready(function() {initMenu();});
</script>
<style>
body{font-family: Helvetica, Arial, sans-serif; font-size: 0.9em;}
p{line-height: 1.5em;}
ul#menu, ul#menu ul{list-style-type:none; margin: 0; padding: 0; width: 15em;}
ul#menu a{display: block; text-decoration: none;}
ul#menu li{margin-top: 1px;}
ul#menu li a{background: #333; color: #fff; padding: 0.5em;}
ul#menu li a:hover{background: #000;}
ul#menu li ul li a{background: #ccc; color: #000; padding-left: 20px;}
ul#menu li ul li a:hover{background: #aaa; border-left: 5px #000 solid; padding-left: 15px;}
.code{border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0;}
.code code{display: block; padding: 3px; margin-bottom: 0;}
.code li{background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em;}
.indent1{padding-left: 1em;}
.indent2{padding-left: 2em;}
</style>
<title>网页竖排菜单jQuery版</title>
<!--[if lt IE 8]>
 <style type="text/css">
 li a {display:inline-block;}
 li a {display:block;}
 </style>
 <![endif]-->
</head>
<body>
<ul id="menu">
<li>
   <a href="#">Weblog工具</a>
   <ul>
    <li><a href="#">PivotX</a></li>
    <li><a href="#">WordPress</a></li>
   </ul>
  </li>
  <li>
   <a href="#">程序语言</a>
   <ul>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Ruby</a></li>
    <li><a href="#">Python</a></li>
    <li><a href="#">PERL</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">C#</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Cool Stuff</a>
   <ul>
    <li><a href="#">Apple</a></li>
    <li><a href="#">Maitianquan</a></li>
    <li><a href="#">XBOX360</a></li>
    <li><a href="#">Nifengla</a></li>
    <li><a href="#">Nintendo</a></li>
   </ul>
  </li>
 </ul>
</body>
</html>

Nach dem Login kopieren

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