Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobi-Mega-Menü
#1
Ich finde das Mobi-eigene "Mega Menü" nicht mehr.
In welchem Theme war das?

ich weiß, dass das nicht so doll war, aber fürs aktuelle Projekt war das, glaube ich, ausreichend
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
wir sollten eine neue Rubrik im Stobiforum einrichten "sucht mal für mich..." Hehe!
viele Grüße
coco

RocketCake 3.1/NOF 2015 /win10prof/64/Freund der Insel Elba. Eigene kleine RC-Websites Wohnangebote: elba-app.de, Casa Heidrun, Gallo Nero, Paradiso, ai Peri usw.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Ok ok, ich frag nix mehr
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
(10.05.2020, 10:11)stobi_de schrieb: Ok ok, ich frag nix mehr

Ist es jetzt Dein Muttertagsgeschenk für mich :lachtot:

*scherz  Tounge

Zitat:Ich finde das Mobi-eigene "Mega Menü" nicht mehr.

https://mobirise.com/bootstrap-menu/boot...ample.html
Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Moin,

nee Babs - was ist das denn für eine Uraltseite :D Das ist noch aus Version 3.0.5 (schätze mal so 4 Jahre alt - von 2016) :eek: Da ist auch nichts zum downloaden, außer Mobirise selbst und erst recht kein Mega-Menü.

Ich wüsste jetzt (aus dem Kopf) kein "Mega Menü", das Mobirise mit seinen Templates anbietet!? Jetzt wo Du es sagst, glaube ich aber es auch mal gesehen zu haben und dachte noch: "ach geht doch".

Ich habe schon gesucht, kann das aber auch nicht finden.

Beim "Block Pack for M4" ist so eine ulkige Navi mit einem großen Bild dabei, die den gesamten Bildschirm füllt - vielleicht hast Du an die gedacht ?

Ich hatte da mal einige Bootstrap "Mega Menüs" auf meinen Testseiten eingebaut - ich denke mal, dass Du das aber nicht meinst.

http://www.mobirise-tutorials.com/Testse...-Menu.html

... oder auch hier:

http://www.mobirise-tutorials.com/Mega-Menu/


Kannst auch hier mal gucken:

https://www.w3schools.com/howto/howto_css_mega_menu.asp

... oder hier:

https://bootstrapious.com/p/bootstrap-mega-menu

... es gibt unendliche viele und auch kostenlose Beispiele.

Wahrscheinlich fragst Du aber, um eben die fertige "Mobirise-Lösung" als Template zu verwenden, sozusagen für den "schnellen Einbau".
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Claus hatte mal für mich ein fremdes Mega-Menü eingebaut. Mobirise ist da ziemlich fies und generiert da immer bei jeder Publizierung eine "Werbesection", die man händisch entfernen muss. Das fand ich extremst nervig. Ich würde keine Fremdnavi mehr nehmen!
Ein Mobi-Mega-Menü kenne ich aber jetzt auch nicht. Leider hat Claus keine Menü-Block-Übersicht, weil das nicht geht! Cool
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Claus und auch Stobi verwenden da ja immer gerne dieses responsive Navik-Menü, das es für kleines Geld zu kaufen gibt. Die bieten u.a. auch ein "Mega-Menü" an. Das kennt Frank ja aber.

... übrigens dieser "Werbehinweis" auf Mobirise steht nur in den kostenlosen Standard-Themen, wie z.B. "Mobirise3" oder "Mobirise4".

Die Class "engine" stellt das verdeckt (nach links verschoben) auf die Seite, allerdings nicht an die Navi. Ist aber im Quelltext zu erkennen und ist daher ein SEO-Werkzeug für Mobirise.

Beispiel:

Code:
/*# sourceMappingURL=style.css.map */
.engine {
   position: absolute;
   text-indent: -2400px;
   text-align: center;
   padding: 0;
   top: 0;
   left: -2400px;
}

Code:
<section class="engine"><a href="https://mobirise.info/m">free website design templates</a></section>

In den gekauften Themen steht das nicht.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Ich frage jetzt nicht, ich antworte :D

Das betreffende Menu gibt es in Market M4.
Ist aber völlig unbrauchbar und funktioniert auch nicht richtig.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Moin,

ja -  danke Frank.

Das ist tatsächlich manchmal schwer zu finden, wenn es sich um die "Alternativ-Navi" handelt.

Sieht ziemlich bescheiden aus Sad aber was funktioniert denn bei der nicht?

So sieht das Teil aus:

https://mobirise.com/extensions/marketm4/headers.html


.jpg  MarketM4-Navi.JPG (Größe: 55,74 KB / Downloads: 17)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Wenn ich im Hauptmenü einen Punkt hinzufügen will, klebt der direkt am Vörgänger-Menüpunkt. Da hat wer das padding oder margin verschlampt (dieses Menü in Wood M4 eingefügt).
Die menüpunkte werden in dem Sinne nicht zweispaltig im Untermenü.
Es wird ein DIV in der Höhe des eingebauten Bildes einfach mit Listenelementen aufgefüllt, die dann 2-spaltig umbrechen.
Symetrisch wird die Sache dann erst mit 16 Untermenü-Punkten (oder so)

Gezielt 2-spaltig anordnen geht nicht ohne viel Rumgewurschtel, aber dann nehme ich sowieso lieber Navik, wenn ich handarbeit machen will
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
ah - danke, dann muss ich nicht gucken.

Das ist natürlich dann sehr primitiv gelöst Sad

Aber die von "Navik" sieht ja auch tausend mal besser aus.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Das Ding wäre einfach was auf die Schnelle gewesen.
Ich habe bei meinem trockenbauer 7 Untermenüpunkte.
Ist meiner Meinung nach schon etwas zuviel.
Dafür wäre das geeignet gewesen...eigentlich
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
... habe da mal noch eine sehr einfach anzuwendende Bootstrap Mega-Navi gefunden und beispielhaft hier eingebaut:

http://www.mobirise-tutorials.com/Mega-M...-Menu.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
ich schaus gleich mal genauer
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Hier ist mal noch mein gesamter Code, den ich in den "Code Editor" in den Bereich "HTML Code" kopiert habe.

Dabei habe ich einen einfachen Textblock verwendet (aus der Rubrik "Article") und lediglich das <section> Tag stehen lassen (sowie die Mobirise-Parameter).

Code:
    <!-- Beginn eigene Bootstrap-Menüleiste -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm">
      <a href="#" class="navbar-brand font-weight-bold d-block d-lg-none">MegaMenu</a>
      <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler">
              <span class="navbar-toggler-icon"></span>
          </button>
      <div id="navbarContent" class="collapse navbar-collapse">
        <ul class="navbar-nav mx-auto">
          <!-- Megamenu-->
          <li class="nav-item dropdown megamenu"><a id="megamneu" href data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle font-weight-bold text-uppercase">Mega Menu</a>
            <div aria-labelledby="megamneu" class="dropdown-menu border-0 p-0 m-0">
              <div class="container">
                <div class="row bg-white rounded-0 m-0 shadow-sm">
                  <div class="col-lg-7 col-xl-8">
                    <div class="p-4">
                      <div class="row">
                        <div class="col-lg-6 mb-4">
                          <h6 class="font-weight-bold text-uppercase">MegaMenu heading</h6>
                          <ul class="list-unstyled">
                            <li class="nav-item"><a href class="nav-link text-small pb-0">Unique Features</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Image Responsive</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Auto Carousel</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Newsletter Form</a></li>
                          </ul>
                        </div>
                        <div class="col-lg-6 mb-4">
                          <h6 class="font-weight-bold text-uppercase">MegaMenu heading</h6>
                          <ul class="list-unstyled">
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Unique Features</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Image Responsive</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Auto Carousel</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Newsletter Form</a></li>
                          </ul>
                        </div>
                        <div class="col-lg-6 mb-4">
                          <h6 class="font-weight-bold text-uppercase">MegaMenu heading</h6>
                          <ul class="list-unstyled">
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Unique Features</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Image Responsive</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Auto Carousel</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Newsletter Form</a></li>
                          </ul>
                        </div>
                        <div class="col-lg-6 mb-4">
                          <h6 class="font-weight-bold text-uppercase">MegaMenu heading</h6>
                          <ul class="list-unstyled">
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Unique Features</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Image Responsive</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Auto Carousel</a></li>
                            <li class="nav-item"><a href class="nav-link text-small pb-0 ">Newsletter Form</a></li>           
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-5 col-xl-4 px-0 d-none d-lg-block" style="background: center center url(http://www.mobirise-tutorials.com/Mega-Menu/assets/images/mbr-1776x1105.jpg)no-repeat; background-size: cover;"></div>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item"><a href="./index.html" class="nav-link font-weight-bold text-uppercase">Anderes Beispiel</a></li>
          <li class="nav-item"><a href="http://www.mobirise-tutorials.com/Suchen.php" target="_blank" class="nav-link font-weight-bold text-uppercase">Suchen</a></li>
          <li class="nav-item"><a href="http://www.mobirise-tutorials.com/" target="_blank" class="nav-link font-weight-bold text-uppercase">Mobirise-Tutorials</a></li>
        </ul>
      </div>
    </nav>
    <!-- Ende eigene Bootstrap-Menüleiste -->

... übrigens diese Bootstrap-Classes verhindern die Anzeige vom Navi-Foto am kleinen Display (wie es ja auch richtig sein sollte) - also unter 992px Breite:

Zitat:<div class="d-none d-lg-block">hide on screens smaller than lg</div>

... zusätzlich habe ich diese CSS in den Bereich "CSS Editor" kopiert:

Code:
.megamenu {
  position: static;
}
.megamenu .dropdown-menu {
  background: none;
  border: none;
  width: 100%;
}

Ich wollte noch, dass die Navi am PC fixiert erscheint und am Handy nicht (da dort sonst der Scroller fehlt). Dazu habe ich dem <section> Tag noch meine class="mysticky-top" gegeben und diese Style-Anweisung muss dann im <head> Tag der Seite stehen, damit diese auf das <section> Tag wirken kann:

Code:
  <!-- Bootstrap Navigation anheften ab 992px Media-Breite -->
  <style>
    @media (min-width: 992px) {
        .mysticky-top{
            position:-webkit-sticky;
            position:sticky;
            top:0;
            z-index: 1020;
        }
    }
  </style>
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Kids M4 Menü stobi_de 5 129 23.04.2020, 10:46
Letzter Beitrag: stobi_de
  Mobi-Style-Editor stobi_de 2 114 20.04.2020, 16:57
Letzter Beitrag: Martin73
  Mobi-Preis stobi_de 8 246 19.04.2020, 17:43
Letzter Beitrag: Tommy Herrmann
  Mobi-Shop: Artikel ausverkauft stobi_de 19 470 11.04.2020, 08:14
Letzter Beitrag: Tommy Herrmann
  POPUP BUILDER von MOBI c-laus 10 1.093 09.04.2020, 10:49
Letzter Beitrag: stobi_de
  Textausrichtung in einem Dropdown-Menü Kay 7 231 05.04.2020, 15:24
Letzter Beitrag: Kay
  Hamburger Menü bei M4-Thema ausrichten Martin73 0 84 02.04.2020, 15:58
Letzter Beitrag: Martin73
  Menü unten! stobi_de 1 147 28.02.2020, 19:58
Letzter Beitrag: stobi_de
  Position der Infofelder im Menü stobi_de 3 189 27.02.2020, 09:55
Letzter Beitrag: Tommy Herrmann
  MBR4: Menü umbauen - Hilfe Rettungsfuzzy 1 175 23.02.2020, 05:45
Letzter Beitrag: Tommy Herrmann



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!