PDA

View Full Version : Active CSS on Apple menu



gusto
12-19-2008, 08:05 PM
All hail the mighty coders and I mean that with all do respect you guys that help us out here are great and I am really glad your here.

Ok problem

I am using the Applemenu for Dynamic Forums on
http://www.goforgusto.com/_clients/eztia/

all is working great except that I want the button to stay highlighted when they are on that section. Example
http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/beech-finish/
the button beech finish should stay in the hover state.

here is my css

}
.submenu1style a:link {
width:auto;
overflow:hidden;
display: block;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
color: #000000;
text-align: left;
vertical-align: middle;
padding-top: 7px;
padding-right: 15px;
padding-bottom: 7px;
padding-left: 15px;
background-color: transparent;
background-image: url(../../../images/Bar1B.jpg);
background-repeat: repeat-x;
background-position: left bottom;

}
.submenu1style a:visited {
width:auto;
overflow:hidden;
display: block;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
color: #000000;
text-align: left;
vertical-align: middle;
padding-top: 7px;
padding-right: 15px;
padding-bottom: 7px;
padding-left: 15px;
background-color: transparent;
background-image: url(../../../images/Bar1B.jpg);
background-repeat: repeat-x;
background-position: left bottom;

}

.submenu1style a:hover {
width:auto;
overflow:hidden;
display: block;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
color: #000000;
text-align: left;
vertical-align: middle;
padding-top: 7px;
padding-right: 15px;
padding-bottom: 7px;
padding-left: 15px;
background-color: transparent;
background-image: url(../../../images/Bar1R.jpg);
background-repeat: repeat-x;
background-position: left bottom;
}

.submenu1style a:active {
width:auto;
overflow:hidden;
display: block;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
color: #000000;
text-align: left;
vertical-align: middle;
padding-top: 7px;
padding-right: 15px;
padding-bottom: 7px;
padding-left: 15px;
background-color: transparent;
background-image: url(../../../images/Bar1R.jpg);
background-repeat: repeat-x;
background-position: left bottom;
}

The HTML is a bit harder to show as its in an include


<div class="submenu submenu1style"> <a href="http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/beech-finish/" >Beech Finish</a> <a href="http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/natural-oak/">Natural Oak Finish </a> <a href="http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/natural-white/">Natural White Finish</a> <a href="http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/white-lacqured/">White Lacqured Finish </a> <a href="http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/Cherry-finish/">Cherry, Walnut Finish </a> <a href="http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/espresso-cap-finish/">Espresso, Cappuccino Finish </a> <a href="http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/steel-inc-finish/">Steel Incorporated Finish </a> <a href="http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/bar-sets/">Bar Sets </a> <a href="http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/mix-chairs/">Mix Chairs /Bar Stools </a> <a href="http://www.goforgusto.com/_clients/eztia/catalogue/dining-sets/summary.php">Section Summary</a></div>

is the "active" feature just not valid in this case because I need one for each section?

Thanks in advance for your brilliance :) And Merry Christmas everybody :D


SUBNOTE:

Ok just in case anybody reads this wanting the same answer it is not really possible as the "active" is more on the lines of a mousedown not the way it sounds the active link. The only way to answer my above question is to go to the individual page and change it on the page. Problem with that for me is that I have made the Navbar a include so that when the 700 pages are in place if I need to change the menu I do not need to change all 700 pages. So I will just have to change my design a bit and put it someplace else.

ddadmin
12-20-2008, 09:49 PM
If you mean have the menu item corresponding to the current page be selected, this really is an issue on its own. Typically you would use server side coding (assuming your pages are dynamically generated) to detect the current page, and insert a CSS class (ie: "selected") in the appropriate position within the menu. There isn't a reliable way to do the match up using JavaScript, if that's what you're asking.