CSS Menü erstellen (lassen)

C

Cobato

Neues Mitglied
Thread Starter
Dabei seit
25.06.2010
Beiträge
16
Reaktionspunkte
0
Hallo Leute,
erstmal vorab: Ich habe keine Ahnung, deswegen stelle ich diese Frage auch ;)
Also, gibt es im Netz irgendwo Vorlagen oder Builder für ein vertikales CSS Menü?
Das Menü sollte immer einen aktiven Navigationspunkt haben und zusätzlich auch ein Submenü

Beispiel:

Home
Aktuelles
Service
--->Unterpunkt 1
--->Unterpunkt 1
--->Unterpunkt 1
Leistungen
Kontakt

Hier sollte Service aktiv zu sehen sein.
Das Menü sollte außerdem mit unterschiedlichen Farben hinterlegt sein,
sowie Farbwechsel der Schrift bei Mouseover.

Ich weiß die Frage ist doof, ich stelle sie aber trotzdem :)
Würde mich freuen wenn mir da jemand weiterhelfen könnte.
Danke!
 
Kenn ich, aber die sind alle ohne SubMenüs!
 
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>WDD1108</title>

<style type="text/css">

<!--
	
	body{
	
			padding:0;
			margin:0;
			font-family:Arial, Helvetica, sans-serif;
			font-size:16px;
		
	
	}
	
	ul#menu, ul#menu li ul{
			list-style:none;
			
	
	
	
	}
	ul#menu{
	
			margin:100px 0 50px 100px;
			background-color:#999;
			border:1px solid #333;
			width:160px;
			padding:25px;
	}
	
	ul#menu li{
	
			margin:2px 0;	
	
	
	}
	ul#menu li a{
			background-color:#CCC;
			padding:6px 10px;
			border:1px solid#333;
			display:block;
			color:#003300;
			text-decoration:none;	
	}
	
	ul#menu li a:hover{
			background-color:#333;	
			color:#FFF;
	
	
	
	}
	ul#menu li ul{
			display:none;
	
	
	
	}
	ul#menu li:hover ul{
			display:block;	
	
	
	}
-->
</style>
</head>

<body>	

	<ul id="menu">
    		<li><a href="#">Men&uuml;punkt 1</a></li>
            <li><a href="#">Men&uuml;punkt 2</a>
            	<ul>
                	<li><a href="#">Punkt 2.1</a></li>
                    <li><a href="#">Punkt 2.2</a></li>
                    <li><a href="#">Punkt 2.3</a></li>
                </ul>
             	</li>   
                
            <li><a href="#">Men&uuml;punkt 3</a></li>
            <li><a href="#">Men&uuml;punkt 4</a></li>
            <li><a href="#">Men&uuml;punkt 5</a></li>
            </ul>  
	
    </body>
    </html>

Bitte, macht 5000€
 
Okay, vielleicht war meine Erklärung auch nicht gut, denn das ist es noch nicht so ganz ;)

Die menüs sollen nicht bei mouseover aufgehen, sonder bei click. Und wenn ich einen Punkt anklicke dann sollte der auch aktiviert bleiben, egal ob im Haupt- oder im Submenü.
Ich bin da ein totaler Anfänger wie du vielleicht gemerkt hast. Hinzu kommt, das das Menü nicht in HTML, sondern via php aufgerufen werden soll
<?php show_menu(); ?>
Zum Vergrößern anklicken....

Das CSS wie es jetzt ist, ist irgendwie nicht so ganz richtig…

}
.menu {
vertical-align: top;
padding: 0px;
background: #2f6eaf;
}
.menu ul {
border-top: 0px;
border-bottom: 1px solid #fac137;
list-style-type: none;
background: #cbdbeb;
padding: 0;
margin: 0;
}
.menu ul ul{
border: 0px;
padding: 0;
margin: 0;
background: #fac137;
}
.menu ul ul ul {
border: 0px;
padding: 0;
margin: 0;
}
.menu li {
border: 0px;
border-top: 1px solid #fac137;
}
.menu li li{
border: 0px;
border-top: 1px solid #fac137;
}
.menu li li li{
border: 0px;
border-top: 1px solid #fac137;
}
.menu li a {
border-left: 5px solid #8dafd3;
background: #8dafd3;
}
.menu li li a {
border-left: 12px solid #2f6eaf;
background: #2f6eaf;
}
.menu li li li a {
border-left: 24px solid #cbdbeb;
background: #cbdbeb;
}
.menu a:link, .menu a:visited, .menu a:active{
padding: 3px 10px 3px 10px;
display: block;
color: #ffffff;
text-decoration: none;
background-color: #2f6eaf;
}
.menu a:hover {
color: #2f6eaf;
text-decoration: none;
background-color: #8dafd3;
}
.menu_current {
font-weight: bold;
color: #2f6eaf;
background-color: #0be200;
}
Zum Vergrößern anklicken....
 
Spiel mal damit hier rum...
Für weitere Hilfe kannst du mir gerne eine PN schreiben... das kostet dann aber Geld!

Code: 
<div id="navi">
      <ul>
        <li id="nav1"> 
             <a <?php if(basename($_SERVER['SCRIPT_FILENAME']) == 'index.php'){ echo 'class="active"';} ?> 
             href="index.php" class="home">START</a>
        </li>
         <li id="nav2">
             <a <?php if(basename($_SERVER['SCRIPT_FILENAME']) == 'screen.php'){ echo 'class="active"';} ?> 
             href="screen.php" class="web">SCREENDESIGN</a>
         </li>
        <li id="nav3">
            <a <?php if(basename($_SERVER['SCRIPT_FILENAME']) == 'developer.php'){ echo 'class="active"';} ?> 
            href="developer.php" class="print">DEVELOPER</a>
        </li>
        <li id="nav4">
            <a <?php if(basename($_SERVER['SCRIPT_FILENAME']) == 'photo.php'){ echo 'class="active"';} ?> 
            href="photo.php" class="photo">PHOTOGRAPHIE</a>
        </li>
        <li id="nav5">
            <a <?php if(basename($_SERVER['SCRIPT_FILENAME']) == 'street.php'){ echo 'class="active"';} ?> 
            href="street.php" class="street">STREETART</a>
        </li>
        <li id="nav6"><a href="vita.pdf" class="vita" target="_blank">VITA</a></li>
      </ul>
</div>

Damit wird über die URL abgefragt welcher Punkt grade am start ist... dann wird ihm die class active zugewiesen.

*Edit* nicht wundern... hab ich grade schnell aus einem Projekt rauskopiert...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten