Amazon-Side-Bar-Menu-with-jquery

Beschreibung:

Schritt 1: Dieses Skript verwendet die folgenden externen Dateien:

• jQuery 1.4 oder höher (über Google CDN bereitgestellt)
• amazonmenu.js
• amazonmenu.css

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>

Download

Demo