Menu aufklappen?

#matthias

Hallo,

neuer Tag neue Frage.
Ich habe ein Menü und möchte diesen nun Unterpunkte hinzufügen, diese sollen beim Überfahren nach unten aufgehen.

HTML

<div id="doc">
		<header id="header">
		<h1>JavaScript, Animation mit jQuery und dem easing Plugin</h1>
			<nav>
				<ul>
					<li class="active" id="Home"><a href="http://localhost/JavaScript/jQuery/animation_2_1.html">Home</a></li>
					<li><a id="Groesser" href="#">Größer</a></li>
					<li><a id="Kleiner" href="#">Kleiner</a></li>
					<li><a id="Verschieben" href="#">Verschieben</a></li>
						<ul>
							<li><a id="Verschieben" href="#">Verschieben</a></li>
							<li><a id="Verschieben" href="#">Verschieben</a></li>						
							<li><a id="Verschieben" href="#">Verschieben</a></li>
							<li><a id="Verschieben" href="#">Verschieben</a></li>			
						</ul>
					<li><a id="Slide" href="#">Ausbelenden</a></li>
					<li><a id="Show" href="#">Einblenden</a></li>
					</ul> 
			</nav>
		</header>
	</div>

Alles anzeigen

CSS sieht so aus:

HTML

header, nav {  
	display: block;  
}
 
/* LAYOUT ------------------------------------------ */
 
body {
  background: #fff;
  font-size: 12px;
  font-color: #444;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
#doc  {
  width: 100%;
  margin: 0 auto;
}
 
/* HEADER & NAVIGATION ------------------------------ */
 
#header {
  background: #333;
  padding: 0 15px;
}
 
#header h1 {
  margin: 0;
  padding: 15px 0;
  color: #45CC2F;  
  text-shadow: #a5a5a5 3px 1px 3px;
  //color: #A5A5A5;
}
 
#header nav ul {
  list-style-type: none;
  font-weight: bold;
  margin: 0;
  padding: 0 0 0 100px;
}
 
#header nav ul li {  
  display: inline;
  margin: 0;
  padding: 0;
}
 
#header nav ul li a {
  display: inline-block;
  padding: 2px 10px;
  color: #fff;
  background-color: #45CC2F;
  text-decoration: none;
}
 
#header nav ul li.active a,
#header nav ul li a:hover {
  background-color: #fff;
  color: #444;
}


#header nav ul li ul {
	display: none;
	background-color: #000;

}	
#header nav ul li:hover ul {
	display: block;
}

Alles anzeigen

Ich weis das das teilweise Html5 ist, ist nur zu Testzwecken in meinen Netzwerk.
Also so wie ich es hier habe klappt das nicht das der eine Punkt nach unten aufklappt.

Wenn mir jemand helfen kann wäre es nicht schlecht.

MFG Matthias

Bandit

Zitat von #matthias

Ich weis das das teilweise Html5 ist

Und genau deshalb hat doch kaum einer Bock, sich den Kram anzusehen. Warum machst du so einen Quatsch?

#matthias

Habe ich doch geschrieben, weil ich es ausprobieren will. Also ohne die untere "ul" funktioniert es auch. Nur bekomme ich das mit dem Aufklappen nicht hin.
Aber ich finde sicher noch raus woran das liegt.

MFG Matthias

Bandit

Bist du dir sicher, dass dein Browser HTML5 richtig interpretiert? Solange das nicht der Fall ist, würde ich von HTML5 die Finder lassen.

unknownsoldier

dieses Problem gibts hier zuhauf einfach mal die forum sufu nutzen

kleiner Tipp : sieh dir mal deine "verschachtelte Liste" genauer an

#matthias

Also mein Browser (Opera 10.60) unterstützt die von mir hier verwendeten Html5 Elemente.
Wie gesagt ohne das verschachtelte "<ul>" wird alles korrekt angezeigt.

MFG Matthias.

Dodo

Zitat von #matthias

Also mein Browser (Opera 10.60) unterstützt die von mir hier verwendeten Html5 Elemente.
Wie gesagt ohne das verschachtelte "<ul>" wird alles korrekt angezeigt.

MFG Matthias.

Opera ist in Sachen HTML5 auch vorbildlich. Was ich gelesen habe, kann IE bis Version 7 oder 8 HTML5-Elemente nicht oder kaum anzeigen.

#matthias

Im Opera, im FF und im Chromium wird das von mir probierte ohne Fehler angezeigt.
Ich würde euch ja mal eine Link geben, aber wie gesagt läuft das bei mir im Netzwerk nur local.
Ich habe mal 2 Screenshots gemacht. Das erste ist das Menü ohne Verschachtelung:

Das 2 mit unter "<ul>", das was in der Mitte sollte erscheinen wen man mit der Maus über "verschieben" geht:

MFG Matthias

unknownsoldier

deine <ul> die erscheinen soll muss in das Listenelement was gehovert werden soll.

Das ist wie ich das sehe ziehmlich egal ob das nun HTML5 ist oder nicht. das Prinzip ist bei beidem das selbe.

#matthias

Also die <ul> ist doch in der <li> drinn! Oder sehe ich das falsch?

MFG Matthias

#matthias

unknownsoldier: jetzt habe ich das erst mal verstanden wie du das gemeint hast.

Ich bin aber auch manchmal etwas von ...........

Einen Fortschritt habe ich damit schon erreicht. Die Element der Unterliste werden jetzt angezeigt wen ich mit der Maus über das obere Listenelement fahre.
Leider werden diese noch neben einander dargestellt und nicht wie gewünscht unter einander.

MFG Matthias

unknownsoldier

dann musste der liste die aufklappen soll ein float:none; geben

#matthias

Warum "float:none"?
Ich habe nirgens gefloatet. Mein Csss-Code:

PHP

header, section, footer, aside, nav, article {  
	display: block;  
}
 
/* LAYOUT ------------------------------------------ */
 
body {
  background: #fff;
  font-size: 12px;
  font-color: #444;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
#doc  {
  width: 100%;
  margin: 0 auto;
}
 
/* HEADER & NAVIGATION ------------------------------ */
 
#header {
  background: #333;
  padding: 0 15px;
}
 
#header h1 {
  margin: 0;
  padding: 15px 0;
  color: #45CC2F;  
  text-shadow: #a5a5a5 3px 1px 3px;
  //color: #A5A5A5;
}
 
#header nav ul {
  list-style-type: none;
  font-weight: bold;
  margin: 0;
  padding: 0 0 0 100px;
}
 
#header nav ul li {  
  display: inline;
  margin: 0;
  padding: 0;
}


#header nav ul li a {
  width: 85px;
  text-align: center;
  display: inline-block;
  padding: 2px 10px;
  color: #fff;
  background-color: #45CC2F;
  text-decoration: none;
}
 
#header nav ul li.active a,
#header nav ul li a:hover {
  background-color: #fff;
  color: #444;
}


#header nav li ul  {
	display: none;

}	
#header nav li:hover ul {
	display: block;
}

Alles anzeigen

MFG Matthias

unknownsoldier

mhm okay du hast es überdisplay inline gemacht...

dann geb den links in der verschachtelten liste mal display:block;

ul li ul li a {display:block;}

#matthias

Das hatte ich schon probiert. Es ist das so das die verschachtelte Liste zwar darunter angezeigt wird, aber es verschiebt auch alle weiteren Menüpunkte nach unten.

MFG Matthias

unknownsoldier

Habs mir bis jetzt noch net angesehen.. ich schaus mir heute abend mal an

Aber ich könnte wetten das jemand anders hier die lösung bestimmt bald postet

#matthias

Hallo,

nach langen hin und her habe ich es nun doch hinbekommen.
Was gefehlt hat war einmal ein "position: relative" und ein "position: absolute".
Hier der Code so wie es funktioniert:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
</meta><title>Menü zum ausklappen</title>
<link rel="stylesheet" href="menue_ausklappen.css" type="text/css" />
</head>
<boby>
	<div id="doc">
		<header id="header">
		<h1>JavaScript, Animation mit jQuery und dem easing Plugin</h1>
			<nav>
				<ul>
					<li class="active" id="Home"><a href="http://localhost/JavaScript/jQuery/animation_2_1.html">Home</a></li>
					<li><a id="Groesser" href="#">Größer</a></li>
					<li><a id="Kleiner" href="#">Kleiner</a></li>
					<li><a id="Verschieben" href="#">Verschieben</a>
						<ul>
							<li><a id="Verschieben" href="#">Verschieben</a></li>
							<li><a id="Verschieben" href="#">Verschieben</a></li>						
							<li><a id="Verschieben" href="#">Verschieben</a></li>
							<li><a id="Verschieben" href="#">Verschieben</a></li>			
						</ul>
					</li>
					<li><a id="Slide" href="#">Ausbelenden</a></li>
					<li><a id="Show" href="#">Einblenden</a></li>
					</ul> 
			</nav>
		</header>
	</div>
	<div style="clear:both;"></div>
	<div id="inhalt">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
		Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
		pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
		vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
		Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, 
		consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut 
		metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. 
		Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque 
		sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae 
		sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris 
		sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,	
	</div>
</body>
</html>

Alles anzeigen

und CSS:

HTML

header, section, footer, aside, nav, article {  
	display: block;  
}
 
/* LAYOUT ------------------------------------------ */
 
body {
  background: #fff;
  font-size: 12px;
  font-color: #444;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
#doc  {
  width: 100%;
  margin: 0 auto;
}
 
/* HEADER & NAVIGATION ------------------------------ */
 
#header {
  background: #333;
  padding: 0 15px;
}
 
#header h1 {
  margin: 0;
  padding: 15px 0;
  color: #45CC2F;  
  text-shadow: #a5a5a5 3px 1px 3px;
  //color: #A5A5A5;
}
 
#header nav ul {
  list-style-type: none;
  font-weight: bold;
  margin: 0;
  padding: 0 0 0 100px;
}
 
#header nav ul li {  
  display: inline;
  position: relative;
  margin: 0;
  padding: 0;
}


#header nav ul li a {
  width: 85px;
  text-align: center;
  display: inline-block;
  padding: 2px 10px;
  color: #fff;
  background-color: #45CC2F;
  text-decoration: none;
}
 
#header nav ul li.active a,
#header nav ul li a:hover {
  background-color: #fff;
  color: #444;
}


#header nav li ul  {
	display: none;
	opacity: 0.9;

}	
#header nav li:hover ul {
	display: block;
	position: absolute;
}
#header nav li ul li a  {
	margin-left: 227px;


}

Alles anzeigen

Danke noch einmal für die Hilfe.

MFG Matthias

Tags