|
|||
Responsives Menü -Überlappung und Auswählbarkeit Hilfe benötigt
Hallo zusammen,
folgendes Problem auf Oldtimer und Motorrad Club (OMC) Mering: Startseite Horizontales/vertikales Menü, welches sich responsiv an die Auflösung anpasst. Dabei treten folgende Probleme auf: 1. Wenn das vertikale Untermenü ausklappt, überdeckt dieses nicht etwaige andere Menübestandteile Beispiel: http://www.omc-mering.de/images/webs...usgeklappt.jpg Dadurch sind die Einträge nicht lesbar. 2. Wenn das Menü wie gewollt ab einer bestimmten Auflösung komplett vertikal dargestellt wird, können die ausklappenden Punkte der Untermenüs nicht mehr angewählt werden. Auch überdecken die untermenüpunkte wieder nicht den Hintergrund. Beispiel: http://www.omc-mering.de/images/webs...anz_schmal.jpg Verhalten ist bei allen Browsern gleich: IE, FF, Chrome, Android, Blackberry Da ich schon einiges hin und und her geschmissen habe, sehe ich wahrscheinlich den Wald vor lauter Bäumen nicht. Könnt ihr mal draufschauen und mir den richtigen Weg weisen? Danke HTML: HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN"> <html> <head> <title>Oldtimer und Motorrad Club (OMC) Mering: Startseite</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> ... <link rel="stylesheet" href="/css/version2.css" type="text/css"/> </head> <body alink="#999999" background="http://www.omc-mering.de/images/back.jpg" bgcolor="#000000" link="#999999" text="#eeeeee" vlink="#999999"> <div id="welcome"> <table border="0" width="99%"> <tbody> <tr> <td colspan="3" align="center" width="80%"> <img src="http://www.omc-mering.de/images/logo_trans_280.gif" width="300"> </td> <td class="text" align="center" width="20%"> Wir sind<br> <a href="http://www.avd.de" target="avd"> <img src="http://www.omc-mering.de/images/avd_koop.gif" border="0" width="125"> </a> <br> Korporativclub<BR><br> ... </td> </tr> <tr> <td colspan="2" width="50%">Nächster Stammtisch:<BR>19.10.2015 19:00<BR>Offener Stammtisch für jedermann<BR>Kirchenwirt Mering</td> <td colspan="2" width="50%"> <table> <tr> <td>Unser Oldtimertreffen<BR>05.08.2016<BR><BR>Mering</td> <td><a href="show_info_db.php?inh_id=126" target=""><img src="data:image/png;base64" width="100px" alt=""/></a></td> </tr> </table> </td> </tr> </tbody> </table> </div> <div class="nav-open"> <a href="#nav" title="Menü anzeigen">Navigation anzeigen ↓</a> </div> <div id="nav" style="text-align: justify;"> <ul> <li><a href="logged_on_home_resp.php" title="Hauptseite">Home</a></li> <li><a href="mem_mitgl.php">Unsere Mitglieder</a></li> <li class="submenu"><a href="#News">Veranstaltungen / News</a> <ul> <li><a href="show_terms_db.php">Kalender</a></li> <li><a href="inhalt_edit.php?Art=News/Termin">Termin anlegen</a></li> <li><a href="inhalt_edit.php?Art=Tagesordnung">Tagesordnung anlegen</a></li> <li><a href="inhalt_edit.php?Art=Info">Infoseite anlegen</a></li> </ul> </li> <li> <a href="direktinfo.php?inh_id=90">Clubheim</a> </li> <li><a href="../mitglied_neu_db.php?inh_id=97">Mitglied werden?</a></li> <li class="submenu"><a href="#Chronik" title="Unsere Chronik">Chronik</a> <ul> <li class="submenu"><a href="#Alphabetisch">Alphabetisch</a> <ul> <li class="submenu"><a class="jahr" href="#1">1</a> <ul> <li><a href="show_chronik_db.php?inh_id=119" target="crinhalt">10 Jahre Schlepperfreunde Kissing</a></li> </ul> </li> ... </ul> </li> <li class="submenu"><a href="#Chronologisch">Chronologisch</a> <ul> <li class="submenu"><a class="jahr" href="#2015">2015</a> <ul> <li><a href="show_chronik_db.php?inh_id=124" target="crinhalt">Benfitzkonzert beim Kirchenwirt</a></li> ... </ul> </li> </ul> </li> </ul> </li> <li class="submenu"><a href="#Ansichtssachen">Ansichts-Sachen</a> <ul> <li><a class="jahr" href="#Bedienungsanleitung">Bedienungsanleitung</a> <ul> <li><a href="show_ansicht_pdf.php?inh_id=1" target="crinhalt">Bedienungsanleitung Magirus Deutz Mercur 150</a></li> </ul> </li> <li><a class="jahr" href="#Fun">Fun</a> <ul> <li><a href="show_ansicht_db.php?inh_id=77" target="crinhalt">Armes Deutschland</a></li> </ul> </li> </ul> </li> ... <li class="close"> <a href="#header">↑ Navigation ausblenden</a> </li> </ul> </div> </body> </html> CSS: Code:
.nav-open { display: none; } #nav { position: fixed; top: 0px; float: none; width: 100%; margin: 20px auto; background: #333; font-family: Arial, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 5px #888; -moz-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; } #nav ul { margin: 0; padding: 0; list-style: none; } #nav ul li { position: relative; float: left; } #nav ul li.close { display: none; } #nav ul li a { padding: 10px 15px; display: block; color: #fff; text-decoration: none; } #nav ul li a:hover { background: #111; color: #aaa; } #nav ul > li.submenu > a:after { position: relative; float: right; content: ''; margin-left: 10px; margin-top: 5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; border-bottom: 5px solid transparent; } #nav ul ul li.submenu > a:after { margin-left: auto; margin-right: -10px; border-left: 5px solid #fff; border-right: 5px solid transparent; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } #nav ul li:hover { background: #4096ee; } #nav ul ul { position: absolute; top: -9999px; left: -9999px; background: #333; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } #nav ul ul li { float: none; width: 200px; border-bottom: 1px solid #555; } #nav ul ul li a { padding: 10px 20px; } #nav ul ul li:last-child { border-bottom: none; } #nav ul li:hover > ul { top: 100%; left: 0; } #nav ul ul li:hover > ul { top: 0; left: 200px; } @media screen and (max-width: 800px) { .nav-open { position: fixed; top: 0; left: 0; background: #333; font-family: Arial, sans-serif; display: block; width: 100%; } .nav-open a { padding: 10px 15px; display: block; color: #fff; text-align: center; text-decoration: none; } #nav { position: absolute; top: -200%; left: 0; float: center; width: 100%; margin: 0; padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #nav:target { top: 0; } #nav ul li { float: none; text-align: center; border-bottom: 1px solid #555; } #nav ul li.close { display: block; } #nav ul li:last-child { border-bottom: none; } } #welcome{ font-size:14px; font-family:Verdana; position:relative; font-weight:normal; color:#005FA9;left:20px; top:60px; } |
Sponsored Links |
|
|||
Hallo
ich möchte dir mal die folgenden Überlegungen unterbreiten: Responsive Design dient dazu die Benutzerfreundlichkeit einer Webseite zu erhöhen. Aufklappmenüs sind für die Besucher Hindernisse und demnach grade nicht benutzerfreundlich. Von daher sollte auf sie verzichtet werden. Zum einen kennen die Besucher die Menüs nicht, müssen sich nach dem Trail-and-Error-Prinzip immer wieder durchklicken und finden für sie interessante Infos häufig doch nicht. Zum anderen klappen die Menüs bei einem falschen Zucken mit der Mouse wieder zu und müssen wieder von vorne angegangen werden. Grade bei Unter-Untermenüs ist das einfach nur nervig. Hinzu kommt, das Aufklappmenüs auf Touchscreens schwierig zu bedienen sind. Es gibt keinen Hover-Effekt und die Finger sind zwangsweise immer im Weg. Es gibt auch keine technische Möglichkeit bei kleinen Bildschirmen / Fenstern ein Menü mit so vielen Unterpunkten benutzerfreundlich als Aufklappmenü zu gestalten. Du kannst dir zwar was zurechtzimmern, aber das wird nicht überzeugen. Es ist deshalb sinnvoller die Navigation einer Webseite immer sichtbar zu belassen und Menüpunkte besser auf Unterseiten oder andere Stellen der Webseite zu verschieben. Zum Beispiel können die Menüpunkte Unsere Mitglieder, Clubheim, Chronik, Impressum, Links und Kontakt in einen Footer verschoben werden. Dafür ist der Footer schließlich gedacht. Die werden eher selten aufgerufen oder interessieren nur die Besucher, deren Interesse bereits geweckt wurde. Oder die Unterpunkte von Gastro-Tipps (Chronologisch, Alphabetisch, nach PLZ) sind viel besser auf einer Unterseite Gastro-Tipps aufgehoben, und dann ständig sichtbar. Und so weiter. Wenn du trotzdem bei den Aufklappmenüs bleiben willst und Hilfe benötigst ist es sinnvoller, wenn du dir eines heraussuchst, welches deinen Vorstellungen nahekommt, das responsive funktioniert und das hier verlinkst. Falls das Aufklappmenü ohne JavaScript funktionieren soll suche ein entsprechendes Beispiel. Dann können wir dir eventuell weiterhelfen das in deine Seite einzubauen. Gruss MrMurphy Geändert von MrMurphy (16.10.2015 um 22:46 Uhr) |
Sponsored Links |
|
|||
Würde es gerne als "eine" Navigation beibehalten
Hallo MrMurphy,
vielen Dank für die Antwort. Ich würde gerne das jetzige Design beibehalten. Aus folgenden Gründen: Durch die Aufklapp-Untermenüs Sieht der Nutzer auf den ersten Blick was sich alles hinter diesem Punkt noch alles versteckt und muss sich nicht durch die weiteren Seiten hangeln. Ebenso würde ich gerne auf einen Footer verzichten. Wenn der Inhalt der Seite sehr groß ist oder je nach Auflösung sehr lang, muss der Nutzer immer bis zum Seitenende scrollen um dorthin zu kommen. Mich persönlich regt das bei vielen anderen Seiten auf. Auf den Hover kann ich verzichten, wenn die Menüs nur bei Anklicken angezeigt werden fände ich das sogar besser. Vielleicht finden sich ja Lösungsansätze. Danke |
|
|||
Hallo
Zitat:
Siehe zum Beispiel Einfaches Dropdown oder elegantes Styling | Webkrauts Probier es selbst mal aus, indem du bei den folgenden Demoseiten das Browserfenster schmal zusammenziehst. Von den folgenden Dropdown-Menüs ist keins responsive: Dropdown-Menüs: 20 Demos von simpel bis schick ? inklusive Download und Tutorials | t3n So simpel wie du es wahrscheinlich erhoffst ist das Thema also nicht. Ich habe zum Beispiel folgende Anleitung gefunden [CSS] Ein horizontales Dropdown-Menü responsive gestalten | olivergast.de oder diese Dropdown-Menü in reinem CSS, ohne JavaScript | DR. WEB Die helfen dir hoffentlich weiter. Gruss MrMurphy |
|
|||
Eine Lösung umgesetzt
Hallo ,
habe jetzt mit kleinen Änderungen eine Lösung ( [CSS] Ein horizontales Dropdown-Menü responsive gestalten | olivergast.de) umgesetzt. Darin wären noch kleine Änderungen notwendig: 1. Die Menüs sollen erst bein Draufklicken öffen, nicht bei "hover" 2. In Mobiler (Vertikaler) Ausrichtung sollen die Untermenüs erst bei Auswahl geöffnet werden. 3. Warum erscheint in vertikaler Anzeige die Checkbox? Code:
* { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; box-sizing: border-box; } #nav { position: absolute; top: 0px; float: left; width: 100%; background: #3a3a3a; font-size: 16px; } #nav ul { margin: 0; padding: 0; } #nav a { display: block; color: #fff; text-decoration: none; } #nav ul li { position: relative; float: left; list-style: none; color: #fff; transition: 0.5s; } #nav ul li a { padding: 20px; } #nav ul > li.submenu > a:after { position: relative; float: right; content: ''; margin-left: 10px; margin-top: 5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; border-bottom: 5px solid transparent; } #nav ul ul li.submenu > a:after { margin-left: auto; margin-right: -10px; border-left: 5px solid #fff; border-right: 5px solid transparent; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } #nav ul li:hover { background: #4096ee; } #nav ul ul { position: absolute; top: -9999px; left: -9999px; background: #333; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); z-index: 1; } #nav ul ul li { float: none; width: 200px; border-bottom: 1px solid #555; } #nav ul ul li a { padding: 10px 20px; } #nav ul ul li:last-child { border-bottom: none; } #nav ul li:hover > ul { top: 100%; left: 0; } #nav ul ul li:hover > ul { top: 0; left: 200px; } @media screen and (max-width: 1680px) { * { font-size: 18px; } label.responsive-nav-label { position: absolute; display: block; padding: 20px; background: #222; cursor: pointer; color: #fff; } label.responsive-nav-label span { margin-right: 10px; } #nav { position: absolute; top: -9999px; padding: 10px; } input#responsive-nav[type=checkbox]:checked ~ #nav { position: absolute; top: 0; } #nav a:after { display: none; } #nav li { float: none !important; width: 100% !important; border-bottom: none !important; } #nav li a { margin-bottom: 10px !important; padding: 10px 20px !important; background: #4a4a4a; } #nav ul li:hover { background: none; } #nav ul li a:hover { background: #4096ee; } #nav ul ul { position: relative !important; width: 100%; left: 0 !important; top: 0 !important; background: none !important; box-shadow: none; } #nav ul ul li { padding-left: 20px; } } #welcome{ font-size:14px; font-family:Verdana; position:relative; font-weight:normal; color:#005FA9;left:20px; top:60px; } HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN"> <html> <head> <title>Oldtimer und Motorrad Club (OMC) Mering: Startseite</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="GENERATOR" content="Microsoft FrontPage 5.0"> <META content="Mon, 19 Aug 1999 00:00:01 GMT" http-equiv=expires> <META content="Copyright 2014 Lothar Haupt" name=author> <META content="Homepage des Oldtimer & Motorrad Club (OMC) Mering/Bayern" name=description> <META content="OMC, Mering, Bayern, Oldtimer, Oldie, Automobil, Automobilgeschichte, Pkw, Personenwagen, Zweirad, Motorrad, Moped, Biker, Lkw, Lastwagen, Nutzfahrzeug, Tracker, Bulldog, Motorclub" name=keywords> <META content=de name=content-language> <META content=robots name=follow> <META content="30 days" name=revisit-after> <link rel="stylesheet" href="/css/olivergast.css" type="text/css"/> </head> <body alink="#999999" background="http://www.omc-mering.de/images/back.jpg" bgcolor="#000000" link="#999999" text="#eeeeee" vlink="#999999"> <input type="checkbox" id="responsive-nav"> <label for="responsive-nav" class="responsive-nav-label"><span>☰</span> Navigation</label> <div id="welcome"> <table border="0" width="99%"> <tbody> <tr> <td colspan="3" align="center" width="80%"> <img src="http://www.omc-mering.de/images/logo_trans_280.gif" width="300"> </td> <td class="text" align="center" width="20%"> Wir sind<br> <a href="http://www.avd.de" target="avd"> <img src="http://www.omc-mering.de/images/avd_koop.gif" border="0" width="125"> </a> <br> Korporativclub<BR><br> <a href="https://www.betterplace.org/de/projects/27490-spender-fur-neubau-vereinsheim-oldtimer-motorrad-club-mering-e-v" target="better"> <img src="http://www.omc-mering.de/images/betterplace_dunkl.png"> </a> ... </td> </tr> <tr> <td colspan="2" width="50%"> <Div class="term_text_schwarz">N�chster Stammtisch:<BR>19.10.2015 19:00<BR>Offener Stammtisch für jedermann<BR>Kirchenwirt Mering</div></td><td colspan="2" width="50%"><table><tr><td><Div class="term_text_schwarz">Unser Oldtimertreffen<BR>05.08.2016<BR><BR>Mering</div></td><td><a href="show_info_db.php?inh_id=126" target=""><img src="data:image/png;base64," width="100px" alt=""/></a></td></tr></table></td></tr></tbody></table> </div> <!--<div class="nav-open"> <a href="#nav" title="Men� anzeigen">Navigation anzeigen ↓</a> </div>--> <div id="nav" style="text-align: justify;"> <ul> <li><a href="logged_on_home_resp.php" title="Hauptseite">Home</a> </li> <li> <a href="mem_mitgl.php">Unsere Mitglieder</a> </li> <li> <a href="direktinfo.php?inh_id=90">Clubheim</a> </li> <li> <a href="../mitglied_neu_db.php?inh_id=97">Mitglied werden?</a> </li> <li><a href="direktshow_terms_db.php">Veranstaltungen / News</a> <li class="submenu"><a href="#Chronik" title="Unsere Chronik">Chronik</a><ul> <li class="submenu"><a href="#Alphabetisch">Alphabetisch</a><ul> <li class="submenu"><a class="jahr" href="#1">1</a><ul><li><a href="show_chronik_db.php?inh_id=119" target="crinhalt">10 Jahre Schlepperfreunde Kissing</a></li></ul></li><li><a class="jahr" href="#A">A</a><ul><li><a href="show_chronik_db.php?inh_id=115" target="crinhalt">Anfängertour</a></li></ul></li><li><a class="jahr" href="#B">B</a><ul><li><a href="show_chronik_db.php?inh_id=124" target="crinhalt">Benfitzkonzert beim Kirchenwirt</a></li></ul></li><li><a class="jahr" href="#C">C</a><ul><li><a href="show_chronik_db.php?inh_id=121" target="crinhalt">Clubausflug Berchtesgaden</a></li></ul></li>... <li class="submenu"> <a href="#Gastro">Gastro-Tipps</a> <ul> <li><a href="#Gastochr">Chronologisch</a></li> <li><a href="#Gastochr">Alphabetisch</a></li> <li><a href="#Gastochr">nach PLZ</a></li> </ul> </li> <li> <a href="#">Impressum</a> </li> <li> <a href="#">Links</a> </li> <li> <a href="#">Kontakt</a> </li> <li> <a href="/secure/logged_on_home.php?logtype="></a></li> <!--<li class="close"> <a href="#header">↑ Navigation ausblenden</a> </li>--> </ul> </div> </body> </html> |
Stichwörter |
responsive menu, überdeckung |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Menü - Anfänger benötigt Hilfe | mauricen | CSS | 2 | 24.01.2013 12:44 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
Hilfe bei CSS Menue gesucht | CSS_Beginner | CSS | 2 | 21.09.2009 18:03 |
css menü - bitte schnell um hilfe :please | costfree | CSS | 2 | 16.01.2009 13:55 |
hilfe: problem bei java script menü | peppi | Javascript & Ajax | 0 | 24.07.2007 19:51 |