Problem mit 2. Ebener bei CSS-Menü

schlagspin · 31. Oktober 2004

Hallo,

ich habe folgendes Problem:

Ich habe vor, folgendes CSS-Menü mit Transition-Effekt in meine Seite einzubauen. Das Menü habe ich nicht selbst geschrieben und ich habe folgendes Problem:

Ich möchte jetzt Untermenüpunkte (2. Ebene) einbauen, bei denen sich die Textfarbe oder Rahmenfarbe der Menüpunkte von der 1. Ebene unterscheiden sollen. Wie kann ich das bewerkstelligen?

Vielen Dank im voraus.
Wolfgang

Css-Teil:

#list-menu a:link, #list-menu a:active, #list-menu a:visited {
color: #000000;
}

#list-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#list-menu a:hover {
border: 1px solid #000000;
background: #333333;
color: #EEEEEE;
}

#list-menu a {
display: block;
width:140px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #dcdcdc;
text-decoration: none;
filter:blendTrans(duration=0.3);

table {
border: 0;
background-repeat: repeat-x;
}
Die eigentliche Seite mit dem Menü sieht so aus:

<div id="list-menu">
<ul>
<li><a href="menue.php?sid=100&mid=100" target="_self" onmouseover="lite(this)" onmouseout="lite(this)" onfocus="this.blur()">Startseite</a></li>
<li><a href="menue.php?sid=200&mid=200" target="_self" onmouseover="lite(this)" onmouseout="lite(this)" onfocus="this.blur()">Wir über uns</a></li>
</ul>
</div>

Dust · 3. November 2004

wie wäre es mit einem anderen lösungs ansatz?

PHP

<script type="text/javascript">
var oldId = null;
var link_id_old= null;
/* verstektes element sichtbar machen */
function showMenu(id){
if (id != null) {
var element=document.getElementById(id);
if(element){
element.style.display='block';
oldId=id;
}
}
}
/*aktuell sichtbare menues unssichtbar machen*/
function hideMenu(id){
if (id != null) {
var element=document.getElementById(id);
if(element){
element.style.display='none';
}
}
}
/*aus leserlichkeit im <a> zu einer funktion zusammen fügen*/
function toggle(id){
hideMenu(oldId);
showMenu(id);
}
</script>

Alles anzeigen

die letzte funktion macht nichts anderes als die anderen zu handeln...

PHP

<styles type="text/css">
div.menue{
display:block;
}
div#link_id{
}
</styles>
<div class="hilfselemet">
<div class="menue" id="link_id">
<a href="#" onclick="toggle('link_id')"><?php echo($idvariable)?></a>
</div>
</div>

Alles anzeigen

ich ändere im Prinzip nur ein style um etwas sichtbar zu machen block sorgt dafür das sich der inhalt von menue in dem holfselement breit macht, none macht es "unsichtbar"

Die funktionen funktionieren, musst halt nur für die richtigen übergabeparameter sorgen, ich hab die code schnippsel aus meiner aserwarten kammer und der zweite liegt alerding ein dreidimensionales array zu grunde...
wenn man das noch hübsch mit php verbindet hat man so ein relativ variables menue...

Teilen