pulldown menü - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > pulldown menü

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > pulldown menü

Pages: [1]

geschrieben von gr-ha am 25.07.2005 - 22:58

moin,
bin gerade an meiner ersten website die ohne tabelle ist.
ich möchte ein pulldownmenü basteln.
erstmal mein code:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18:

<html>
 <head>
  <title>test</title>
  <link rel="stylesheet" type="text/css" href="css.css">
 </head>

 <body>

  <div id="o">&nbsp;</div>
  <div id="m">
   <div id="menu"><a href="#">Start<span>test<br>test</span></a>|<a href="#">menu2</a></div>
  </div>
  <div id="u">&nbsp;</div>
  <div id="text">Text</div>

 </body>

</html>

und die css datei:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12:

body	{ font-family:Impact,sans-serif; margin:0; padding:0}

#o	{ background:#d6673b; height:20%; }
#m	{ background:#9f2832; height:22%; padding-top:5px;}
#u	{ background:#d6672b; height:58%; width:50%; float:left; }
#menu	{ background:#ac223e; text-align:center; position:relative; top:75%; left:50.1%; width:49.8%; height:20%; }
a     	{ color:#000; text-decoration:none; width:100px; }
a:hover	{ color:#f00; }
a span	{ display:none; }
a:hover span { display:block; ??}

#text	{ font-family:Arial,sans-serif; }

was muss ich für ?? einsetzen, damit der span genau unter Start erscheint?

noch ne frage, wie kann ich "Start" und "menu2" vertikal zentrieren.

und was gibt es bis jetzt so an sich am code zu verbessern?

MfG
gr-ha

geschrieben von Matneu am 26.07.2005 - 01:47

Juhu, endlich mal einer, der ein CSS-Pulldown-Menü macht *freu*
Ich nutze das auch und es funktioniert prima.

Bei mir sieht es folgendermassen aus:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23:

/* Hier kommt das ausklappbare Submenü */
.menu .submenu {
	position:relative;
	display:inline;
	padding:3px;
	margin:0px 5px 0px 0px;
	text-align:center;
	text-decoration:none;
	white-space:nowrap;
}

.menu .submenu .content {
	position:absolute;
	top:10px;
	left:30px;
	display:none;
	padding:0px 5px;
}

.menu .submenu:hover .content, .menu .submenu .content:hover {
	display:block;
	z-index:99;
}

Das Menü dazu sieht so aus:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7:

<div class="submenu">
	Überschrift
	<div class="content">
		<a href="/?action=kfm_einkauf&amp;f_id=all">Link 1</a>
		<a href="/?action=kfm_einkauf&amp;subpage=summe&amp;f_id=all">Link 2</a>
	</div>
</div>

So far...
Matthias

geschrieben von gr-ha am 26.07.2005 - 13:41

ich weiß gar nicht ob man mein menü pulldown-menü nennt.
hier ist jedenfalls noch ein link dazu:
http://www.gr-ha.de/test

geschrieben von Matneu am 26.07.2005 - 15:20

	Zitat
	Original geschrieben von gr-ha am 26.07.2005 - 13:41 ich weiß gar nicht ob man mein menü pulldown-menü nennt.

Warum nicht? Es pull't doch down

Das oben gepostete Beispiel ist von einer passwortgeschützten Intranetseite, deshalb gibt es dazu keinen Link (ok, es gibt ihn, aber er nützt ohne Passwort nicht viel

). Aber auf matneu.de siehst Du ein anderes Verfahren, was nur bei Menüs funktioniert, die am Browserrand liegen. Hier wird bei :hover einfach das gesamte Menü verschoben.
Als Alternative, denn es ist wesentlich einfacher. Dein Menü hat bei mir unter Opera leichte Probleme und wechselt teilweise sehr schnell zwischen auf und zu.

So far...
Matthias

HTML-Quelltext

HTML-Quelltext

HTML-Quelltext

HTML-Quelltext

Zitat