Einzelnen Beitrag anzeigen
  #5 (permalink)  
Alt 18.10.2015, 05:43
OMC Mering OMC Mering ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.10.2015
Beiträge: 3
OMC Mering befindet sich auf einem aufstrebenden Ast
Standard 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 &darr;</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">&uarr; Navigation ausblenden</a>
</li>-->
 </ul>

</div>

</body>
</html>
Mit Zitat antworten