25.08.2008, 11:50
|
||||
|
||||
CSS Navigation aktiver Link
Hallo ins Forum,
ich habe ein 2spaltige Navigation die bisher prima über CSS und Javascript (angepasstes Suckerfishmenü) läuft. Die erste Spalte ist immer sichtbar, beim MouseOver wird der Link farbig hinterlegt und die dazugehörende zweite Spalte mit dem Submenü wird sichtbar. Dann geht man mit der Maus rüber in die rechts Spalte und wählt einen Link, der ebenfalls farbig hinterlegt wird. Nun zum eigentlichen Problem. Wenn man einen Menüpunkt in der linken Spalte mit der Maus verläßt geht natürlich auch der farbige Hintergrund weg (bzw. ein anderer Menüpunkt im Hauptmenü wird farbig hinterlegt, wenn man mit der Maus nach unten geht). Die farbige Hinterlegung eines Hauptmenüpunkts soll aber bleiben, wenn man nach rechts ins entsprechende Submenü wechselt. Weiterhin soll beim Klick bzw. dann auch beim Anzeigen einer eine Seite die Navigation geöffnet bleiben und sowohl Haupt- als auch Submenüpunkt farbig hinterlegt bleiben. Kann man sowas mit CSS machen oder geht sowas nur mit JavaScript. Hier die Bilder wie es zur Zeit ist:  Navi ohne MausOver  Navi mit MouseOver in der linken Spalte  Navi mit MouseOver in der rechten Spalte. Wie man sieht ist nun die farbige Hinterlegung links weg. Das CSS für das Menü sieht so aus: Code:
#menu, #menu ul { /* all lists */
list-style: none;
float : left;
width : 130px;
height: 200px; }
#menu li { /* all list items */
position : relative;
float : left;
margin-bottom : 5px;
width: 130px; }
#menu li ul { /* second-level lists */
position : absolute;
left: -999em;
top: 0px;
margin-left : 130px; }
#menu li ul li a {
width: 125px;
padding : 1px 0 1px 5px; }
#menu li a {
display : block;
color : #609B35;
width: 128px;
padding : 1px 0 1px 2px; }
#menu li a:link, #menu li a:visited {
color: #609B35;
background-color: none; }
#menu li a:hover, #menu p a:active {
color: #FFF;
background-color : #609B35; }
#menu li:hover ul ul, #menu li.sfhover ul ul{
left: -999em; }
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul { /* lists nested under hovered list items */
left: auto; }
Code:
<script type="text/javascript">
<!--//--><![CDATA[//>
<!--
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Viele Grüße - Steffi 
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Problem mit CSS Dropline menü | horst77 | CSS | 1 | 12.08.2009 12:49 |
| Vertikale CSS Navigation mit Bildern und Text | macmensa | CSS | 2 | 25.07.2009 17:23 |
| Definitionsliste in einer Floatumgebung | *pi | CSS | 11 | 07.01.2009 19:34 |
| CSS Navigationsproblem | thesecretboy | CSS | 0 | 12.04.2007 09:12 |
| Aufklappbare Navigation mit CSS | webnet | CSS | 7 | 20.09.2006 22:45 |
Linear-Darstellung
