Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:menu:bootstrap [22/05/2020 16:26] – conny
+++ programmieren:menu:bootstrap [28/12/2020 10:38] (aktuell) – [Einfaches Tree Menü] conny
@@ Zeile 55: / Zeile 55: @@
 }
 </code>
+----
+==== Einfaches Tree Menü ====
+mit jquery.js
+http://jsfiddle.net/Conny64/jy0zpwud/1/ \\
+{{ programmieren:menu:ezucojrmsr.jpg ?200 }}
+<code html>
+<ul id="MainMenu">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About Us</a></li>
+        <li>
+              <a href="#">News</a>
+              <ul class="noJS">
+                <li><a href="#">sub menu 1</a></li>
+                <li><a href="#">sub menu 2</a></li>
+                <li><a href="#">sub menu 3</a></li>
+                <li><a href="#">sub menu 4</a></li>
+                <li><a href="#">sub menu 5</a></li>
+                <li><a href="#">sub menu 6</a></li>
+            </ul>
+        </li>
+        <li><a href="#">Jobs</a></li>
+        <li><a href="#">Contact Us</a></li>
+        <li><a href="#">Admin</a></li>
+        <li><a href="#">Resources</a>
+            <ul class="noJS">
+                <li><a href="#">sub menu 1</a></li>
+                <li><a href="#">sub menu 2</a></li>
+                <li><a href="#">sub menu 3</a></li>
+                <li><a href="#">sub menu 4</a></li>
+                <li><a href="#">sub menu 5</a></li>
+                <li><a href="#">sub menu 6</a></li>
+            </ul>
+        </li>
+        <li class="lastChild"><a href="#">New Button</a></li>
+    </ul>
+</code>
+<code java>
+$(function() {
+    $('#MainMenu > li').click(function(e) {
+        e.stopPropagation();
+        var $el = $('ul',this);
+        $('#MainMenu > li > ul').not($el).slideUp();
+        $el.stop(true, true).slideToggle(10);
+    });
+        $('#MainMenu > li > ul > li').click(function(e) {
+        e.stopImmediatePropagation();
+    });
+});
+</code>
+<code css>
+ul >li {
+  margin-left: 20px;
+}
+</code>