Responsive und Slick Navigation mit SmartMenus und Hamburger Button
- 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 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>
<!-- 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" />
Für den Hamburger-Button beim Verkleinern der Seite oder am Smartphone, habe ich folgende CSS Style-Anweisungen und dieses JavaScript “Zwischen Head Tags” der Layout-HTML kopiert:
<!-- Style mit Hamburger Icon -->
<style>
.main-menu-btn {
position: relative;
display: inline-block;
text-align: center;
width: 28px;
height: 28px;
text-indent: 28px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* hamburger icon */
.main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after {
position: absolute;
top: 50%;
left: 2px;
height: 2px;
width: 24px;
background: #fff;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.main-menu-btn-icon:before {
content: '';
top: -7px;
left: 0;
}
.main-menu-btn-icon:after {
content: '';
top: 7px;
left: 0;
}
/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
height: 0;
background: transparent;
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-menu {
display: none;
}
#main-menu-state:checked ~ #main-menu {
display: block;
}
@media (min-width: 800px) {
/* hide the button in desktop view */
.main-menu-btn {
position: absolute;
top: -99999px;
}
/* always show the menu in desktop view */
#main-menu-state:not(:checked) ~ #main-menu {
display: block;
}
}
</style>
<!-- Style zur Anpassung der Navi auf Bildschirmbreite -->
<style type="text/css">
@media (min-width: 800px) {
#main-menu > li {
float: none;
display: table-cell;
width: 1%;
text-align: center;
}
}
</style>
<!-- Script Hamburger Button -->
<script>
$(function() {
var $mainMenuState = $('#main-menu-state');
if ($mainMenuState.length) {
// animate mobile menu
$mainMenuState.change(function(e) {
var $menu = $('#main-menu');
if (this.checked) {
$menu.hide().slideDown(250, function() { $menu.css('display', ''); });
} else {
$menu.show().slideUp(250, function() { $menu.css('display', ''); });
}
});
// hide mobile menu beforeunload
$(window).bind('beforeunload unload', function() {
if ($mainMenuState[0].checked) {
$mainMenuState[0].click();
}
});
}
});
</script>
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.
Achtet auf die zusätzliche Einfügung oben für den Hamburger Button.
<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
<span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>
Hier noch eine Ansicht vom Handy mit Hamburger Button, nachdem sich die Navigation durch die CSS auf vertikal angepasst hat.
Viel Erfolg!
