Advanced Search

Results 1 to 2 of 2

Thread: Active CSS on Apple menu

  1. #1
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Active CSS on Apple menu

    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/e.../beech-finish/
    the button beech finish should stay in the hover state.

    here is my css
    Code:
    }
    .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

    Code:
    <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


    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.
    Last edited by gusto; 12-19-2008 at 11:24 PM. Reason: Resolved

  2. #2
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •