messmar
Erfahrenes Mitglied
CSS-Klasse eins Untermenüs wieder auf normal setzen
Hallo,
ich habe die folgende Navigation und sie funktioniert gut.
Wenn der User ein Menü aufklappt und einen Link in den unteren Menü klickt dann ändert sich die CSS-Klasse des Links.
Ich Klicke dann einen anderen übergeordneten Menüpunkt und automatisch wird das untere bzw. das vorher angeklicktes Menü geschloßen. (Ist auch gut und richtig so).
Aber wenn ich dann wieder das vorher angeklickte Menü aufklappe, finde ich daß der untere Menüpunkt nicht die normale CSS-Klasse hat, sondern die für einen aktiven Link, was nicht passeren darf.
Kann Jemand bitte helfen (dringend)?
1000 Dank
Messmar
Hallo,
ich habe die folgende Navigation und sie funktioniert gut.
Wenn der User ein Menü aufklappt und einen Link in den unteren Menü klickt dann ändert sich die CSS-Klasse des Links.
Ich Klicke dann einen anderen übergeordneten Menüpunkt und automatisch wird das untere bzw. das vorher angeklicktes Menü geschloßen. (Ist auch gut und richtig so).
Aber wenn ich dann wieder das vorher angeklickte Menü aufklappe, finde ich daß der untere Menüpunkt nicht die normale CSS-Klasse hat, sondern die für einen aktiven Link, was nicht passeren darf.
Kann Jemand bitte helfen (dringend)?
1000 Dank
Messmar
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script>
<!--
var arrClasses = new Array("normal","highlight");
var lnkOldID = "";
function activeLink(lnkID)
{
myObj = document.getElementById(lnkID);
if(lnkOldID == "")
{
lnkOldID = lnkID;
myObj.className = arrClasses[1];
}
else
{
if(lnkOldID != lnkID)
{
var myOldObj = document.getElementById(lnkOldID);
myOldObj.className = arrClasses[0];
myObj.className = arrClasses[1];
lnkOldID = lnkID;
}
}
}
// ##################################################
function displaySubNav(li, display) {
var ul = li.getElementsByTagName('ul');
if (ul && ul[0])
ul[0].style.display = display;
if (display=='block') {
li.firstChild.style.color='#0050aa';
li.firstChild.style.fontSize='10px';
li.firstChild.style.fontWeight='bold';
li.firstChild.style.textDecoration='none';
} else {
li.firstChild.style.color='#0050aa';
li.firstChild.style.fontWeight='normal';
li.firstChild.style.textDecoration='none';
}
}
function hideNavigation() {
var nav = document.getElementById('nav');
var item = nav.firstChild;
while (item) {
if (item.tagName && item.tagName.toLowerCase() == "li") {
displaySubNav(item, "none");
}
item = item.nextSibling;
}
}
function showNavigation(li) {
hideNavigation();
displaySubNav(li, "block");
}
//#################################################
//-->
</script>
<style>
ul#nav li.ul00li00 {
margin: .8em 0em 0em 0em;
}
ul#nav {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
list-style-type: none;
color: #0050AA;
width: 147px;
height: 40em;
margin: 0em 0em 0em 0em;
padding: 0em 0 .6em 0em;
background-color: #E0F3FB;
float: left;
}
ul#nav li {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
list-style-type: none;
color: #0050AA;
width: 147px;
margin: 0em 0em 0em 0em;
padding: 0 0 .6em 0em;
background-color: #E0F3FB;
float: left;
}
ul#nav li ul {
width: 120px;
margin: 0em 0em .6em 0em;
padding: 0em;
list-style-type: none;
background-color: #E0F3FB;/*Hier*/
cursor: pointer;
}
ul#nav li ul li.normal {
margin: 0 0 0 0em;
padding: .2em 0em .2em 0em;
margin: .3em 0em 0em 0em;
width: 147px;
height: 2em;
text-decoration: none;
cursor: pointer;
}
ul#nav li ul li.highlight {
font-weight: bold;
margin: .5em 0 0 0em;
padding: .2em 0em .2em 0;
width: 147px;
height: 2em;
text-decoration: none;
background-color: #FFFFFF;
cursor: pointer;
}
</style>
</head>
<body onload="hideNavigation()">
<ul id="nav">
<li class="ul00li00"><a href="#" onclick="showNavigation(this.parentNode);"> Praesent sem leo</a>
<ul>
<li id="li_01_01" onclick="location.href='#',activeLink('li_01_01')"> <img src="../images/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Subpunkt 1.1</li>
<li id="li_01_02" onclick="location.href='#',activeLink('li_01_02')"> <img src="../images/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Subpunkt 1.2</li>
<li id="li_01_03" onclick="location.href='#',activeLink('li_01_03')"> <img src="../images/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Subpunkt 1.3</li>
</ul>
</li>
<li><a href="#" onclick="showNavigation(this.parentNode);"> Quisque eu tellus</a>
<ul>
<li id="li_01_04" onclick="location.href='#',activeLink('li_01_04')"> <img src="../images/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Subpunkt 1.1</li>
<li id="li_01_05" onclick="location.href='#',activeLink('li_01_05')"> <img src="../images/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Subpunkt 1.2</li>
<li id="li_01_06" onclick="location.href='#',activeLink('li_01_06')"> <img src="../images/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Subpunkt 1.3</li>
</ul>
</li>
<li><a href="#" onclick="showNavigation(this.parentNode);"> Etiam fermentum leo</a>
<ul>
<li id="li_01_07" onclick="location.href='#',activeLink('li_01_07')"> <img src="../images/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Subpunkt 1.1</li>
<li id="li_01_08" onclick="location.href='#',activeLink('li_01_08')"> <img src="../images/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Subpunkt 1.2</li>
<li id="li_01_09" onclick="location.href='#',activeLink('li_01_09')"> <img src="../images/icon_teaser_right.gif" width="10" height="6" alt="arraw" />Subpunkt 1.3</li>
</ul>
</li>
</ul>
</body>
</html>
Zuletzt bearbeitet:
