Mega Menü

Sticky Beispiel mit Header Block

Blick über den Wannsee in Berlin

how to design own website

Diese Mega Menü habe ich hier gefunden:

Bootstrap Mega Menü

Ein Beispiel, wie man sich der Bootstrap-Anweisungen bedienen kann. Im Prinzip bin ich nur den Anweisungen HTML - CSS - JS der Beispielseite gefolgt.

Ich habe mir hier den Block "Code Editor", anstelle der Mobirise-Menüleiste, aufgezogen und den HTML-Code vom Mega-Menü kopiert. Diesen HTML-Code habe ich hier mit einigen meiner Links angepasst und mein Logo, anstelle des Beispiel-Logos, eingebaut. Guckt auch in den Quelltext dieser Seite. Ich habe diese Navi mit <!-- Beginn externe Navigation --> markiert.

▶ Hier könnt Ihr meinen HTML-Code einsehen und kopieren und hier die CSS

Die CSS habe ich in den Bereich "CSS Editor" vom "Code Editor" kopiert und quasi unverändert gelassen.

Das JavaScript (für MouseOver am PC) habe ich in den <head> Bereich dieser Seite kopiert:

  <script>
    $(document).ready(function() {
     // executes when HTML-Document is loaded and DOM is ready
    // breakpoint and up
    $(window).resize(function(){
        if ($(window).width() >= 980){
          // when you hover a toggle show its dropdown menu
          $(".navbar .dropdown-toggle").hover(function () {
             $(this).parent().toggleClass("show");
             $(this).parent().find(".dropdown-menu").toggleClass("show");
           });
            // hide the menu when the mouse leaves the dropdown
          $( ".navbar .dropdown-menu" ).mouseleave(function() {
            $(this).removeClass("show");
          });
     
            // do something here
        }
    });
 
    // document ready
    });
  </script>

Hier noch ein Screenshot mit der Ansicht am Smartphone.

Maga Menü

Externe Navigationsleiste

Beispiel mit Header Block über einer Sticky-Navigationsleiste

© Mobirise-Tutorials.com
Datenschutzregeln


Counter Statistik