14 Replies Latest reply on Oct 26, 2010 8:37 AM by MurraySummers

    Horizontal Drop Down Menu

    sellador315 Level 1

      Hi all,

       

      I've a drop down menu that my client would like to be done differently.

       

      This is the exisitng one I am using http://thesketchcollective.co.uk/horizmenu/pro_dropline_1.html

       

      Porblem is they want to be able to click on on of the parent items and to have the drop down menu stay in place even if you accidently roll over over parent items. So for instance you click on Joseph turner and that sub menu pops up and stays there until you click on John Constanble (for example) and then that menu pops up.

       

      Any one know if I can change my existing menu to be able to do this or if there is a menu out there capable of doing this.

       

      Many thanks

      Tom

        • 1. Re: Horizontal Drop Down Menu
          BenPleysier Adobe Community Professional & MVP

          You can modify/add to your existing pro_dropline_1/stuHover.js to cater for an onclick event; the hover event is already there.

          1 person found this helpful
          • 2. Re: Horizontal Drop Down Menu
            sellador315 Level 1

            Sorry, being a bit of a newbie at JS, what exactly would you change?

             

            Thanks for your help.

             

             

            stuHover = function() {

            var cssRule;

            var newSelector;

            for (var i=0; i< document.styleSheets.length; i++)

            for (var x=0; x< document.styleSheets[i].rules.length; x++)

            {

            cssRule = document.styleSheets[i].rules[x];

            if (cssRule.selectorText.indexOf("LI:hover") >= 0)

            {

            newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");

            document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);

            }

            }

            var getElm = document.getElementById("nav").getElementsByTagName("LI");

            for (var i=0; i<getElm.length; i++) {

            getElm[i].onmouseover=function() {

            this.className+=" iehover";

            }

            getElm[i].onmouseout=function() {

            this.className=this.className.replace(new RegExp(" iehover\\b"), "");

            }

            }

            }

            if (window.attachEvent) window.attachEvent("onload", stuHover);

            • 3. Re: Horizontal Drop Down Menu
              Nancy OShea Adobe Community Professional & MVP

              Get a better menu. Tab Bar Magic will do what you want (commercial DW extension).

               

              Features

              http://www.projectseven.com/products/menusystems/tbm/index.htm

               

              Demos

              http://www.projectseven.com/viewer/index.asp?demo=tbm

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb

              • 4. Re: Horizontal Drop Down Menu
                sellador315 Level 1

                Unfortunately I am not looking to pay for something when I've already got a decent drop down, just looking modify the existing one.

                 

                Any help on how to change the coding above would much appreciated.

                 

                Cheers

                Tom

                • 5. Re: Horizontal Drop Down Menu
                  BenPleysier Adobe Community Professional & MVP

                  The easiest way to do what you want is to have a tabbed panel for the main menu items and a horizontal menu bar for the submenu items.

                   

                  See the following rough and quick demo

                  Capture.JPG

                  As said, I did this very quickly without styling.

                   

                  I used SpryTabbedPanels and SpryMenuBar. The following is the markup

                  <!DOCTYPE HTML>
                  <html>
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                  <title>Untitled Document</title>
                  <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
                  <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
                  <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
                  <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
                  <style>
                  ul.MenuBarHorizontal li {
                      width: auto;
                  }
                  </style>
                  </head>
                  <body>
                  <div id="TabbedPanels1" class="TabbedPanels">
                    <ul class="TabbedPanelsTabGroup">
                      <li class="TabbedPanelsTab" tabindex="0">Home</li>
                      <li class="TabbedPanelsTab" tabindex="0">Joseph Turner</li>
                      <li class="TabbedPanelsTab" tabindex="0">John Constable</li>
                      <li class="TabbedPanelsTab" tabindex="0">Henri Matisse</li>
                      <li class="TabbedPanelsTab" tabindex="0">Paul Cezanne</li>

                    </ul>
                    <div class="TabbedPanelsContentGroup">
                      <div class="TabbedPanelsContent"></div>
                      <div class="TabbedPanelsContent">
                          <ul id="MenuBar1" class="MenuBarHorizontal">
                            <li><a href="#nogo">Fishermen at Sea</a></li>
                            <li><a href="#nogo">The Shipwreck</a></li>
                            <li><a href="#nogo">The Vale of Ashburnham</a></li>
                            <li><a href="#nogo">Crossing the Brook</a></li>
                          </ul>
                     
                  </div>
                      <div class="TabbedPanelsContent">Menu for JC</div>
                      <div class="TabbedPanelsContent">Menu for HM</div>
                      <div class="TabbedPanelsContent">Menu for PC</div>
                    </div>
                  </div>
                  <script type="text/javascript">
                  var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
                  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
                  </script>
                  </body>
                  </html>

                  For more info see here http://www.adobe.com/devnet/dreamweaver/spry.html

                  • 6. Re: Horizontal Drop Down Menu
                    sellador315 Level 1

                    Thank you.

                     

                    It's funny, I've never realised that 'panel' tab was there and I use spry drop down menu a lot so thanks for that!

                     

                    I'll let you know how I get on with it!

                     

                    Cheers

                    Tom

                    • 7. Re: Horizontal Drop Down Menu
                      sellador315 Level 1

                      That's perfect but it's thrown up another problem. The home button has no menu and needs to be it's own stand alone link but for some reason when you click on it doesn't work. The code I'm using is as follows.

                       

                      <div id="TabbedPanels1" class="TabbedPanels">

                        <ul class="TabbedPanelsTabGroup">

                          <li class="TabbedPanelsTab"><a href="../index.html">Home</a></li>

                       

                      I've also tried inclide the whole <li> tag within the link but obviously hasn't worked.

                       

                      I'm assuming it's the javascript used that is causing the problem and the fact it is under that certain div. As I have said before I am a newbie at Javascript and am struggling to find the answer.

                       

                      any ideas?

                       

                      Thanks for all your help so far.

                      • 8. Re: Horizontal Drop Down Menu
                        BenPleysier Adobe Community Professional & MVP

                        <div id="TabbedPanels1" class="TabbedPanels">

                          <ul class="TabbedPanelsTabGroup">

                            <li class="TabbedPanelsTab"><a href="../index.html" onclick="window.location=this.href;">Home</a></li>

                         

                        • 9. Re: Horizontal Drop Down Menu
                          MurraySummers Level 8

                          If the href to ../index.html doesn't work, why would this javascript duplication of it work?  Why wouldn't that link as a root relative link work better?  That's what all of those links should be anyhow, no?

                          • 10. Re: Horizontal Drop Down Menu
                            BenPleysier Adobe Community Professional & MVP

                            Hi Muz,

                             

                            Normally when you click a Spry Tabbed Panels tab it invokes the following

                            Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
                            {
                                this.showPanel(tab);
                                return this.cancelEvent(e);
                            };

                            By placing an onClick event on the link, we are bypassing the above........ I think.

                             

                            Why do you ask these horrible questions, forcing me to pretend that I know what I am talking about.

                             

                            All good!

                             

                            Ben

                            • 11. Re: Horizontal Drop Down Menu
                              MurraySummers Level 8

                              Why do you ask these horrible questions, forcing me to pretend that I know what I am talking about.

                               

                              I asked a question?

                               

                              Curiosity, I suppose....

                              • 12. Re: Horizontal Drop Down Menu
                                sellador315 Level 1

                                vw2ureg - You're a legend.

                                 

                                That has sorted that very nicely!

                                 

                                Just out of curiosity is the onClick event you've included JS coding? If so, how come you can include it with a HTML tag without stating it's script?

                                • 13. Re: Horizontal Drop Down Menu
                                  BenPleysier Adobe Community Professional & MVP

                                  I believe that putting javascript: inline has been depreciated by W3C.

                                  • 14. Re: Horizontal Drop Down Menu
                                    MurraySummers Level 8

                                    When you use a javascript event (onload, onfocus, onmousewhatever, etc.) on a tag, you don't need to state that it's javascript.