Need help modifing existing dropdown menu

HTML & CSS
1

Hi, I need help with one thing with the following drop down menu.

I want that when you have clicked the link (A:active), I want the menu to display which link that is active by giving it the " background: url(…/images/button4.gif) no-repeat" .

Here’s the whole dropdown menu, without the feature to mark which link that is active.

.bg{
    background: url(../images/button4.gif);
}
.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 {
    color: #000;
    background: url(../images/button4.gif) no-repeat;
}
.menu li a.top_link:hover span {
    background: url(../images/button4.gif) no-repeat right top;
}
.menu li a.top_link:hover span.down {
    background: url(../images/button4a.gif) no-repeat right top;
}

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

.menu table {
    border-collapse: collapse;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.menu a.top_link:hover {
    visibility: visible;
}
.menu li:hover {
    position: relative;
    z-index: 200;
}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :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;
}
.menu :hover ul.sub li {
    display: block;
    height: 20px;
    position: relative;
    float: left;
    width: 250px;
}

.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.fly {
    background: #fff url(../images/arrow.gif) 80px 7px no-repeat;
}
.menu :hover ul.sub li a:hover {
    background: #999999;
    color: #fff;
}
.menu :hover ul.sub li a.fly:hover {
    background: #999999 url(../images/arrow_over.gif) 80px 7px no-repeat;
    color: #fff;
}
.menu :hover ul li:hover > a.fly {
    background: #999999 url(../images/arrow_over.gif) 80px 7px no-repeat;
    color: #fff;
} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul {
    left: 90px;
    top: -4px;
    background: #fff;
    padding: 3px 0;
    border: 1px solid #999999;
    white-space: nowrap;
    width: 93px;
    z-index: 200;
    height: auto;
}
2

How did you write exactly to get it to work, I want the menu link to stay white, untill I click on another menu link, is this possible to achieve?

As aquilax said above the :active state of a link is the moment you press the mouse down. When you release the mouse the :active state is gone. It is not persistent.

If you want a link to stay in its hovered state until you click another link then you will need to dynamically add another class to it and use that class for styling the current menu item as you want.

It seems you have jquery in your page so you should be able to add and remove a class when you click the menu as appropriate.

You could add :focus and the link will stay highlighted in Firefox but will lost if you click anywhere else on the page and is not really a solution.


ul.menu a:active,ul.menu a:focus {
    color: #fff;
    text-decoration: underline;
}
3

Im sorry, i guess Im just dumb, I don’t get your sollutions to work.

I have deleted some stuff that aren’t used in the css file, so now I have this

.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;
}

The following didn’t work,

.menu li:active > a.top_link span {
    color:green;
}

and this didn’t work either after removing the 2 rows that you suggested guilherme.

ul.menu a:active { color: #fff; text-decoration: underline; }

How did you write exactly to get it to work, I want the menu link to stay white, untill I click on another menu link, is this possible to achieve?

Sorry again, guess Im doing something wrong here.

4

Threads merged as they relate to the same site and same question.

5

My bet is that you don’t get the :active pseudoclass correctly.

This works just fine:

.menu li:active > a.top_link span {
    background-color:green;
}

The link is “:active” only for the moment you are clicking on it.

6

I looked at your CSS file and there are a lot of rules setting colors for the links. Try to group them a specific place in your document for easier maintenance and trouble-shooting.

You can start by changing

ul.dropdown

rules to

ul.menu

ones (as there is no element with a class of “dropdown” in the html, I at least did not find it).

As there are many rules with link color, conflicts appear. When I disabled these two, the :active rule worked:


.menu li a.top_link:hover { ... } /* removed "color" property */
.menu li:hover > a.top_link { ... } /* removed "color" property */

Doing this the anchor rules that are at the end of the CSS file worked. Hope this helps!

7

Hi I have the following css drop down menu.

.bg{
    background: url(../images/button4.gif);
}
.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 {
    color: #000;
    background: url(../images/button4.gif) no-repeat;
}
.menu li a.top_link:hover span {
    background: url(../images/button4.gif) no-repeat right top;
}
.menu li a.top_link:hover span.down {
    background: url(../images/button4a.gif) no-repeat right top;
}

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

.menu table {
    border-collapse: collapse;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.menu a.top_link:hover {
    visibility: visible;
}
.menu li:hover {
    position: relative;
    z-index: 200;
}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :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;
}
.menu :hover ul.sub li {
    display: block;
    height: 20px;
    position: relative;
    float: left;
    width: 250px;
}

.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.fly {
    background: #fff url(../images/arrow.gif) 80px 7px no-repeat;
}
.menu :hover ul.sub li a:hover {
    background: #999999;
    color: #fff;
}
.menu :hover ul.sub li a.fly:hover {
    background: #999999 url(../images/arrow_over.gif) 80px 7px no-repeat;
    color: #fff;
}
.menu :hover ul li:hover > a.fly {
    background: #999999 url(../images/arrow_over.gif) 80px 7px no-repeat;
    color: #fff;
} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul {
    left: 90px;
    top: -4px;
    background: #fff;
    padding: 3px 0;
    border: 1px solid #999999;
    white-space: nowrap;
    width: 93px;
    z-index: 200;
    height: auto;
}

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; }

The menu can be tested here http://www.tdsoft.se

8

If anyone wonder, you can try the dropdown menu here.

http://www.tdsoft.se

9

That was almost what I was asking for. I want something like the last example below.

If I add this line at the end of the css file it works, the visited links become white, like this

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

But when I try to do this it don’t work, no active links become white, is it because there aren’t any active links or what? :S


ul.menu a:active { color: #000; text-decoration: underline; }

Any one knows why the first works, but not the last??

Thanks :slight_smile:

10

Not quite understanding you. You want a current page highlightor, but…yeah (sorry I’m on oxycodon for pain, everythings a bit of a mess)

You want to style the nav bar…and click the links without changing the nav bar…so you want the nav bar to …heck. Check out this link. See if it can help
http://www.visibilityinherit.com/code/current-page.php

No SSI needed.

11

Don’t wan’t to style an active link all the time, only want to style the nav bar, then you should be able to click other links without changing the navbar.

Problem is also that im running the website on an internal network server where ssl aren’t desired. Only css and java script and ssi’s.

So any other way to solve this problem?

Thanks :slight_smile:

12

if you want to style an active link the best way to do it is to add a class selector dinamic form server sidelanguage, and in your css code just apply the style.

13

It was only in explorer that it looked messed up, but now i fixed it using id’s instead of classes.
Thanks Paul O’B for getting me in the right direction, it helped alot, and thanks to all other’s as well for the help :slight_smile:

14

It seems to be working now so I guessed you have fixed it.

15

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.

16

Great idea Paul O’B. One more quastion thogh,

<ul class="menu" id="menuTop">
	<li class="top"><a href="javascript:handleLinkNavigation('menuTop','overview');" class="top_link_unSelected" id="overview"><span>Overview</span></a></li>

If I send the id of a object, say that i send away the id=“overview”. Can I then change the class top_link_unSelected with the only information?

I have many classes with the name top_link_unSelected, so I just want to change the class top_link_unSelected to top_link_selected where the id is overview.

Can this be done? :slight_smile: