15 Replies Latest reply on Mar 7, 2015 12:09 PM by Nancy OShea

    Spry Menu Bars, Templates and Current Page Indicators

    Fergus1223

      Hello,

       

      If you have a spry menu bar in your design, then create a template, how do you then go about making the menu bar have a current page indicator on each page created from the template?

       

      Thanks,

       

      Ferg.

        • 1. Re: Spry Menu Bars, Templates and Current Page Indicators
          Zabeth69 Level 5

          In a word, with IDs and your Spry menubar stylesheet.

          1. Add a page-specific ID to each page you want highlighted. It can be on a body tag or on a container tag that holds the menubar.
            If the tag in question is locked in the template, give the tag an editable attribute: Modify > Templates > Make attribute editable...
            Example: #aboutuspage or #productspage
          2. Then, add an item-specific ID (coordinate with the page IDs, to make it easy to remember) to each menu item you want highlighted.
            Example: li#aboutus or li#products
          3. Next, in the SpryMenuBar CSS, add style selectors to the highlighting rule, or make a new rule.If you want the highlight to match the hover state, choose that one.
            Example: #aboutuspage li#aboutus a, #productspage li#products a {background-color: yellow;}

           

          Then, since you control the highlighting from the CSS stylesheet, you can change the actual styling without going into each page. Make sure the stylesheet is linked to the page; don't try to embed the styles on each document, especially if you are using a background-image.

           

          Beth

          1 person found this helpful
          • 2. Re: Spry Menu Bars, Templates and Current Page Indicators
            Fergus1223 Level 1

            Cheers, Beth, thanks very much for the reply.

            Will get on to it!

             

            Mark.

            • 3. Re: Spry Menu Bars, Templates and Current Page Indicators
              Zabeth69 Level 5

              Sure thing. It's a neat trick, and pretty straightforward to do.

               

              Best,

              Beth

              • 4. Re: Spry Menu Bars, Templates and Current Page Indicators
                web bldr

                Beth, I hope you can help me. I cannot get this to work. I have followed your directions. This is the code in my template.dwt page's body tag which I entered exactly as you instructed:  <body id="@@(id)@@">. This is the code in my page made from the template: <body id="index">. I would like the spry navigation link for this page to have a red background. I tried several different ways in the spry CSS file, but I cannot get it to work.  I don't think I understand adding the ID tag to the spry CSS file. Thank you for helping with this.

                • 5. Re: Spry Menu Bars, Templates and Current Page Indicators
                  MurraySummers Level 8

                  Let me send you on a different tack.

                   

                  There is an editable region in the head of the template.  In each child page, embed a small stylesheet in that editable region that just put a rule in that stylesheet that explicitly sets the "current" menu option to the right styles.

                   

                  It's way less fiddly than this template method - and works just as well.  The only trick is that you have to give each top-level menu item a unique ID.  That's the ID you would reference in your selector for the embedded rule.

                  • 6. Re: Spry Menu Bars, Templates and Current Page Indicators
                    Nancy OShea Adobe Community Professional & MVP

                    First read this:

                    http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

                     

                    It's a bit more complicated with DW Templates (which is why I don't use them).  You will need to specify an editable tag attribute on the body. And you'll need to edit this attribute on every Child page connected to your main Template.dwt.

                     

                     

                    Nancy O.

                    Alt-Web Design & Publishing

                    Web | Graphics | Print | Media  Specialists 

                    http://alt-web.com/

                    http://twitter.com/altweb

                    • 7. Re: Spry Menu Bars, Templates and Current Page Indicators
                      Zabeth69 Level 5

                      @ web bldr: You would be better off starting a new thread, including a link to your page online where we can actually see the code you are working with. I believe you need to give us a little more to work with.

                       

                      In the meantime, if you are not yet online, I do recommend that you gain a better understanding of CSS. A good way to learn is with David Powers's book: http://gettingstartedwithcss.com/ Without a firmer understanding of how CSS works, all attempts to end run the complexities will be very frustrating.

                       

                      You may have noticed that we all have slightly different takes on what method to use to get this result. I like to concentrate all the 'decision-making' in the central CSS file. Just as useful is Murray's method of simplifying the CSS file and actually having nuggets of local CSS code in the head of the individual pages. Nancy O. points out the need for an editable tag attribute on the body, which is essentially the method I was outlining.

                       

                      But once you gain a better handle on CSS, you can make your own decision between the different methods of which one to use. A key is that if you don't understand the reason for the specific instructions, you probably are not yet understanding the method being illustrated.

                       

                      Best of luck and learning...

                      • 8. Re: Spry Menu Bars, Templates and Current Page Indicators
                        BenPleysier Adobe Community Professional & MVP

                        Can I send you on a different path? This solution will only be required in a non-editable area of the DWT.

                         

                        First we write a function to initialse the page

                        function InitPage(){

                        Spry.$$('#MenuBar1 li').forEach(function(node){

                            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");

                            }

                        });

                        }

                        The function compares the URL of the page with the link in the menubar and if they are both the same, it will add an 'activeMenuItem, class to the menuitem.

                         

                        Next we nee a trigger to activate the function. This is done with a load listener as per

                        Spry.Utils.addLoadListener(InitPage);

                        Now we need to ensure that our active menuitem looks different, by assigning a couple of style rules as in the following. The !important needs to be there to override the JS.

                        .activeMenuItem a {

                            background:#a59a84 !important;

                            color:#ffffff !important;

                        }

                        And lastly we need to add SpryDOMUtils.js as the JS script that we based our JS scripts on

                        <script src="SpryAssets/SpryDOMUtils.js"></script>

                        The whole thing will look like

                        <!DOCTYPE HTML>

                        <html>

                        <head>

                        <meta charset="utf-8">

                        <title>Untitled Document</title>

                        <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">

                        <style>

                        .activeMenuItem a {

                            background:#a59a84 !important;

                            color:#ffffff !important;

                        }

                        </style>

                        </head>

                         

                        <body>

                        <ul id="MenuBar1" class="MenuBarHorizontal">

                          <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>

                            <ul>

                              <li><a href="#">Item 1.1</a></li>

                              <li><a href="#">Item 1.2</a></li>

                              <li><a href="#">Item 1.3</a></li>

                            </ul>

                          </li>

                          <li><a href="#">Item 2</a></li>

                          <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>

                            <ul>

                              <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>

                                <ul>

                                  <li><a href="#">Item 3.1.1</a></li>

                                  <li><a href="#">Item 3.1.2</a></li>

                                </ul>

                              </li>

                              <li><a href="#">Item 3.2</a></li>

                              <li><a href="#">Item 3.3</a></li>

                            </ul>

                          </li>

                          <li><a href="#">Item 4</a></li>

                        </ul>

                        <script src="SpryAssets/SpryMenuBar.js"></script>

                        <script src="SpryAssets/SpryDOMUtils.js"></script>

                        <script>

                        function InitPage(){

                        Spry.$$('#MenuBar1 li').forEach(function(node){

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

                        var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                        </script>

                        </body>

                        </html>

                        Or see it live here http://shoguncarco.com.au/index.php where the function has been externalised in http://shoguncarco.com.au/js/plugins.js

                         

                        Gramps

                        1 person found this helpful
                        • 9. Re: Spry Menu Bars, Templates and Current Page Indicators
                          daveharr1s0n Level 1

                          Next, in the SpryMenuBar CSS, add style selectors to the highlighting rule, or make a new rule.If you want the highlight to match the hover state, choose that one.

                          Example: #aboutuspage li#aboutus a, #productspage li#products a {background-color: yellow;}

                           

                          Hmm, I thought I tried this today but I will try again. I've added IDs to the body tags on each page and to the list items and put what I thought was correct in the CSS -- but should I be putting this right in the existing Spry-generated section where I've modified the hover state? (If I had access to my laptop I'd include the code. It's gotta be a simple thing, right?). Seems like Spry, for as simple as its supposed to be, makes things so difficult sometimes. I'd like the current page indicator to be the same as hover.

                          • 10. Re: Spry Menu Bars, Templates and Current Page Indicators
                            Nancy OShea Adobe Community Professional & MVP

                            Adobe abandoned Spry 3 years ago b/c it's outdated and doesn't work well in mobile and tablet devices. 

                             

                             

                            Nancy O.

                            • 11. Re: Spry Menu Bars, Templates and Current Page Indicators
                              melissapiccone Adobe Community Professional

                              I agree with Nancy... bad idea to use Spry - no longer supported. I have had people's websites just stop working...

                              • 12. Re: Spry Menu Bars, Templates and Current Page Indicators
                                daveharr1s0n Level 1

                                Thanks, Nancy. I actually thought about that -- you're right, doesn't work so well on my iPad. In fact, I changed the horizontal navigation from Spry to a simple centered navbar at the top of my page. Just now sort of playing around with a vertical navigation idea, and being lazy by using Spry. (Yes, both horizontal and vertical on some pages of this particular project, for design sake.) Anyway, I will definitely get around to getting rid of the Spry. Thanks!

                                • 13. Re: Spry Menu Bars, Templates and Current Page Indicators
                                  daveharr1s0n Level 1

                                  I tried this, Ben. Didn't work. I'll try it again when I get a chance, it might just be me. But I do see the links you have here no longer lead anywhere -- granted this was from three years ago. Does it still work?

                                  • 14. Re: Spry Menu Bars, Templates and Current Page Indicators
                                    daveharr1s0n Level 1

                                    On second thought, Ben, I think I should get rid of Spry (as Nancy and Melissa said). You helped me out recently with a jQuery question. I'll bet you have an answer for this using jQuery without Spry. I'll have to Google that now! I might have to get back to you!

                                    • 15. Re: Spry Menu Bars, Templates and Current Page Indicators
                                      Nancy OShea Adobe Community Professional & MVP

                                      jQuery Superfish

                                      http://users.tpg.com.au/j_birch/plugins/superfish/

                                       

                                      jQuery MeanMenu (responsive on mobile)

                                      http://www.meanthemes.com/plugins/meanmenu/

                                       

                                       

                                      Nancy O.

                                      1 person found this helpful