ComputerBase Menü
Aktuelles

CSS Dropdownmenu mit CSS

F

FastEthernet

Cadet 4th Year
Registriert
Juni 2010
Beiträge
65
Ich arbeite an einem Dropdownmenu per CSS (Ich weiss, das IEs das falsch darstellen und es ist mir egal :] ).

Eigentlich funzt es schon, aber ich arbeite an einer Schachtelung:
IST:
1sy681.png

SOLL:
16c11mr.jpg


CSS-Code:
Code: 
@charset "utf-8";
/* CSS Document */

/*Menu*/

.menu {
    background-color:#0C3;
	text-align:center;
	width:8em;
	float:left;
	}
	
span.tag {
	width:8em;
	background-color:#936;
	display: block;
    cursor: default;
	}	

.innen {
	display:none;
	width:8em;
	}
	
.menu:hover .innen {
	display:block;
	text-align:center;
	width:8em;
	background-color:#C39;
	}
	
/*Schachtelmenus*/

.smenu {
    background-color:blue;
	text-align:center;
	width:8em;
	float:left;
	z-index:200;
	}
	


.sinnen {
	display:none;
	width:8em;
	float:right;
	z-index:200;
	}
	
.smenu:hover .sinnen {
	display:block;
	text-align:center;
	width:8em;
	background-color:yellow;
	z-index:200;
	}

HTML-Code
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="design2.css" type="text/css" rel="stylesheet" />
</head>

<body>
<!-- MENU-->
    <div class="menu">
    	<span class="tag">1aaa</span>
        <a class="innen" href="#">Test1</a>
        <a class="innen" href="#">Test2</a>
        <a class="innen" href="#">Test3</a>
        <a class="innen" href="#">Test4</a>
	</div>
        
    <div class="menu">
        <span class="tag">2aaa</span>
        <a class="innen" href="#">Test1</a>
        <a class="innen" href="#">Test2</a>
        
            <div class="smenu">
                 <span class="stag">2.1aaa</span>
            	 
                     <a class="sinnen" href="#">Test1.1</a>
                     <a class="sinnen" href="#">Test2.1</a>
                     <a class="sinnen" href="#">Test3.1</a>
                     <a class="sinnen" href="#">Test4.1</a>
                 
        	</div>
        <a class="innen" href="#">Test3</a>
        <a class="innen" href="#">Test4</a>
    </div>
<!-- MENU END-->     

</body>
</html>

Vielen Dank, Oli
 
Such mal nach dem sogenannten "Suckerfish Dropdown Menu"... da solltest du fündig werden. ;)
 
Mhhm, ich hatte wohl vergessen zu erwähnen, dass ich nicht abschreiben will, sondern selbst arbeiten. Ausserdem verwendet dein Menu Listen statt meinen DIVs und SPANs.

Sagt mir lediglich wo mein Fehler ist oder wie ich es verbessern könnte. Ich will ja schließlich lernen wie es geht und nicht meinen Code zusammenklauen...
 
Am besten ist, du nutzt HTML-Listen, also <ul>.

//EDIT:
Auch wenn du selbst lernen willst - DIVs sind der falsche weg. Da gibts mehr Probleme mit. Außerdem funktionieren die UL-Listen auch im IE8 (vorausgesetzt, der richtige Doc-Header ist gesetzt)

Beispielstruktur:

Livedemo

Code: 
<ul>
  <li>Link a</li>
  <li><strong>Link b </strong>
     <ul>
        <li>sublink a</li>
        <li>sublink b</li>
     </ul>
  </li>
  <li><strong>Link b </strong>
     <ul>
        <li>sublink a</li>
        <li><strong>sublink b</strong>
	  <ul>
	    <li>sublink a</li>
	    <li>sublink b</li>
	  </ul>
	</li>
     </ul>
  </li>
</ul>


css:
Code: 
ul {
  width: 150px;
  list-style:none;
  margin:0;
  padding: 0;
  border-left: 1px solid #555;
  border-right: 1px solid #555;
  border-bottom: 1px solid #555;
}

ul ul {
  display: none;
  position: absolute;
  left:100%;
  top:0px;
}

ul li {
  display: block;
  padding:5px;
  position: relative;
  border-top: 1px solid #555;
}

ul li:hover > ul {
  display:block;
}
 
Zuletzt bearbeitet:
Ich mach morgen weiter, jetzt will ich abschalten.
Ps.:IE Nutzer sind für mich eh bl ... äh auf dem falschen Weg. Firefox 4 ever!
 
TchiboMann schrieb:
Außerdem funktionieren die UL-Listen auch im IE8 (vorausgesetzt, der richtige Doc-Header ist gesetzt)
Zum Vergrößern anklicken....
Im IE7 funktioniert dein Menü nicht korrekt; das letzte Untermenü kann man nicht öffnen, da das Menü zuklappt, bevor man mit der Maus den Link berührt.
FastEthernet schrieb:
Ps.:IE Nutzer sind für mich eh bl ... äh auf dem falschen Weg. Firefox 4 ever!
Zum Vergrößern anklicken....
Den IE musst du ja nicht untersützen; sind auch nur ~50 % der Besucher ;)
 
Tjar Mr. Snoot, ich hab ja auch IE8 gesagt :P IE7 is genauso rotz wie IE6, nur nich ganz so extrem. Der IE8 stellts problemlos dar. Empfiehlt sich sowieso für den IE n kleines Javascript einzufügen:

http://code.google.com/p/ie7-js/

Datt schont einiges an Developernerven...

//Edit
ah, and btw - bei uns is der IE grad mal mit 20% vertreten, also fast schon ignorierbar :D
 
Zuletzt bearbeitet:
@ FastEthernet: auf CSSplay gibts auch haufenweise CSS-Menüs, da sollte sich was passendes finden lassen, bspw.: http://www.cssplay.co.uk/menus/skeleton.html (übrigens auch alles auf Listen basiert)

@ TchiboMann: für mich wär das nichts. Ich kümmer mich auch um die 4 % Operabenutzer, und selbst wenn es nur 1 Pixel ist, der irgendwo im Layout nicht richtig sitzt ;)
 
Also wer so ran geht das nur speziell für FF entwickelt hat leider schon auf dem Markt verloren.

Stelle ich mir sehr gut bei einem Vorstellungsgespräch als WebDesigner oder WebEntwickler vor:
A: "Und wie würden sie dieses DropDown Menü Browser übergreifend realisieren?"
B: "Gar nicht!!! Weil es außer Acht gelassen werden kann, FF ist eh besser und IE oder Opera sind eh nur Lückenfüller."

LOOOOL, sehr geil. xD

Zu dem möchte ich fast behaupten, das fast alle Menüs eigentlich mit Listen realisiert werden, einfach weil es eine absolut angenehme Gliederung zulässt und dann nach belieben gestaltet und in einander geschachtelt werden kann. ;)
Aber da kann ich gern mal in unserer Webentwicklungsabteilung nachfragen wo die Tendenzen dort liegen.
Auch wenn du einen Lerneffekt willst, den wirst du auch dort finden. Denn du sollst nicht nur Copy-Past spielen, sondern dir das alles mal genauer anschauen und auch verstehen!
So ist es bei allem und so lernt man am Besten. Erfahrungen sammeln durch andere, aber auch verstehen was gemacht wurde/wird.

... in diesem Sinne.
 
Zuletzt bearbeitet:
Neu, schlank und mit LISTEN.
... aber der Dropdown-Effekt funzt nicht mehr

HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css.css" type="text/css" rel="stylesheet" /> 
</head>

<body>
<ul>
<li class="magic">Zauber</li>
<li class="off">Test</li>
<li class="off">2.Test</li>
</ul>
</body>
</html>

CSS
Code: 
@charset "utf-8";
/* CSS Document */

li.off {
	display:none;
	}

li.magic:hover li.off{
	background-color:#0F0;
	display:block;
	}
 
hmm... da fehlt ja auch das "gedpropte" Menü.

Im ersten UL ist dein Hauptmenü... und dort machst du dann in einem Listenelement LI eine weitere Liste UL.

Und die zweite Liste lässt du dann mit display:none, bzw.display:inline anzeigen, bzw. verbergn.

Gruß

HD
 
Besser?
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css.css" type="text/css" rel="stylesheet" /> 
</head>

<body>

<ul>
	<li class="magic">Zauber</li>
    <ul>
        <li class="off">Test</li>
        <li class="off">2.Test</li>
    </ul>
</ul>

</body>
</html>
 
Noch nicht ganz :D

Die zweite Liste muss Teil eines Listenelements sein...

Code: 
<ul id="nav">
<li><a href="nav1.html">Nav1</a></li>
[COLOR="red"]<li>[/COLOR]<a href="nav2.html">Nav2</a>
    <ul>
        <li><a href="nav2a.html">Nav2a</a></li>
        <li><a href="nav2b.html">Nav2b</a></li>
        <li><a href="nav2c.html">Nav2c</a></li>
    </ul>
[COLOR="Red"]</li>[/COLOR]
</ul>
 
Funzt immer noch nicht

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css.css" type="text/css" rel="stylesheet" /> 
</head>

<body>

<ul class="menu">
<li><a href="#">Nav1</a></li>
<li><a href="#">Nav2</a>
    <ul class="off">
        <li><a href="#">Nav2a</a></li>
        <li><a href="#">Nav2b</a></li>
        <li><a href="#">Nav2c</a></li>
    </ul>
</li>
</ul>

</body>
</html>
 
Ok, dann hier mal komplett... aber nich kopieren, nur lernen ;)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta  http-equiv="Content-type" content="text/html; charset=iso-8859-1" name="DropDown" />
<title>DropMenu</title>
<style type="text/css">
ul, li, html, a
{
	margin:0px;
	padding:0px;
}
body
{
	text-align:center;
	margin:0px;
	padding:0px;
	font-family:verdana;
}
li
{
	list-style-type:none;
}
a
{
	text-decoration:none;
	color:darkred;
}
ul#nav
{
	width:29em;
	height:2em;
	margin:2em auto 0;
	font-size:1em;
}
ul#nav li
{	
	position:relative;
	float:left;
	width:9em;
	height:2em;
	background-color:silver;
	line-height:2em;
	border-right:2px dashed #383928;
}
ul#nav li.noBorder
{
	border:none;
}
ul#nav li:hover
{
	background-color:grey;
}
ul#nav li a
{
	display:block;
	float:left;
	width:100%;
}
ul#nav li ul
{
	display:none;
}
ul#nav li:hover ul
{
	display:inline;
	text-align:left;
}
ul#nav li:hover ul li
{
	width:100%;
	height:2em;
	border:none;
	border-bottom:1px dotted black;
	background-color:grey;
	overflow:hidden;
}
ul#nav li:hover ul li a
{
	display:block;
	margin:0px;
	padding:0px 0 0 0.3em;
	height:100%;
	line-height:2em;
}
ul#nav li:hover ul li a:hover
{
	background-color:silver;
}
</style>
<head>
<body>
<div>
<ul id="nav">
<li><a href="nav1.html">Nav1</a></li>
<li><a href="nav2.html">Nav2</a>
<ul>
<li><a href="nav2a.html">Nav2a</a></li>
<li><a href="nav2b.html">Nav2b</a></li>
<li class="noBorder"><a href="nav2c.html">Nav2c</a></li>
</ul>
</li>
<li class="noBorder"><a href="Nav3.html">Nav3</a>
<ul>
<li><a href="Nav3a.html">Nav3a</a></li>
<li><a href="Nav3b.html">Nav3b</a></li>
<li class="noBorder"><a href="Nav3c.html">Nav3c</a></li>
</ul></li>
</ul>
</div>
</body>
</html>
 
Sorry, aber ich hatte eigentlich gehofft, dass ich mit eurer Hilfe den Quelltext komplettiere,
und ich finde meinen "Ansatz" grade, wo wahrscheinlich nicht viel fehlt, für gut, da er sehr schlank ist.
Hier noch mal alles:
HTML
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css.css" type="text/css" rel="stylesheet" /> 
</head>

<body>

<ul class="menu">
<li><a href="#">Nav1</a></li>
<li><a href="#">Nav2</a>
    <ul class="off">
        <li><a href="#">Nav2a</a></li>
        <li><a href="#">Nav2b</a></li>
        <li><a href="#">Nav2c</a></li>
    </ul>
</li>
</ul>

</body>
</html>

CSS
Code: 
@charset "utf-8";
/* CSS Document */

ul.off {
	display:none;
	}

li.menu:hover ul:off {
	background-color:#0F0;
	display:block;
	}
 
FastEthernet schrieb:
da er sehr schlank ist.
Zum Vergrößern anklicken....
Damit kommst du aber vermutlich nicht weit, wenn du alle Browser unterstützen willst (was du tun solltest; zumindest die 5 großen).


In deinem CSS-File sind zwei Fehler:

Ist:
li.menu:hover ul:off {​

Soll:
ul.menu:hover ul.off {​
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

M
Dropdown-Menü verschiebt Seiteninhalt nach unten (CSS?)
Antworten
7
Aufrufe
2.066
McMoneysack91
M
N
Bilder wird oben an der Suchleiste abgeschnitten (HTML/CSS)
Antworten
3
Aufrufe
1.129
Janush
Janush
D
css nth frage
Antworten
8
Aufrufe
824
D0bby
D
M
HTML/CSS Navbar mit ZWEI Unterebenen (Dropdown)
Antworten
6
Aufrufe
3.731
netzgestaltung
netzgestaltung
H
HTML HTML/CSS wird nicht angenommen
Antworten
9
Aufrufe
4.017
netzgestaltung
netzgestaltung
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz