Mega Menü Sticky

Hier als Beispiel mit der Menüleiste unter einem Header Block













Bootstrap Mega Navigation

Blick über den Wannsee in Berlin

Navigation oben festsetzen mittels CSS-Element Sticky:

In diesem Beispiel habe ich als Block für mein "Mega Menü" keinen "Code Editor" Block verwendet, wie bei meinem Mega Menü hier, sondern einen einfachen Textblock. Der Grund ist, dass Mobirise um den "Code Editor" Block noch ein nicht editierbares <section> Tag setzt. Die Class, mit dem Sticky-Element, muss aber in dem äußersten Tag, hier in diesem <section> Tag, stehen.

Ich habe also meine CSS wieder im "Code Editor", in den Bereich "CSS-Editor" des Textfeldes, eingefügt (alle weitere CSS dort gelöscht) und meine HTML-Code der Navi auf der linken Seite in den Bereich "HTML-Editor" kopiert. Dort habe ich lediglich das äußere <section> Tag vom Textblock stehen lassen und noch die bereits in Bootstrap4 vorhandene Class "sticky-top" hinzugefügt.

<section class="mbr-section article content1 sticky-top">
   HTML-Code der Navi hier
</section>

  • Bitte denkt daran, dass sich eine große Navi nicht unbedingt dazu eignet fixiert zu werden, da die Bedienung dann am Smartphone schwierig bis unmöglich werden kann. Diese fixierte und geöffnete Navi lässt sich z.B. erst nach mehrmaligem Finger-Wisch nach oben scrollen.

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 ohne Header Block

und noch eine Bootstrap Navigationsleiste und dieses Beispiel

© Mobirise-Tutorials.com
Datenschutzregeln