Menüpunkt in Klappmenü verlinken

[Freeloader]

Hallo liebe Wissenden,

ich habe mir mal wieder ein Projekt vorgenommen, wobei ich Euren Rat benötige. Ich baue mir mittels CSS ein 2D Klappmenü, welches bei MouseOver auf einen Menüpunkt die entsprechenden Untermenüs nach unten aufklappt. Das funktioniert auch wunderbar, allerdings hat nicht jeder Menüpunkt weitere Untermenüs, so dass ich auch gerne den Menüpunkt selber verlinken möchte. Das ganze ist wie folgt aufgebaut:

<div id="menu">
<ul>
  <li><h2>Menüpunkt</h2>
    <ul>
        <li><a href="#">Untermenü</a></li>
    </ul>
  </li>
 </ul>
</div>

Wie kann ich es nun erreichen, dass ich den Menüpunkt verlinke, ohne ein Untermenü zu öffnen? Habe schon verschiedene Sachen getestet, funktioniert aber leider nicht. Für weitere Infos wie zB die CSS etc, hier habe ich das Ganze her und in der Funktionsweise auch nicht geändert:

2D-Ausklappmenu


Vielen vielen Dank für Eure Unterstützung



Gruß Henner

 

[Elroy]

Hallo.

Verstehe das jetzt nicht so ganz.

Wenn ein Menüpunkt keine Untermenüs hat dann lass sie doch einfach weg.
Und wie man einen Menüpunkt verlinkt weisst du hoffentlich.

Gruss
Elroy

 

[Freeloader]

Hallo Elroy,

das würde ich dann grundsätzlich so lösen:

<ul>
<li><a href="#">Menüpunkt</a></li>
</ul>

Allerdings stimmt dann die Formatierung des Menüpunktes nicht mehr (Falsche Background Farbe etc), da diese ja von der css zugewiesen wird.
Was müsste ich dann nun in der css ändern?


Danke & Gruß

 

[alogheo]

die styles für den Link im Untermenu so zuweisen:

#navi ul ul a,
#navi ul ul ul a, /* ... */
{
/* ... */
}

 

[Elroy]

Hallo.

In der CSS solltest du gar nichts ändern.

<ul>
  <li><h2><a href="#">Menüpunkt</a></h2></li>
</ul>

Dann stimmt die Sache wieder.

Höchstens noch bei #menu h2 ein text-decoration: none; wenn du nicht möchtest das der Link unterstrichen ist.

Gruss
Elroy

 

[Freeloader]

[COLOR=#000080]<ul>[/COLOR]
  [COLOR=#000080]<li>[/COLOR][COLOR=#000080]<h2>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"#"[/COLOR]>[/COLOR]Menüpunkt[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</h2>[/COLOR][COLOR=#000080]</li>[/COLOR]
[COLOR=#000080]</ul>[/COLOR]

Das funktioniert ja eben nicht weil er dann den Style von den Untermenüs verwendet..

 

[alogheo]

<ul>
  <li><a href="#"><h2>Menüpunkt</h2></a></li>
</ul>

weiß nich wie gut das funzt, ansonsten, könnte mein erster Vorschlag weiterhelfen

 

[Freeloader]

Hi alogheo,

besten Dank auch für Deine Hilfe. Hatte zuerst den Vorschlag von elroy versucht, da mir dieser einfacher erschien - aber leider funzt es ja nicht. Nun habe ich Deine Zeilen in mein CSS kopiert (navi entsprechend in menu umbenannt), leider erfolglos.

Mein CSS:

/* Tabelleneigenschaften */
#menu {
width: 952px;
background: #424242;
float: left;
position:relative;
left:50%;
margin-left:-476px;
text-align: left;
}

/* Zelleneigenschaften Groesse Ebene 0-n */
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 119px;
float: left;
}

/* Zelleneigenschaften Ebene 0-n */
#menu a, #menu h2 {
font: 14px/14px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: dotted;
border-color: #424242 #424242 #424242 #424242; /* TOP-RIGHT-BOTTOM-LEFT */
margin: 0;
padding: 2px 3px;
}

/* Zelleneigenschaften Ebene 0 */
#menu h2 {
color: #FFFFFF;
background: #424242;
text-transform: uppercase;
}

/* Zelleneigenschaften Ebene 1-n OFF */
#menu a {
color: #FFFFFF;
background: #727272;
text-decoration: none;
}

/* Zelleneigenschaften Ebene 1-n ON */
#menu a:hover {
color: #000;
background: #838291;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Wäre super, wenn Du mir Deinen Code noch korrekt einbinden würdest.


Vielen Dank & beste Grüße

Henner

 

[alogheo]

anstatt

#menu a {
color: #FFFFFF;
background: #727272;
text-decoration: none;
}

#menu ul ul a,
#menu ul ul ul a{
color: #FFFFFF;
background: #727272;
text-decoration: none;
}

und statt

#menu a:hover {
color: #000;
background: #838291;
}

#menu ul ul a:hover,
#menu ul ul ul a:hover{
color: #000;
background: #838291;
}

hoffe mal, dass es funktioniert

 

[Freeloader]

Das sieht schon sehr gut aus, danke! Das Problem, dass der Menüpunkt nun bei Klick mit einem gepunkteten Rand versehen wurde und unterstrichen war, habe ich hier mit noch wegradiert:

<style type="text/css">A:link {text-decoration:none;outline: none;} A:active {text-decoration:none;outline: none;} A:visited {text-decoration:none;outline: none;}</style>

Leider wird der Text des Menüpunkts aber tiefer dargestellt, als die anderen :-(




Wie kann ich Abhilfe schaffen? Nochmal: Vielen vielen Dank

 

[alogheo]

<ul>
  <li><a href="#" style="padding:0"><h2>Menüpunkt</h2></a></li>
</ul>

</span>

 

[Freeloader]

Hallo,

perfekt - funktioniert bestens! Vielen lieben Dank an Euch 2 alogheo & Elroy für Eure Hilfe.
Muss ich den Thread noch als "erledigt" markieren? Finde grad keine Möglichkeit.



Gruß Henner

 

[alogheo]

soweit ich weiß, kann man hier nur als Admin/Moderator Threads schließen.

 

[Freeloader]

Ich hätte da doch noch was.. :-(

Hello again,

nachdem ich voller Stolz alles soweit fertig hatte, hat der Arbeitskollege (für den ich die Seite baue) leider entdeckt, dass die Menüpunkte die direkt verlinkt sind (also ohne Klappmenü) 1 Pixel weiter unten angezeigt werden als die, die ein Klappmenü haben. Testweise habe ich bei padding nun eine "1" eingetragen, in der Hoffnung dass die Schrift dann 1 Pixel nach oben verschoben wird. Dem ist leider nicht so.

Wer wäre so lieb mir auch dabei nochmal unter die Arme zu greifen? Vielen Dank im Voraus!


Gruß Henner

 

[alogheo]

<ul>
  <li><a href="#" style="padding:0; border-width:0"><h2>Menüpunkt</h2></a></li>
</ul>

 

[Freeloader]

Genau so, danke!