Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:menu:bootstrap [22/05/2020 16:22] – angelegt conny
+++ programmieren:menu:bootstrap [28/12/2020 10:38] (aktuell) – [Einfaches Tree Menü] conny
@@ Zeile 9: / Zeile 9: @@
 {{programmieren:menu:ezltqeruv8.png}}
-<code html| HTML>
+<code javascript| HTML>
 <div>
 	<hr>
@@ Zeile 43: / Zeile 43: @@
 </code>
-<code js| JS>$('.navbar-nav .nav-link').click(function(){
+<code javascript| JS>$('.navbar-nav .nav-link').click(function(){
     $('.navbar-nav .nav-link').removeClass('active');
     $(this).addClass('active');
 })
+</code>
+<code css| CSS>
+.navbar-dark .nav-item > .nav-link.active  {
+    color:white;
+    background-color: red;
+}
+</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>