Ein Sticky Menu bzw. feststehendes Menü mit HTML als Mobile Menü realisieren, welches sich beim scrollen dynamisch anpasst: Realisation eines Sticky Header Menu.
Lässt sich eine Sticky Menu bzw. feststehendes Menü mit HTML und CSS realisieren, ohne JavaScript einzusetzen? Die Antwort lautet: Ja.
Diese Anleitung stellt eine Sticky Menu Lösung vor, die zugleich responsive ist. Auf mobilen Geräten wie dem Smartphone passt sich das Menü an und wird zum Mobile Menü.
In diesem Fall setzen wir allerdings die jquery und etwas JavaScript-Code ein, um überprüfen zu können, ob der Benutzer nach unten scrollt. Ist dies der Fall, so wird über CSS das Erscheinungsbild des Sticky Menu angepasst: die Höhe des Navigationsbereichs im Header reduziert sich, um mehr Platz für die Darstellung des Contents zur Verfügung zu haben.
BEISPIEL ANSEHENRealisation eines Sticky Menu / feststehenden Menü mit HTML
Prinzipiell können wir den Code natürlich auch „verschlanken“, den JavaScript-Teil entnehmen und mit einigen kleineren Änderungen am CSS den Navigationsbereich im Header fixieren. Dadurch fehlt zwar die Möglichkeit, das Scrollverhalten des Benutzers zu prüfen und entsprechend zu interagieren. Im Gegenzug hätten wir jedoch ein schnelles und schlankes responsives Sticky Menu, welches einige Vorteile bietet:
- Es konzentriert sich auf das Wesentliche, ohne dass der Code aufgebläht wird und trägt damit der Idee des Mobile First Rechnung. Denn seit Oktober 2016 prüft auch Google zuerst, ob es eine mobile Version der Website gibt und ob diese über eine hohe Usability verfügt. Dazu gehören unter anderem auch kleine Datenmengen und schnelle Ladezeiten.
- Schlanke Webseiten mit geringen Datenmengen und schnellen Ladezeiten erhalten von Suchmaschinen einen Bonus, der sich positiv auf das Ranking auswirkt.
Ein solches schlankes Mobile Menü ohne JavaScript stellen wir hier vor.
Der Animationseffekt für das Mobile Menü besteht übrigens auch ohne den Einsatz von JavaScript fort, da er über CSS3-Transitions erzielt wird.
Wie lässt sich das Design unseres Beispiels umsetzen?
Der Aufbau für das Mobile Menu entspricht der unter Mobile Menü ohne JavaScript vorgestellten Lösung und wird dort ausführlich erklärt.
Nachfolgend stellen wir daher den Code vor, beschränken uns bei den Erläuterungen aber auf die Bereiche, die zusätzlich zu integrieren sind, um nicht nur ein Mobile Menü zu kreieren, sondern dieses auch als Sticky Menu bzw. feststehende Menü zu realisieren:
Bereich: Head
/*Einbinden der jquery*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var pixel = 150; //Anzahl der Scroll-Pixel, bevor das Menü angepasst wird
$(window).bind('scroll', function () {
if ($(window).scrollTop() > pixel) {
$('#menu').addClass('fixed');
$('#main').addClass('fixed');
} else {
$('#menu').removeClass('fixed');
$('#main').removeClass('fixed');
}
});
</script>
HTML (Body)
<body>
<nav id="menu">
<div class="brand"><a href="https://a-vista-studios.de"><img src="logo_avs.png" alt=""/></a></div>
<a href="#nav-m" id="nav-m"><img src="btn-mobile.png" alt=""/></a>
<a href="#" class="close"><img src="btn-mobile-close.png" alt=""/></a>
<ul class="menu">
<li><a href="#a1">Abschnitt 1</a></li>
<li><a href="#a2">Abschnitt 2</a></li>
<li><a href="#a3">Abschnitt 3</a></li>
<li><a href="#a4">Abschnitt 4</a></li>
<li><a href="#a5">Abschnitt 5</a></li>
</ul>
</nav>
<main id="main">
<div id="abschnitt1">
<div class="content">
<span id="a1"><strong>Abschnitt 1</strong><br /></span>
BLINDTEXT
</div>
</div>
<div id="abschnitt2">
<div class="content">
<span id="a2"><strong>Abschnitt 2</strong><br /></span>
BLINDTEXT
</div>
</div>
<div id="abschnitt3">
<div class="content">
<span id="a3"><strong>Abschnitt 3</strong><br /></span>
BLINDTEXT
</div>
</div>
<div id="abschnitt4">
<div class="content">
<span id="a4"><strong>Abschnitt 4</strong><br /></span>
BLINDTEXT
</div>
</div>
<div id="abschnitt5">
<div class="content">
<span id="a5"><strong>Abschnitt 5</strong><br /></span>
BLINDTEXT
</div>
</div>
</main>
</body>
CSS: Allgemeine Auszeichnungen und Logo
/*----- General Formating -----*/
body, html {
font-family: Verdana, Arial, sans-serif;
font-size: 0.95em;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
a:active, a:focus {outline: none;}
main {
line-height: 180%;
}
/*------------------------------*/
/*----- Logo -----*/
.brand {
float: left;
padding: 0.5em 1em 0 0.5em;
}
/*----------------*/
CSS: Menü
/*----- Menu -----*/
nav {
margin: 0 auto;
width: 100%;
height: 11em;
text-align: right;
position: relative;
background: rgba(255, 255, 255, 1.0);
border-bottom: 1px solid white;
}
nav ul {
margin: 0;
padding: 8.1em 0 0 0;
height: 100vh;
}
nav ul li {
list-style: none;
margin: 0;
display: inline;
}
nav ul li a {
color: #009999;
position: relative;
padding: 0 0 0.5em 0;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
}
nav ul.menu li a:hover {
color: #03405f;
border-bottom: 2px solid #03405f;
}
/*----------------*/
/*----- Fixed Menu -----*/
nav#menu.fixed {
position: fixed;
top: 0;
padding: 0;
height: 6em;
}
nav#menu.fixed ul {
padding: 0.75em 0 0 0;
font-size: 90%;
}
nav#menu.fixed .brand img {
margin-top: 0em;
height: 5em;
}
nav#menu.fixed a {
padding: 1em 0;
}
/*--------------------------------------*/
CSS: Content
/*----- Content Sections -----*/
#abschnitt1, #abschnitt2, #abschnitt3, #abschnitt4, #abschnitt5 {
min-height: 100%;
width: 100%;
}
#abschnitt1 {
color: #555;
background: #caced2;
}
#main.fixed #abschnitt1 {
margin-top: 150px;
}
#abschnitt2 {
color: #333;
background: #b1b8be;
}
#abschnitt3 {
color: #000;
background: #95a1ae;
}
#abschnitt4 {
color: #fff;
background: #778899;
}
#abschnitt5 {
color: #fff;
background: #525f6d;
}
#abschnitt1 .content,
#abschnitt2 .content,
#abschnitt3 .content,
#abschnitt4 .content,
#abschnitt5 .content {
padding: 1.5em 1.5em 3em 1.5em;
}
#a1{
padding-top: 14em;
}
#a2, #a3, #a4, #a5 {
padding-top: 8.1em;
}
/*--------------------------------------*/
CSS: Media Queries
/*----- Media Queries -----*/
@media screen and (min-width: 961px) {
nav a#nav-m,
nav a.close {
display: none;
}
nav #menu.fixed ul {
margin-top: 2.25em;
}
nav ul li {
margin: 0 30px 0 0;
}
}
@media screen and (max-width: 960px) {
/*Formatierung Mobiles Menue*/
nav ul {
top: 11.15em;
position: absolute;
background: #ccc;
width: 100%;
left: -100%;
list-style-type:none;
margin: 0;
padding: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
nav#menu.fixed ul {
top: 6.8em;
}
nav ul li{
display: block;
text-align: left;
padding: 0em 0.5em;
border-bottom: 1px solid #fff;
}
nav ul li a {
color: #555;
padding: 1em 0;
}
nav ul.menu li a:hover {
border-bottom: 0;
}
/*Hamburger-Icon*/
nav a#nav-m img,
nav a.close img {
width: 40px;
height: auto;
}
nav > .close,
nav a#nav-m:target {
display: none;
}
nav a:target ~ ul,
nav a:target ~ .close {
display: inline-block;
}
nav nav#menu.fixed a:target ~ .close {
margin-top: -14px;
}
nav a:target ~ .close {
position: absolute;
margin-left: -40px;
}
nav a:target ~ ul {
left: 0;
}
}
/*--------------------------------------*/
Erläuterung des CSS für die Erstellung des Sticky Menu / festehenden Menüs
Die drei vorstehenden Codebereiche HTML (Body), CSS: Allgemeine Auszeichnungen und Logo sowie CSS: Media Queries werden bereits in der Anleitung Mobile Menü ohne JavaScript erklärt.
Ergänzungen bzw. Erweiterungen für das Sticky Menu finden sich in den drei Codeblöcken Bereich: Head, CSS: Menü sowie CSS: Content.
Wir blicken hinter die Kulissen
- Bereich: Head
Zunächst wird die jquery über googleapis.com eingebunden.
Mit einigen Zeilen JavaScript wird erreicht, dass ab einem Scrollen um 150 Pixel nach unten die Bezeichner mit der ID #menu sowie #main um die Klasse .fixed ergänzt werden.
Beträgt das Scrollen weniger als 150 Pixel, so greift die ELSE-Anweisung und die Klasse .fixed wird wieder entfernt.Damit erhalten wir die Möglichkeit, beim Scrollen um mehr als 150 Pixel nach unten den Bereich über CSS der Form #menu.fixed anzusprechen. - CSS: Menü
Ergänzend zum Mobile Menü ohne JavaScript findet sich hier der Bereich
/*—– Fixed Menu —–*/
Das CSS teilt dem Browser mit, wie das Sticky Menu bzw. feststehende Menü behandelt werden soll, wenn die zuvor erwähnten mehr als 150 Pixel nach-unten-scrollen erreicht sind. - CSS: Content
Dieser Bereich ist weitestgehend selbsterklärend. Das für Demonstrationszwecke erstellte Demo Sticky Menu referenziert nicht auf eigene (neue) Inhaltsseiten. Sondern beim Anklicken der Menüpunkte wird Mittels Anchor (= Anker) zu dem entsprechenden Bereich auf der Seite gesprungen und der jeweilige Bereich entsprechend über das CSS formatiert.
Fazit: die Anleitung zur Erstellung eines Sticky Menu / feststehenden Menüs inklusive Mobile Menu für mobile Endgeräte basiert auf der unter Mobile Menü ohne JavaScript vorgestellten Lösung. Ergänzend wurde noch ein Sticky Menu integriert und zur besseren Visualisieren ein Anker-Menü zu Inhaltsbereichen mit unterschiedlichen Hintergrundfarben integriert
Stichworte: Sticky Menu, Sticky Header Menu, Feststehendes Menü HTML
Hey, echt stark! Ich habe das gleich bei unserer online Schülerzeitung eingebaut. Es hat nach ein paar Anläufen super funktioniert, und das sogar auf meinem gebrauchten, nicht gerade neuesten Computer. Super hilfreich, vielen Dank für die Anleitung!
Hallo Stefan, vielen Dank für die Antwort! Gestest habe ich mit Firefox und Edge und kann bestätigen, dass der vorgestellte Code fehlerfrei funktioniert. Wenn ich allerdings einen Link in den Blindtext einbaue, ergibt sich das interessante Phänomen, dass der Link nur in der Smartphone-Ansicht anklickbar ist, also bei sichtbarem Hamburger-Icon. Ist das Icon nicht sichtbar, ist der Link auch nicht anklickbar.
LG!
Hallo Alexandra,
danke für den Hinweis. Das ist auch schon länger her, dass ich den Code erstellt habe. Es ging dabei vor allem darum, eine Lösung vorzustellen, bei der sich mit wenig Code ein Mobile Menü bzw. ein Sticky-Menü realisieren lässt.
Ich habe mir den Code soeben nochmals angeschaut: im CSS steht bei nav ul folgendes:
nav ul {...
height: 100vh;}
Damit wird erzwungen, dass das Menü die volle Bildschirmhöhe einnimmt. Das macht auch Sinn beim Mobile Menü, denn dann bedeckt dieses nach dem einfaden den kompletten Contentbereich – sieht besser aus.
Leider überdeckt es beim normalen Menü (also auf größeren Bildschirmen) den Content, auch wenn das nicht zu sehen ist. Dadurch sind Links nicht anklickbar. Das sollte sich einfach lösen lassen, indem das CSS ein wenig modifiziert wird und der Wert „height: 100vh“ nur bei einem Viewport greift, bei dem das Mobile Menü erscheint. Also in diesem Codebeispiel ab 960px Bildschirmbreite abwärts.
Viele Grüße
Stefan
Ganz vielen Dank, dass Sie sich die Mühe gemacht haben, nachzusehen! Jetzt funktioniert es einwandfrei! 🙂
LG!
Ganz vielen Dank, dass Sie sich die Mühe gemacht haben, nachzusehen! Jetzt funktioniert es einwandfrei!
Prima! 🙂
Das Menü funktioniert wunderbar und es freut mich besonders, dass man mit so wenig Code auskommt. Eine Frage hätte ich aber: Meine Links im Main-Bereich sind nicht anklickbar bzw. nur dann, wenn man den z-Index des entsprechenden Layers erhöht (und der Inhalt dann beim Scrollen über das Menü gleitet). Ist das normal oder liegt es daran, dass ich bei der Anpassung der Vorgaben an meine speziellen Bedürfnisse Fehler eingebaut habe?
LG!
Hallo Alexandra,
weiter oben im Artikel gibt es den Button BEISPIEL ANSEHEN. Darüber lässt sich eine Demo-Seite aufrufen, die in den von uns getesteten Browsern ohne Probleme funktioniert und auf dem vorgestellten Code basiert.
Sie können ja einmal in dem von Ihnen verwendeten Browser testen, ob die Demo-Seite dort fehlerfrei funktioniert. Wenn ja, sollte es an Ihrem individuellen Code liegen. Falls Sie z.B. für Ihren eigenen Content-Bereich einen hohen z-index eingetragen haben, kann es natürlich gut sein, dass der Content das Menü „überdeckt“.
Viele Grüße
Stefan