Responsive und Slick Navigation mit SmartMenus horizontal
- Responsive zentrierte horizontale Navigation. Slick Navi ab 800px und einem anderen Banner ab 734px
- Geht mit der Maus in der Navi auch über ‘Themen & Mega Menü’ für ein Maga-Menü inklusive Lytebox
- Hier geht es zum Download der Beispieldateien von smartmenus.org zum besseren Verständnis mit etlichen Beispielen
- Beispiel vertikale Navigationsleiste
- Beispiel responsive Layoutbereiche
Diese responsive Website enthält 1 CSS-Navigationsleiste.
Diese Seite hat keinen Layoutbereich.
Sie wird dagegen nur mit einer Style-Anweisung im <body> responsive, so wie in meiner “Tutorial Seite” beschrieben.
Der Layout von NOF hat hier folgendes DIV erhalten.
Am “Beginn des Haupttextes” <body>
<div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%;">
Schließt das DIV am “Ende des Haupttextes” </body> wieder:
</div>
Für diese Navigation habe ich die gleichen Dateien verwendet wie bei der vertikalen Navigation, die Ihr Euch an den Links unten downloaden könnt (rechte Maustaste > Ziel speichern unter)
- jquery.smartmenus.js
- jquery.smartmenus.keyboard.js
- sm-core-css.css (CSS-Datei bitte unverändert lassen)
- sm-blue.css (hier modifiziert als sm-darkblue.css auf github mit maximaler Breite für das Media-Query hier 800px)
Ich habe diese Dateien und eine optionale Zentrierung der Navi sowie das JavaScript hier in unterschiedliche Verzeichnisse kopiert und folgende Verlinkungen für die SmartMenus Navigation in die HTML meiner Seite hinzugefügt. Achtet auf die korrekten relativen Pfadangaben.
> “Beginn des Haupttextes” <body> (nach dem DIV für die absolute Position)
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Keyboard Addon -->
<script type="text/javascript" src="../addons/keyboard/jquery.smartmenus.keyboard.js"></script>
<!-- Navigation zentrieren (optional) -->
<style type="text/css">
@media (min-width: 800px) {
#main-nav {
line-height: 1;
text-align: center;
background-color: #3C5A9A;
}
#main-menu {
display: inline-block;
}
}
</style>
<!-- SmartMenus jQuery init horizontal -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
$('#main-menu').smartmenus('keyboardSetHotkey', '123', 'shiftKey');
});
</script>
<!-- SmartMenus core CSS -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme modifiziert -->
<link href="../css/sm-blue/sm-darkblue.css" rel="stylesheet" type="text/css" />
Nun sieht die Text-Navigation mit den entsprechenden CSS-Klassen so aus, wie im Link unten. Hier als Beispiel meine Navigation dieser SmartMenus-Navigationseite. Fügt den Code in die HTML vom Textfeld ein. Die Navigationsleiste hat hier die id="main-nav"
> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button “Textfeld” > Button “HTML”
Wegen der Größe meiner horizontalen Beispiel-Navigationsleiste guckt hier und ladet Euch diese Beispiel-Navigationsleiste herunter > rechte Maustaste > Ziel speichern unter.
Hier noch eine Ansicht vom Handy, nachdem sich die Navigation durch die CSS auf vertikal angepasst hat.
Viel Erfolg!
