✔ CSS - DropDown Menu

[Zneaf]

Hey Leute

ich habe ein Problem bei der Programmierung meines DropDown Menus.

Ich habe (zusammen mit einem Freund) ein horizontales DropDown Menu programmiert, bei dem die Unterpunkte nach unten heraus droppen, sobald man mit der Maus über die horizontal angeordneten Überpunkte fährt.
Die Überpunkte haben ein Hintergrundbild (alle das selbe) und die Unterpunkte haben lediglich eine Hintergrundfarbe.
Der Aufbau des Menus befindet sich mit im Index und den CSS - Code binde ich einfach im Index ein.

Mein Problem dabei:
Sobald man einen der Links (egal ob Über- oder Unterpunkt) angeklickt hat, ist dessen Design verschwunden.

Hier der Aufbau meines Menus (im index.php):

<td colspan="3">
	<div class="nav">
		<ul>
			<li><?php if($site!="home"){echo"<a href=".$_SERVER['PHP_SELF']."?site=home>Home</a>";}else{echo"Home";}?></li>
		</ul>
	</div>
</td>
<td>
	<div class="nav">
		<ul>
			<li><?php if($site!="news"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=news>Main</a>"; }else{ echo"Main";}?>
				<ul>
					<li><?php if($site!="news"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=news>News</a>"; }else{ echo"News";}?></li>
					<li><?php if($site!="joinus"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=joinus>Bewerbung</a>"; }else{ echo"Bewerbung";}?></li>
					<li><?php if($site!="support"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=support>Support</a>"; }else{ echo"Support";}?></li>
					<li><?php if($site!="kontakt"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=kontakt>Kontakt</a>"; }else{ echo"Kontakt";}?></li>
					<li><?php if($site!="impressum"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=impressum>Impressum</a>"; }else{ echo"Impressum";}?></li>
				</ul>
			</li>
		</ul>
	</div>
</td>
<td colspan="3">
	<div class="nav">
		<ul>
			<li><?php if($site!="projektleitung"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=projektleitung>Team</a>"; }else{ echo"Team";}?>
				<ul>
					<li><?php if($site!="projektleitung"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=projektleitung>Projektleitung</a>"; }else{ echo"Projektleitung";}?></li>
					<li><?php if($site!="dj"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=dj>Resident DJ's</a>"; }else{ echo"Resident DJ's";}?></li>
					<li><?php if($site!="webmaster"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=webmaster>Webmaster</a>"; }else{ echo"Webmaster";}?></li>
					<li><?php if($site!="grafikteam"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=grafikteam>Grafikteam</a>"; }else{ echo"Grafikteam";}?></li>
				</ul>
			</li>
		</ul>
	</div>
</td>
<td colspan="3">
	<div class="nav">
		<ul>
			<li><?php if($site!="sendeplan"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=sendeplan>Community</a>"; }else{ echo"Community";}?>
				<ul>
					<li><?php if($site!="sendeplan"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=sendeplan>Sendeplan</a>"; }else{ echo"Sendeplan";}?></li>
					<li><?php if($site!="tracklist"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=tracklist>Tracklist</a>"; }else{ echo"Tracklist";}?></li>
					<li><?php if($site!="streambox"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=streambox>Streambox</a>"; }else{ echo"Streambox";}?></li>
					<li><?php if($site!="history"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=history>History</a>"; }else{ echo"History";}?></li>
					<li><?php if($site!="gbook"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=gbook>Gästebuch</a>"; }else{ echo"Gästebuch";}?></li>
					<li><?php if($site!="bookus"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=bookus>Book us</a>"; }else{ echo"Book us";}?></li>
				</ul>
			</li>
		</ul>
	</div>		
</td>
<td>
	<div class="nav">
		<ul>
			<li><?php if($site!="hbox"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=hbox>HouseBox</a>"; }else{ echo"HouseBox";}?></li>
		</ul>
	</div>
</td>

Das hier ist nicht die gesamte Tabelle, also wundert euch nicht, da es z.B. keinen öffnenden / schließenden table-tag gibt.

Hier mein bisheriger CSS-Code:

<style type="text/css">
.nav {
font-size:0.85em;
font-family: Arial;
padding-bottom:200px;
}

.nav ul {
padding:0;
margin:0;
list-style-type:none;
}

.nav li {
float:left;
width:142px;
position:relative;
}

.nav ul li a, .nav ul li a:visited{
display:block;
font-size:20px;
font-family: Arial;
text-decoration:none; 
color:#FFFFFF; 
width:142px; 
height:38px; 
border:1px solid #FFFFFF; 
border-width:1px 0 0 0; 
background-image:url(images/button.jpg);
text-align:center;
line-height:38px;
}

.nav ul ul {
visibility:hidden;
position:absolute;
height:0;
top:39px;
left:0; 
width:142px;
}

.nav ul ul li a, .nav ul ul li a:visited {
background:#1a1a1a;
font-size:14px;
height:auto; 
line-height:1em; 
padding:5px 10px;
width:122px
}

.nav ul li a:hover, .nav ul ul a:hover{
color:#ce0000;
font-weight:bolder;
}

.nav ul li:hover ul{
visibility:visible; 
}
</style>

Wir versuchen das oben angesprochene Problem seit knapp 2 Wochen zu beseitigen....vergebens.

Habt ihr vielleicht ne Idee, woran das liegen könnte?

Vielen Dank für Eure Hilfe =)

LG Zneaf

 

[threadi]

Tabellen machen an der Stelle keinen Sinn. Bitte schmeiß die möglichst raus.

Wenn man einen Link im Menü anklickt, wird eine neue Seite geladen. Meinst Du mit deiner Beschreibung, dass du auf der neu geladenen Seite dann auch das Untermenü sehen willst, oder bezieht sich deine Frage auf den Zustand des Links im Moment des Anklickens?

 

[CPoly]

Sobald man einen der Links (egal ob Über- oder Unterpunkt) angeklickt hat, ist dessen Design verschwunden.

Ganz einfach. Du gibst bei der aktuellen Seite kein a-Tag aus, sondern nur den Text. Also haben folgende Regel bei diesem Menüpunkt keine Auswirkung mehr

.nav ul li a, .nav ul li a:visited

.nav ul ul li a, .nav ul ul li a:visited
 
.nav ul li a:hover, .nav ul ul a:hover

Normalerweise würde man dem aktuellen Link einfach eine Klasse geben und ihn etwas anders stylen. Also ändere die ganzen Abfragen in deinem PHP dahingehend, dass beim aktiven Link z.B. "class="current"" ausgegeben wird.

 

[Zneaf]

Hey Leute

erstmal Vielen Dank für die schnelle Antwort =)

@threadi: Das mit der Tabelle werd ich mal noch überdenken
Zu deiner 2ten Frage: Mein DropDownMenu bleibt logischerweise immer an einer Stelle. Es ist horizontal angeordnet und droppt die Unterpunkte nach unten, sobald man mit der Maus über die Überpunkte fährt. Was ich meinte, war, dass die Links ihr Design verlieren, sobald man sie angeklickt hat. Das betrifft sowohl die Überpunkte, als auch die Unterpunkte....je nachdem, welchen Punkt man angeklickt hat. Hoffe das war verständlich =)

@CPoly: Das mit den Links im index hab ich mir schon fast gedacht, dass es nicht so funktioniert. Ich habs auch gleich mal testweise ausprobiert, indem ich immer einen <a>-Tag reingemacht habe (egal, ob die Seite aufgerufen ist oder nicht)
Hier ein Beispielcode:

<div class="nav">
	<ul>
		<li><?php if($site!="hbox"){ echo"<a href=".$_SERVER['PHP_SELF']."?site=hbox>HouseBox</a>"; }else{ echo"<a href=".$_SERVER['PHP_SELF']."?site=hbox>HouseBox</a>";}?></li>
	</ul>
</div>

Dabei habe ich sofort gesehen, dass das Problem mit den Unterpunkten behoben ist. Lediglich die Überpunkte sindm unverändert (d.h. haben kein Design mehr, nachdem man sie angeklickt hat).
Allerdings hab ich leider keine Ahnung, wie ich das mit dem "class="current"" umsetzen sollte und was mir das genau bringen würde^^ sry

Vielen Dank für Eure Hilfe

LG Zneaf

 

[CPoly]

Allerdings hab ich leider keine Ahnung, wie ich das mit dem "class="current"" umsetzen sollte und was mir das genau bringen würde^^ sry

Zur Umsetzung:
Angenommen du hast so ein Menu (mal ohne das PHP Gedöns)

<div class="nav">
    <ul>
        <li><a href="#foo">foo</a></li>
        <li><a href="#bar">bar</a></li>
    </ul>
</div>

Jetzt kannst du dem aktuell ausgewählten Link (der Link, auf dessen Seite du dich gerade befindest) die Klasse "current" verpassen.

<div class="nav">
    <ul>
        <li><a href="#foo" class="current">foo</a></li>
        <li><a href="#bar">bar</a></li>
    </ul>
</div>

Was bringt das?

Im Moment wolltest du ja scheinbar den aktuellen Link dadurch "speziell" machen, in dem du ihm das a-Tag geraubt hast. Stattdessen kannst du jetzt via CSS den Link hervorheben.

.nav .current {
    color:red;
}

Der Benutzer sieht jetzt an der Roten Schrift wo er sich befindet. Natürlich solltest du dir etwas sinnvolleres als Rote Schrift aussuchen (andere Hintergrund oder Rahmen).

 

[Zneaf]

Hey Leute

habe Neuigkeiten...alles funktioniert wie gewünscht

Hab das ganze so gemacht, wieCPoly gesagt hat und nun funktioniert alles bestens

Vielen Dank

LG Zneaf