Skip navigation
Edwin J Ward
Currently Being Moderated

Spry Menu Bar 2.0 overrides persistent page indicator text color?

Apr 20, 2012 2:56 PM

Tags: #dreamweaver #css #menu

Hello,

 

I've gotten my menu bar to look exactly as I want with one exception. I would like the text and arrow  during the "you are here" state to echo the hover state and be #ffffff. Following Nancy O's excellent and easy tutorial - http://alt-web.com/Articles/Persistent-Page-Indicator.shtml - I got  the button color gradient as I want it but not the text and arrow. The menu bar's CSS seems to be overriding my color callout, and adding the arrow as a background image in the CSS below jacks up the layout when viewed in Firefox. Could someone please guide me in the right direction as far as adding another rule to accomplish my goal of white arrow and text?

 

Here's a link to a single page so you can see the menu in action:

 

http://www.mentalwarddesign.net/Andrea/Fragrances/spiceherb.html

 

And here's the CSS based on Nancy O's tutorial:

 

body.home a.home, body.fragrances a.fragrances, body.oils a.oils, body.leather a.leather, body.deodorants a.deodorants, body.technical a.technical, body.shipping a.shipping {

    color: #8aaad9;

    background: #f38ab3; /* Old browsers */

    background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

}

 

If anyone is interested in using gradients, here's a link to the code generator I used:

 

http://www.colorzilla.com/gradient-editor/

 

Thanks in Advance for your help,

 

Ed

 
Replies
  • Currently Being Moderated
    Apr 20, 2012 4:01 PM   in reply to Edwin J Ward

    For persistent highlighting, you'll need to be more specific with your CSS selector names.  See changes in green.

     

    body.home #MenuBar a.home,

    body.fragrances #MenuBar a.fragrances,

    body.oils #MenuBar a.oils,

    body.leather #MenuBar a.leather,

    body.deodorants #MenuBar a.deodorants,

    body.technical #MenuBar a.technical,

    body.shipping #MenuBar a.shipping {

        background-image:url("images/ArrowMenuRightHov.gif");

         background-position:right center;

         background-repeat:no-repeat;

         color: #FFFFFF;

        background: #f38ab3; /* Old browsers */

        background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

        background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

        background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

        background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

    }

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 6:43 PM   in reply to Edwin J Ward

    With respect to Nancy's solution, which is a very robust solution if it weren't for the quirkiness of SpryMenuBar v2.0, please have a look at the following which  is based on detecting the page's URL and comparing this with the link to the menu item.

     

    First add the following to the bottom of you document; you could put into an external JS files and link it to the document.

    <script>

    function InitPage(){

    Spry.$$('#MenuBar li').forEach(function(node){ /*for FF Chrome etc*/

        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]

        if(a.href == window.location){

            Spry.Utils.addClassName(node,"activeMenuItem");

        }

    });

    Spry.$$('#MenuBar div.MenuItemContainer').forEach(function(node){ /*for IE */

        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]

        if(a.href == window.location){

            Spry.Utils.addClassName(node,"activeMenuItem");

        }

    });

    }

    Spry.Utils.addLoadListener(InitPage);

    </script>

    Then add a bit of CSS, probably at the bottom of the style rules created by the widget and placed into your document. This can also be linked to an external CSS file.

    <style>

    #MenuBar .activeMenuItem .MenuItem {

        color: #8aaad9;

        background: #f38ab3; /* Old browsers */

        background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

        background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

        background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

        background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

    }

    #MenuBar .activeMenuItem .MenuItem .MenuItemLabel {

        color: #8aaad9;

        background: #f38ab3; /* Old browsers */

        background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

        background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

        background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

        background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

    }

    </style>

     

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2012 5:17 PM   in reply to Edwin J Ward

    Ed,

    Unfortunately, I don't have time to sift through all your layers of code.

     

    HINT:  For testing purposes, create a plain vanilla page with just one menu and omit other extraneous code / scripts / styles.  Keep it as simple as possible.   

    When you get the menu working, then add other luscious ingredients one-at-a-time.  Preview in browsers often to test.

     

    In time, you'll find the right recipe for what you're trying to achieve.  But it takes systematic trial & error.

     

     

    Good luck,

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2012 6:55 PM   in reply to Edwin J Ward

    Have a look here http://pleysier.com.au/edwin/index.html and choose each menu item. Although I did not change the content of each page, I did change the menu to suit each URL.

     

    Right click in the browser and choose View Source or similar to see what I have done. Also not that I added a closong list tag to ensure that the menu would work.

     

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points