Navigationsleiste Automatisch Schließen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
-
Hallo,
ich habe eine Responsive Navigationsleiste erstellt und diese per Server Side Includes in die Index.html eingebunden. Das funktioniert auch gut Siehe Link:
https://sgtest53.lima-city.de/
Nun zu meinem kleinen Problem:
Ich möchte das sich die Navigationsleiste und die untermenü Automatisch Schließt, wenn ich ausserhalb der Navigationsleiste klicke. Was muss ich ändern damit dieses funktioniert?
Index.html
<!DOCTYPE html><html lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="googlebot" content="noodp"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2"> <link href="css/navi.css" rel="stylesheet" type="text/css"> <link href="css/design.css" rel="stylesheet" type="text/css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="js/2.2.0-jquery.js"></script> <script src="js/navi.js"></script> </head> <body> <content> <div id="Navigationsleiste"><!--#include virtual="Navigationsleiste.html" --></div> </content> </body> </html>
Navigationsleiste.html
<!doctype html> <html> <head> </head> <body> <a class="menu-link" href="#menu">Menü</a> <nav id="menu" class="menu"> <ul> <li><a href="index.html">Home</a></li> <li class="has-submenu"><a href="#">Seite-1</a> <ul class="sub-menu"> <li><a href="#.html">Seite-1-a</a></li> <li><a href="#.html">Seite-1-b</a></li> <li><a href="#.html">Seite-1-c</a></li> </ul> </li> <li><a href="#.html">Seite-2</a></li> <li><a href="#.html">Seite-3</a></li> <li><a href="#.html">Seite-4</a></li> </ul> </nav> </body> </html>
design.css
/*A1 Name der Homepage */ html { height:100%; } body { -webkit-background-size:cover; background-attachment:fixed; background-image: url(""); background-position:center; background-repeat:no-repeat; background-size: cover; font-family:helvetica, arial, "lucida grande", verdana, メイリオ, "ＭＳ Ｐゴシック", sans-serif; min-width:200px; overflow-x:hidden; margin:0; padding:0 10px; } content { border-radius:10px; clear:both; display:block; float:none; margin:25px auto 0; min-height:720px; padding:50px -15px 0; width:960px; } @media only screen and (max-width: 1023px) { content { width:720px; } } @media only screen and (max-width: 767px) { content { width:530px; } } @media only screen and (max-width: 568px) { content { width:420px; } } @media only screen and (max-width: 480px) { content { width:100%; } }
navi.css
@media all and (min-width: 1025px) { .menu-link { display: none;} .menu { float: left; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .menu ul { padding-top: 0px; padding-bottom: 0px; padding-left:0px; margin-top: 25px; margin-right: 0px; margin-left: 0px; margin-bottom: 25px; list-style: none; position: relative; display: inline-table; border: 1px solid #a8070d; width: 960px; text-align: left; background-color: #a8070d; border-radius: 10px;} .menu ul a:hover { color: #fff; } .menu > li > ul.sub-menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #CCC; } .menu ul li { padding: 0px 4%; } .menu > ul > li { display: inline-block; } .menu ul li a { display: block; text-decoration: none; color: #FFF; font-size: 18px; font-family: arial, sans-serif; } .menu ul li > a { text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 3px; padding-right: 3px; margin-left: 0px; margin-right: 0px; width: 98px;} .menu ul ul { display: none; list-style-type:none; position: absolute; border: 1px solid #a8070d; width: 157px; border-radius: 0px; margin-top:0px; margin-left: -18px; } .menu ul li:hover > ul { display: block; } .menu ul ul > li { position: relative; } .menu ul ul > li a { padding: 5px 15px 5px 10px; height: auto; background-color: #a8070d; text-align:center; width:142px; margin-left:0px;border: 1px solid #921515;} .menu ul ul > li a:hover {color: #fff; } .menu ul ul ul { position: absolute; left: 100%; top:0; } } @media all and (max-width: 1024px) { .example-header .container { width: 100%; } a.menu-link { display: block; color: #fff; background-color: #a8070d; border-radius: 10px; float: left; text-decoration: none; padding-top: 10px; padding-bottom: 10px; margin-top:25px; margin-bottom:0px; width: 100%; text-align: center; font-size: 18px; font-family: arial, sans-serif;} .menu { clear: both; min-width: inherit; float: none; } .menu, .menu > ul ul { overflow: hidden; max-height: 0; } .menu > li > ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu > ul ul.active { max-height: 55em; } .menu ul { padding-top: 0px; padding-bottom: 0px; padding-left:0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: auto; list-style: none; position: relative; display: block; border: 1px solid #050505; width: 100%; text-align: center; background-color: #a8070d; } .menu > ul { border-top: 1px solid #921515; } .menu > ul a:hover { color: #fff; } .menu ul li a { display: block; text-decoration: none; color: #FFF; font-size: 20px; font-family: arial, sans-serif; } .menu li, .menu > ul > li { display: block; } .menu li a { color: #000; display: block; padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #921515; position: relative; } .menu li.has-submenu > a:after { content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0px 0.5em; } .menu li.has-submenu > a.active:after { content: "-"; } .menu ul ul > li a { padding: 5px 15px 5px 10px; height: auto; background-color: #a8070d; } .menu ul ul > li a:hover {color: #fff; } .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; } } @media only screen and (max-width: 767px) { a.menu-link { font-size: 18px;} .menu ul li a { font-size: 18px; } } @media only screen and (max-width: 568px) { a.menu-link { font-size: 16px;} .menu ul li a {font-size: 16px} } @media only screen and (max-width: 480px) { a.menu-link { font-size: 18px;font-size: 3.8vw} .menu ul li a {font-size: 18px;font-size: 3.8vw} }
navi.js
var s1 = jQuery.noConflict(); s1( document ).ready( function( s1 ) { var s1menu = s1('#menu'), s1menulink = s1('.menu-link'), s1menuTrigger = s1('.has-submenu > a'); s1menulink.click(function(e) { e.preventDefault(); s1menulink.toggleClass('active'); s1menu.toggleClass('active'); }); s1menuTrigger.click(function(e) { e.preventDefault(); var s1this = s1(this); s1this.toggleClass('active').next('ul').toggleClass('active'); }); });
Vielen Dank für eure Hilfe im voraus!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Zunächst einmal hat dein Konzept ein paar Macken, zum Beispiel:
a) (X)HTML hat kein Element 'content'. Im derzeitigen Zustand kann das Element einfach weg.
b) per include wird ja exakt der Inhalt der angegebenen Datei dort hineinkopiert, wo diese Anweisung 'include' steht, bevor das Ergebnis ausgeliefert wird.
Folglich muß der eingebundene Quelltext ein (X(HTML-Fragment sein, welches dort stehen darf.
Du hast aber ein komplettes (X)HTML-Dokument eingebunden. Also entweder nur das Element nav daraus samt Inhalt verwenden oder aber etwa per iframe oder object statt include die Navigation einbinden, wobei diese zweite Option nicht zu empfehlen ist.
c) Schlechte Struktur oder mangelnde semantische Textauszeichnung etwa in Navigationsleiste.html:
Das erste Kindelement von body sollte doch wohl kein Element a sein, das wäre eher ein Element h1.
Bei deiner beabsichtigten Anwendung wäre es zudem innerhalb von nav besser aufgehoben.
Da gibt es eine Hilfe zur Prüfung von (X)HTML und ähnlichen Formaten mit kompletter Fehlerliste:
https://validator.w3.org/
Zur eigentlichen Frage: Was bedeutet für dich in dem Zusammenhang 'außerhalb'? Die aktuelle Position eines Zeigergerätes? Dabei ist zu bedenken, daß etwa Nutzer von Mobiltelephonen oder Tabletts mit ihren Fingern herumgrabbeln, gar kein Zeigergerät haben, bei denen gibt es also keine dauerhafte Position eines Zeigergerätes, selbst wenn einige Fingerbewegungen ähnlich wie ein Mauszeiger eingesetzt werden können, jedoch eine eingeschränkte Nutzbarkeit implizieren.
'Außerhalb' oder 'innerhalb' bezöge sich hier also eher auf den Bereich, auf welchen gerade die Aufmerksamkeit des Publikums fällt, eine kognitive Frage, über welche der Brauser keine Kenntnis hat.
Bei Leuten mit Zeigergerät käme dafür per CSS :hover in Frage.
Also wenn etwa die Überschrift im Element nav steht, das Inhaltverzeichnis in ul, so kannst du per CSS
formulieren:
nav ul {display: none}
nav:hover ul {display: block}
Sinnvoller ist es, wenn die Nutzer explizit umschalten.
Dazu setzt du bei dem ul eine id="navi", in die Überschrift des nav dein a-Element mit Verweis auf #navi
Beim CSS kannst du dann formulieren:
nav ul#navi {display: none}
nav ul#navi:target {display: block}
Hier verschwindet das Menü wieder, wenn ein (anderer) Verweis aktiviert wird.
-
Hallo prinz-und-gloeckner,
vielen Dank für deine Hilfe!
Ich möchte das sich meine Navigationsleiste genauso verhält wie es bei der Demo zu sehen ist.
Demo:
https://www.jqueryscript.net/demo/Better-Bootstrap-Nav-jQuery/
Was muss ich bei meiner Naviationsleiste ändern, damit diese sich Automatisch schließt, wenn ich außerhalb der Navigationsleiste tippe bzw. mit der Maus klicke.
Beitrag zuletzt geändert: 3.12.2019 19:47:32 von sgtest53 -
Sollte doch problemlos funktionieren.
Das id-Attribut müßtest du allerdings schon passend ergänzen, also etwa:
body > nav#navi > div.container-fluid {display: none}
body > nav#navi:target > div.container-fluid {display: block}
Wo der Verweis steht, um das Menü sichtbar zu machen, ist egal, das Publikum sollte es für den Zweck bloß sofort finden, beim Aufmachen kann das Menü sogar diesen Verweis verdecken (absolute Positionierung?), welcher ja nicht benötigt wird, solange das Menü auf ist.
Prinzipiell kannst du natürlich auch negieren:
body > nav#navi > div.container-fluid {display: block}
body > nav#navi:not(:target) > div.container-fluid {display: none}
-
Danke prinz-und-gloeckner,
Also soll ich folgendes in der navi.css hinzufügen?
body > nav#navi > div.container-fluid {display: block} body > nav#navi:not(:target) > div.container-fluid {display: none}
und bzw. das...
body > nav#navi > div.container-fluid {display: none} body > nav#navi:target > div.container-fluid {display: block}
Muss ich da noch etwas in der Navigationsleiste.html ändern/anpassen? Wenn ja, an welcher Stelle und was muss ich da noch ändern? -
Naja, wie beschrieben, beim Element nav mußt du das Attribut id="navi" hinzufügen, irgendwo eben einen Verweis mit Attribut href="#navi".
Am besten bei einem einfachen Test-Dokument ausprobieren, wie sich was genau auswirkt.
Wenn du das verstehst, sollte es kein Problem sein, das Prinzip auch bei anderen Gelegenheiten zu verwenden ;o) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage