PDA

View Full Version : Need help modifing existing dropdown menu.



aka.snowball
Jul 22nd, 2010, 05:19 PM
Hi I have the following css drop down menu.



.menu{
padding: 0 0 0 32px;
margin: 0;
list-style: none;
height: 40px;
background: #fff url(../images/button1a.gif) repeat-x;
position: relative;
font-family: arial, verdana, sans-serif;
}
.menu li.top {
display: block;
float: left;
position: relative;
}
.menu li a.top_link {
display: block;
float: left;
height: 40px;
line-height: 33px;
color: #bbb;
text-decoration: none;
font-size: 11px;
font-weight: bold;
padding: 0 0 0 12px;
cursor: pointer;
}

.menu li a.top_link span {
float: left;
font-weight: bold;
display: block;
padding: 0 24px 0 12px;
height: 40px;
}
.menu li a.top_link span.down {
float: left;
display: block;
padding: 0 24px 0 12px;
height: 40px;
background: url(../images/down.gif) no-repeat right top;
}

.menu li a.top_link:hover span {
background: url(../images/button4.gif) no-repeat right top;
}


.menu ul, .menu :hover ul ul{
position: absolute;
left: -9999px;
top: -9999px;
width: 0;
height: 0;
margin: 0;
padding: 0;
list-style: none;
}

.menu :hover ul.sub {
left: 2px;
top: 40px;
right: 2px;
background: #ffffff;
padding: 3px 0;
border: 1px solid #999999;
white-space: nowrap;
width: 200px;
height: auto;
}


.sub li a:link {
color: black;
}

.menu :hover ul.sub li a {
font-weight: normal;
display: block;
font-size: 11px;
height: 20px;
width: 192px;
line-height: 20px;
text-indent: 5px;
color: black;
text-decoration: none;
border: 3px solid #fff;
border-width: 0 0 0 3px;
}

.menu :hover ul.sub li a:hover {
background: #999999;
color: #fff;
}

Now to my problem, if I do the following: add this row to the bottom of the css menu it works

fine and all visited links turn white.


/*This work*/
ul.dropdown a:visited { color: #fff; text-decoration: none; }

And what I want to do is to make this work for active links only, so my quastion is why don't

the following work, ie, the active links don't turn white, why, are there no active links?


/*The following don't work*/
ul.menu a:active { color: #fff; text-decoration: underline; }

You can see the menu here www.tdsoft.se (http://www.tdsoft.se)

nikee
Jul 22nd, 2010, 09:07 PM
This might help you:



a {color: #FFFFFF} /* unvisited link */
a:visited {color: #FFFFFF} /* visited link */
a:hover {color: #FFFFFF} /* mouse over link */
a:active {color: #FFFFFF} /* selected link */ (when you're pressing the link)

aka.snowball
Jul 23rd, 2010, 01:06 PM
Solved my problem, but now another accurs, take a look at the http://www.tdsoft.se again.

The top link is now messed up, just because I add another class to it.

When I click on a link I change its classes from

class="top_link top_link_unSelected"

to


class="top_link top_link_selected"


but now the buttons pile above each other. Anyone know the reason?


added this to javascript and works



function handleLinkNavigation(menuId,linkId){
var selectedLink ="top_link" + " " + "top_link_selected";
var unSelectedLink ="top_link" + " " + "top_link_unSelected";
document.getElementById('ts-colhead-name').innerHTML = selectedLink;

menuNavigation(menuId,linkId, unSelectedLink,selectedLink);
}


function menuNavigation(menuId,whereToSearchId, classToFind,classToReplace) {

var allSelectedLinks=document.getElementById(menuId).getElementsByTagName("*");
//Cycle through the tags using a for loop
for (i=0; i<allSelectedLinks.length; i++) {
allSelectedLinks[i].className = classToFind;
}
var currentLink = document.getElementById(whereToSearchId).getElementsByTagName("*");

for (i=0; i<currentLink.length; i++) {
//Pick out the tags with our class name
currentLink[i].className = classToReplace;
}
}



Its just when I change the class from

class="top_link top_link_unSelected"

to


class="top_link top_link_selected" (note that there are 2 classes, the top_link class always occurs in both cases, it is the "top_link_unSelected" and the "top_link_selected" that messes things up.

perhaps I can solve this in another way?

that problem occurs, and has to do with my css, but don't know how do fix it.

nikee
Jul 23rd, 2010, 02:08 PM
I'm not really sure which link you're reffering to. From my side it looks just like before?

And, this is a bit OT, but why are you using javascript to replace "top_link_selected" with another class? You can simulate the selected state by using :active in the css.

aka.snowball
Jul 23rd, 2010, 03:30 PM
actually I can't, have already tried that, but didn't work, thats why, but I think i'll go with the

document.getElementById('h1').style.color='red'

sollution to solve this issue. But I appriciate your answer :)

aka.snowball
Jul 23rd, 2010, 04:01 PM
I just saw that my problem that I was talking about only occured in Explorer. My bad :P