Schritt 1: Dieses Skript verwendet die folgenden externen Dateien:
Schritt 2: Fügen Sie den folgenden Code zum HEAD-Bereich Ihrer Seite hinzu:
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="amazonmenu.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="amazonmenu.js"> /* ===================================== ** Amazon Side Bar Menu- by JavaScript Kit (www.javascriptkit.com) ** Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code ===================================== */ </script> <script> jQuery(function(){ amazonmenu.init({ menuid: 'mysidebarmenu' }) }) </script>
Schritt 3: Fügen Sie dann das folgende Beispiel-Markup zu Ihrer Seite hinzu:
<nav id="mysidebarmenu" class="amazonmenu"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Folder 0</a> <div> <p>Browse our spring collection of useful webmaster tools and resources! Everything from JavaScript, CSS to PHP are covered!</p> <ul> <li><a href="#">Sub Item 0.1</a></li> <li><a href="#">Sub Item 0.2</a></li> <li><a href="#">Sub Item 0.3</a></li> <li><a href="#">Sub Item 0.4</a> <div> <p><h3><a href="#">Animated Gif Generator</a></h3> Animated Gif Generator lets you easily create an animated gif by uploading a series of still images! </p> <p><h3><a href="#">Gradient Image Maker</a></h3> Gradient images are used everywhere in web page design, such as the background of form buttons, DIVs, to act as shadows etc. This tool lets you easily generate a gradient image. </p> </div> <li><a href="#">Sub Item 0.5</a></li> </ul> </div> </li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a> <ul> <li>Sub Item 1.3.1</li> <li>Sub Item 1.3.2</li> <li>Sub Item 1.3.3</li> </ul> </li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.1</a></li> </ul> </li> <li><a href="#style/">Item 4</a></li> </ul> </nav>