Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

Amazon-Side-Bar-Menu-with-jquery

Amazon Side Bar Menu with jquery

Beschreibung:

Dieses Menü orientiert sich am Seitenleistenmenü von Amazon.com und bietet ein flexibles, inhaltsreiches ausklappbares Menü. Es unterstützt unendlich viele Untermenüs. Darüber hinaus reagiert das Menü auf kleineren Bildschirmen und Mobilgeräten, indem die Unterebenen gestapelt werden, wenn sie über dem übergeordneten Menü angezeigt werden, um Platz zu sparen. Dies ist ein robustes Menü, und zwar auf mehreren Plattformen!

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>

Download

Demo