L\u00e4sst sich eine Sticky Menu bzw. feststehendes Men\u00fc mit HTML und CSS realisieren, ohne JavaScript einzusetzen? Die Antwort lautet: Ja.<\/p>\n
Diese Anleitung stellt eine Sticky Menu L\u00f6sung vor, die zugleich responsive ist. Auf mobilen Ger\u00e4ten wie dem Smartphone passt sich das Men\u00fc an und wird zum Mobile Men\u00fc.<\/p>\n
In diesem Fall setzen wir allerdings die jquery und etwas JavaScript-Code ein, um \u00fcberpr\u00fcfen zu k\u00f6nnen, ob der Benutzer nach unten scrollt. Ist dies der Fall, so wird \u00fcber CSS das Erscheinungsbild des Sticky Menu angepasst: die H\u00f6he des Navigationsbereichs im Header reduziert sich, um mehr Platz f\u00fcr die Darstellung des Contents zur Verf\u00fcgung zu haben.<\/p>\nBEISPIEL ANSEHEN<\/span><\/a>\n Prinzipiell k\u00f6nnen wir den Code nat\u00fcrlich auch \u201everschlanken\u201c, den JavaScript-Teil entnehmen und mit einigen kleineren \u00c4nderungen am CSS den Navigationsbereich im Header fixieren. Dadurch fehlt zwar die M\u00f6glichkeit, das Scrollverhalten des Benutzers zu pr\u00fcfen und entsprechend zu interagieren. Im Gegenzug h\u00e4tten wir jedoch ein schnelles und schlankes responsives Sticky Menu, welches einige Vorteile bietet:<\/p>\n Ein solches schlankes Mobile Men\u00fc ohne JavaScript stellen wir hier vor.<\/p>\n Der Animationseffekt f\u00fcr das Mobile Men\u00fc besteht \u00fcbrigens auch ohne den Einsatz von JavaScript fort, da er \u00fcber CSS3-Transitions erzielt wird.<\/p>\n Wie l\u00e4sst sich das Design unseres Beispiels umsetzen?<\/strong> Nachfolgend stellen wir daher den Code vor, beschr\u00e4nken uns bei den Erl\u00e4uterungen aber auf die Bereiche, die zus\u00e4tzlich<\/strong> zu integrieren sind, um nicht nur ein Mobile Men\u00fc zu kreieren, sondern dieses auch als Sticky Menu bzw. feststehende Men\u00fc zu realisieren:<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n Die drei vorstehenden Codebereiche HTML (Body)<\/em><\/strong>, CSS: Allgemeine Auszeichnungen und Logo <\/em><\/strong>sowie CSS: Media Queries <\/em><\/strong>werden bereits in der Anleitung Mobile Men\u00fc ohne JavaScript erkl\u00e4rt.<\/p>\n Erg\u00e4nzungen bzw. Erweiterungen f\u00fcr das Sticky Menu<\/strong> finden sich in den drei Codebl\u00f6cken Bereich: Head,<\/em><\/strong> CSS: Men\u00fc<\/em><\/strong> sowie CSS: Content<\/em><\/strong>.<\/p>\n Wir blicken hinter die Kulissen<\/strong><\/p>\n Fazit: die Anleitung zur Erstellung eines Sticky Menu \/ feststehenden Men\u00fcs inklusive Mobile Menu f\u00fcr mobile Endger\u00e4te basiert auf der unter Mobile Men\u00fc ohne JavaScript<\/em> vorgestellten L\u00f6sung. Erg\u00e4nzend wurde noch ein Sticky Menu integriert und zur besseren Visualisieren ein Anker-Men\u00fc zu Inhaltsbereichen mit unterschiedlichen Hintergrundfarben integriert<\/p>\n <\/em><\/p>\n Stichworte: <\/em>Sticky Menu, Sticky Header Menu, Feststehendes Men\u00fc HTML<\/em><\/p>\n\n\nRealisation eines Sticky Menu \/ feststehenden Men\u00fc mit HTML<\/h2>\n
\n
\nDer Aufbau f\u00fcr das Mobile Menu entspricht der unter Mobile Men\u00fc ohne JavaScript vorgestellten L\u00f6sung und wird dort ausf\u00fchrlich erkl\u00e4rt.<\/p>\nBereich: Head<\/h3>\n
\/*Einbinden der jquery*\/ \r\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"><\/script>\r\n <script>\r\n var pixel = 150; \/\/Anzahl der Scroll-Pixel, bevor das Men\u00fc angepasst wird\r\n $(window).bind('scroll', function () {\r\n if ($(window).scrollTop() > pixel) {\r\n $('#menu').addClass('fixed');\r\n $('#main').addClass('fixed');\r\n } else {\r\n $('#menu').removeClass('fixed');\r\n $('#main').removeClass('fixed');\r\n }\r\n }); \r\n <\/script><\/pre>\nHTML (Body)<\/h3>\n
<body>\t\r\n <nav id=\"menu\">\r\n <div class=\"brand\"><a href=\"https:\/\/a-vista-studios.de\"><img src=\"logo_avs.png\" alt=\"\"\/><\/a><\/div>\r\n <a href=\"#nav-m\" id=\"nav-m\"><img src=\"btn-mobile.png\" alt=\"\"\/><\/a>\r\n <a href=\"#\" class=\"close\"><img src=\"btn-mobile-close.png\" alt=\"\"\/><\/a>\r\n\t\t\r\n <ul class=\"menu\">\r\n <li><a href=\"#a1\">Abschnitt 1<\/a><\/li>\r\n <li><a href=\"#a2\">Abschnitt 2<\/a><\/li>\r\n <li><a href=\"#a3\">Abschnitt 3<\/a><\/li>\r\n <li><a href=\"#a4\">Abschnitt 4<\/a><\/li>\r\n <li><a href=\"#a5\">Abschnitt 5<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <main id=\"main\">\r\n <div id=\"abschnitt1\">\r\n <div class=\"content\">\r\n <span id=\"a1\"><strong>Abschnitt 1<\/strong><br \/><\/span>\r\n\t BLINDTEXT\r\n <\/div>\r\n <\/div>\r\n <div id=\"abschnitt2\">\r\n <div class=\"content\">\r\n <span id=\"a2\"><strong>Abschnitt 2<\/strong><br \/><\/span>\r\n\t BLINDTEXT\r\n <\/div>\r\n <\/div>\r\n <div id=\"abschnitt3\">\r\n <div class=\"content\">\r\n <span id=\"a3\"><strong>Abschnitt 3<\/strong><br \/><\/span>\r\n\t BLINDTEXT\r\n <\/div>\r\n <\/div>\r\n <div id=\"abschnitt4\">\r\n <div class=\"content\">\r\n <span id=\"a4\"><strong>Abschnitt 4<\/strong><br \/><\/span>\r\n\t BLINDTEXT\r\n <\/div>\r\n <\/div>\r\n <div id=\"abschnitt5\">\r\n <div class=\"content\">\r\n <span id=\"a5\"><strong>Abschnitt 5<\/strong><br \/><\/span>\r\n\t BLINDTEXT\r\n <\/div>\r\n <\/div>\r\n <\/main>\t\r\n<\/body><\/pre>\n
CSS: Allgemeine Auszeichnungen und Logo<\/h3>\n
\/*----- General Formating -----*\/\r\nbody, html {\r\n font-family: Verdana, Arial, sans-serif;\r\n font-size: 0.95em;\r\n margin: 0;\r\n padding: 0;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n\r\na:active, a:focus {outline: none;}\r\n\r\nmain {\r\n line-height: 180%;\r\n}\r\n\/*------------------------------*\/\r\n\r\n\r\n\/*----- Logo -----*\/\r\n.brand {\r\n float: left;\r\n padding: 0.5em 1em 0 0.5em;\r\n}\r\n\/*----------------*\/<\/pre>\n CSS: Men\u00fc<\/h3>\n
\/*----- Menu -----*\/\r\nnav {\r\n margin: 0 auto;\r\n width: 100%;\r\n height: 11em;\r\n text-align: right;\r\n position: relative;\r\n background: rgba(255, 255, 255, 1.0);\r\n border-bottom: 1px solid white;\r\n}\r\n\r\nnav ul {\r\n margin: 0;\r\n padding: 8.1em 0 0 0;\r\n height: 100vh;\r\n}\r\n\r\nnav ul li {\r\n list-style: none;\r\n margin: 0;\r\n display: inline;\r\n}\r\n\r\nnav ul li a {\r\n color: #009999;\r\n position: relative;\r\n padding: 0 0 0.5em 0;\r\n display: inline-block;\r\n text-decoration: none;\r\n text-transform: uppercase;\r\n}\r\n\r\nnav ul.menu li a:hover {\r\n color: #03405f;\r\n border-bottom: 2px solid #03405f;\r\n}\r\n\/*----------------*\/\r\n\r\n\/*----- Fixed Menu -----*\/\r\nnav#menu.fixed {\r\n position: fixed;\r\n top: 0;\r\n padding: 0;\r\n height: 6em;\r\n}\r\nnav#menu.fixed ul {\r\n padding: 0.75em 0 0 0;\r\n font-size: 90%;\r\n}\t\t\t\r\nnav#menu.fixed .brand img {\r\n margin-top: 0em;\r\n height: 5em;\r\n}\t\t\r\nnav#menu.fixed a {\r\n padding: 1em 0;\r\n}\t\r\n\/*--------------------------------------*\/<\/pre>\nCSS: Content<\/h3>\n
\/*----- Content Sections -----*\/\r\n#abschnitt1, #abschnitt2, #abschnitt3, #abschnitt4, #abschnitt5 {\r\n min-height: 100%;\r\n width: 100%;\r\n}\r\n#abschnitt1 {\r\n color: #555;\r\n background: #caced2;\r\n}\r\n#main.fixed #abschnitt1 {\r\n margin-top: 150px;\r\n}\r\n#abschnitt2 {\r\n color: #333;\r\n background: #b1b8be;\t\r\n}\r\n#abschnitt3 {\t\r\n color: #000;\r\n background: #95a1ae;\r\n}\r\n#abschnitt4 {\r\n color: #fff;\r\n background: #778899;\r\n}\t\r\n#abschnitt5 {\r\n color: #fff;\r\n background: #525f6d;\r\n}\t\r\n#abschnitt1 .content,\r\n#abschnitt2 .content,\r\n#abschnitt3 .content,\r\n#abschnitt4 .content,\r\n#abschnitt5 .content {\r\n padding: 1.5em 1.5em 3em 1.5em;\r\n}\r\n#a1{\r\n padding-top: 14em;\r\n}\r\n#a2, #a3, #a4, #a5 {\r\n padding-top: 8.1em;\r\n}\r\n\/*--------------------------------------*\/<\/pre>\nCSS: Media Queries<\/h3>\n
\/*----- Media Queries -----*\/\r\n@media screen and (min-width: 961px) {\r\n nav a#nav-m,\r\n nav a.close {\r\n display: none;\r\n }\r\n nav #menu.fixed ul {\r\n margin-top: 2.25em;\r\n }\t\r\n nav ul li {\r\n margin: 0 30px 0 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: 960px) {\r\n \/*Formatierung Mobiles Menue*\/\r\n nav ul {\r\n top: 11.15em;\r\n position: absolute;\r\n background: #ccc;\r\n width: 100%;\r\n left: -100%;\r\n\r\n list-style-type:none;\r\n margin: 0;\r\n padding: 0;\r\n\r\n -webkit-transition: all 0.6s ease;\r\n -moz-transition: all 0.6s ease;\r\n -o-transition: all 0.6s ease;\r\n transition: all 0.6s ease;\r\n }\r\n nav#menu.fixed ul {\r\n top: 6.8em;\r\n }\r\n nav ul li{\r\n display: block;\r\n text-align: left;\r\n padding: 0em 0.5em;\r\n border-bottom: 1px solid #fff;\r\n }\r\n nav ul li a {\r\n color: #555;\r\n padding: 1em 0;\r\n }\r\n nav ul.menu li a:hover {\r\n border-bottom: 0;\r\n }\r\n\r\n \/*Hamburger-Icon*\/\r\n nav a#nav-m img,\r\n nav a.close img {\r\n width: 40px;\r\n height: auto;\r\n }\r\n nav > .close,\r\n nav a#nav-m:target {\r\n display: none;\r\n }\r\n nav a:target ~ ul,\r\n nav a:target ~ .close {\r\n display: inline-block;\r\n }\r\n nav nav#menu.fixed a:target ~ .close {\t\r\n margin-top: -14px;\r\n }\r\n nav a:target ~ .close {\r\n position: absolute;\r\n margin-left: -40px;\r\n }\r\n nav a:target ~ ul {\r\n left: 0;\r\n }\r\n}\r\n\/*--------------------------------------*\/<\/pre>\nErl\u00e4uterung des CSS f\u00fcr die Erstellung des Sticky Menu \/ festehenden Men\u00fcs<\/em><\/h2>\n
\n
\nZun\u00e4chst wird die jquery<\/em><\/strong> \u00fcber googleapis.com<\/em> eingebunden.
\nMit 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\u00e4nzt werden.
\nBetr\u00e4gt das Scrollen weniger als 150 Pixel, so greift die ELSE-Anweisung und die Klasse .fixed wird wieder entfernt.Damit erhalten wir die M\u00f6glichkeit, beim Scrollen um mehr als 150 Pixel nach unten den Bereich \u00fcber CSS der Form #menu.fixed<\/em> anzusprechen.<\/li>\n
\nErg\u00e4nzend zum Mobile Men\u00fc ohne JavaScript<\/em> findet sich hier der Bereich
\n\/*—– Fixed Menu —–*\/
\n<\/em>Das CSS teilt dem Browser mit, wie das Sticky Menu bzw. feststehende Men\u00fc behandelt werden soll, wenn die zuvor erw\u00e4hnten mehr als 150 Pixel nach-unten-scrollen erreicht sind.<\/li>\n
\nDieser Bereich ist weitestgehend selbsterkl\u00e4rend. Das f\u00fcr Demonstrationszwecke erstellte Demo Sticky Menu referenziert nicht auf eigene (neue) Inhaltsseiten. Sondern beim Anklicken der Men\u00fcpunkte wird Mittels Anchor<\/a> (= Anker) zu dem entsprechenden Bereich auf der Seite gesprungen und der jeweilige Bereich entsprechend \u00fcber das CSS formatiert.<\/li>\n<\/ol>\n