4 Replies Latest reply on Apr 21, 2010 6:05 AM by srmsrm

    Spry Menus Not Disappearing When Clicked On

    srmsrm Level 1

      I'm using DW CS3. I created a vertical SpryMenuBar. When I click on the submenu, the item appears, however, then menu doesn't disappear until I move the mouse off the menu. How do I get the menu to disappear once I click on an item?

       

      Thank you.

       

      Shawn

        • 1. Re: Spry Menus Not Disappearing When Clicked On
          Zabeth69 Level 5

          Can you provide us a link to your page, so we can check out your code, please?

           

          Beth

          • 2. Re: Spry Menus Not Disappearing When Clicked On
            srmsrm Level 1

            Beth:

             

            Thanks. Unfortunately I cannot as it is an in-house development platform. I have copied the code below (not sure if I got all that might be needed). One thing I did forget to mention is that I am using frames. I have the target as being "Player" which is the frame I'm playing a video in. I'm using the menus to select videos to play.  I also included the widget script located at the bottom of the page.

             

            Is there maybe a better way to do what I'm doing other than using the Spry menus. I like using the tool.

             


            <ul id="MenuBar1" class="MenuBarVertical">
                          <li><a class="MenuBarItemSubmenu" href="#">Importing / Adding Data</a>
                              <ul>
                                <li><a href="copy_from_other_tracker_files/copy_from_other_tracker_files_flash_introduction.htm" target="Player">Manual Entry</a></li>
                                <li><a href="importing_phaworks_recommendations/importing_phaworks_recommendations_flash_introdu ction.htm" target="Player">Importing PHAWorks Recommendations</a></li>
                                <li><a href="importing_csv_txt_files/importing_csv_txt_files_flash_introduction.htm" target="Player">Importing From CSV / TXT Files</a></li>
                                <li><a href="copy_from_other_tracker_files/copy_from_other_tracker_files_flash_introduction.htm" target="Player">Copying From Other Tracker Files</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 type="text/javascript">
            <!--
            var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
            //-->
            </script>

            • 3. Re: Spry Menus Not Disappearing When Clicked On
              Zabeth69 Level 5

              I haven't used frames for about 10 years, as the newer structuring technology (divs) is so much more accessible and better all-round. If you are using them of necessity (keeping up with a legacy in-house system, etc.), then you will of course continue to need to use them.

               

              Thanks for copying the code. It appears to be the right-out-of-the-box widget code, however, and won't help me to understand how your entire page is structured. If you can paste in the code for the entire page, that will help.

               

              If you have changed anything in the Spry menubar CSS, I'll need to see that, too, and perhaps your stylesheet, if possible.

               

              Sorry for all the paste-in, but if you don't have the site accessible, so be it!

               

              It is very possible that whilst using frames, if your menu is in one frame and it brings up code in one of the other, visible frames, that it does not, indeed, disappear when clicked on. Usually (whilst NOT using frames), one is whisked away to the other page, and the original page closes, thereby "disappearing" the Spry Menus at the same time (out of sight, out of ... mind?).

               

              I will come back later and check to see if you have also come back later!

               

              In the meantime, someone else may jump in, which is (of course!) fine.

               

              Beth

              • 4. Re: Spry Menus Not Disappearing When Clicked On
                srmsrm Level 1

                Beth:

                 

                Thanks.

                 

                I can go to divs but it just means more work. It would be a good reason if frames do not work. Would this issue go away by using divs?

                 

                All code from the page is below

                 

                Also is the CSS and Spry CSS

                 

                Thanks so much for your help.

                 

                Shawn

                 

                =======================================

                 

                ALL CODE ( ITRIED TO REMOVE ALL THE EXTRA STUFF NOT NEEDED)

                 

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                <html>
                <head>
                <META NAME="keywords" CONTENT="keywords">
                <META NAME="description" CONTENT="Description">
                <title>Title</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                <link href="../site.css" rel="stylesheet" type="text/css">

                 

                <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
                <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                 

                <link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
                </head>

                 

                <body>
                <?php include("../_borders/top.php"); ?>

                 

                <table class="Master" align="center">
                  <tr>
                    <td class="Master" bordercolor="#FF0000"><h1>Title<a name="TrackerFlashDemonstrations"></a></h1>
                      <p>Text</p>
                      <table class="FlashTable">
                        <tr>
                          <td height="30" colspan="2" class="FlashHeaderTd">VIDEO Demonstrations</td>
                        </tr>
                        <tr>
                          <td class="FlashListTd">

                 

                            <ul id="MenuBar1" class="MenuBarVertical">
                              <li><a class="MenuBarItemSubmenu" href="#">Importing / Adding Data</a>
                                  <ul>
                                    <li><a href="copy_from_other_tracker_files/copy_from_other_tracker_files_flash_introduction.htm" target="Player">Manual Entry</a></li>
                                    <li><a href="importing_phaworks_recommendations/importing_phaworks_recommendations_flash_introdu ction.htm" target="Player">Importing PHAWorks Recommendations</a></li>
                                    <li><a href="importing_csv_txt_files/importing_csv_txt_files_flash_introduction.htm" target="Player">Importing From CSV / TXT Files</a></li>
                                    <li><a href="copy_from_other_tracker_files/copy_from_other_tracker_files_flash_introduction.htm" target="Player">Copying From Other Tracker Files</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>
                            <p>Tracker
                            Help <img src="../images/open_new_window/open_new_window.gif" width="11" height="11"></p>
                            <p>Tracker
                              Client Help <img src="../images/open_new_window/open_new_window.gif" width="11" height="11"></p>
                            <p>Download <img src="../images/open_new_window/open_new_window.gif" width="11" height="11"></p>
                          </td>
                          <td class="FlashPlayerTd"><iframe src="introduction.htm" name="Player" width="725" height="800" scrolling="auto" frameborder="0" class="FlashPlayerTd"></iframe></td>
                        </tr>
                    </table></td>
                  </tr>
                </table>
                <script type="text/javascript">
                <!--
                var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
                //-->
                </script>
                </body>
                </html>

                 

                 

                 

                =======================================

                 

                CSS

                 

                table.TopIncludePageTable {
                    text-align: left;
                    width: 950px;
                }

                 

                a:hover {
                    color: #ff0000;
                }

                 

                p.BottomIncludePageP {
                    font-size: 7pt;
                }

                 

                table.BottomIncludeLinksTable {
                    font-size: 7pt;
                    text-align: center;
                    color: #000000;
                    width: 950px;
                }

                 

                body {
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 9pt;
                    color: #000000;
                    text-align: left;
                    margin: 0px;
                    background-image:url(images/background/side.jpg);
                }

                 

                li {
                    margin-top: 0pt;
                    margin-right: 0pt;
                    margin-bottom: 1pt;
                    margin-left: 0pt;
                }

                 

                table {
                    width: 100%;
                    font-size: 9pt;
                    text-align: left;
                    background-color: #FFFFFF;
                }

                 

                table.Master {
                    width: 950px;
                    border: thin solid #000000;

                 

                }

                 

                td.Master {
                    padding: 12px;
                    text-align: left;
                }

                 

                th {
                    font-family: Arial, Helvetica, sans-serif;
                    text-align: left;
                }

                 

                td {
                    font-family: Arial, Helvetica, sans-serif;

                 

                }

                 

                h1 {
                    font-size: 14pt;
                    text-align: left;
                    color: #000080;
                    background-color: #FFFFFF;
                }

                 

                h2 {
                    font-size: 10pt;
                    color: #FF0000;
                    text-align: left;
                    background-color: #FFFFFF;
                }

                 

                h3 {
                    font-size: 9pt;
                    color: #000000;
                    text-align: left;
                    background-color: #FFFFFF;
                }

                 

                p.RedirectText {
                    text-align: center;
                }

                 

                /* Text for the introduction of the flash videos and text for the pictures displayed first for each individual demonstration */
                body.FlashIntroductionBody {
                    background-color: #E8E8E8;
                    background-image: none;
                    border: thin solid #000000;
                    padding: 12px;
                }

                 

                /* Main table containing all the flash stuff */
                table.FlashTable {
                    border: thin solid #000000;
                    width: 100%;
                }

                 

                /* Used when the video is playing */
                body.FlashPlayerBody {
                    background-color: #E8E8E8;
                    background-image: none;
                }

                 

                /* Used when the video is playing */
                table.FlashPlayerTable {
                    border: thin solid #000000;
                    background-color: #E8E8E8;
                    background-image: none;
                }

                 

                /* Frame around the Flash player */
                td.FlashPlayerTd {
                    vertical-align: top;
                    background-color: #E8E8E8;
                    border: thin solid #000000;
                }

                 

                /* Heading of the introduction text the flash videos */
                h2.FlashOpeningH2 {
                    background-color: #E8E8E8;
                }

                 

                /* Heading of the introduction text the flash videos */
                h3.FlashOpeningH3 {
                    background-color: #E8E8E8;
                }

                 

                /*Title on Flash Demonstrations – Tracker Video Demonstrations*/
                td.FlashHeaderTd {
                    font-size: 10pt;
                    font-weight: bold;
                    text-transform: uppercase;
                    text-align: center;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    border: 1px solid #FF0000;
                    background-color: #FFFFFF;
                    padding-right: 5px;
                }

                 

                /* Frame around Listing of Items on the left hand side */
                td.FlashListTd {
                    padding-right: 5px;
                    vertical-align: top;
                    border: thin solid #000000;
                }

                 

                /* Headers for the Links in the list */
                p.FlashLinksHeadersP {
                    font-size: 8pt;
                    font-weight: bold;
                    padding-left: 10px;
                }

                 

                /* Sub headers for the Links in the list */

                 

                p.FlashLinksSubHeadersP {
                    font-size: 8pt;
                    padding-left: 20px;
                    padding-right: 20px;
                }

                 

                /* Remove underline */

                 

                .linksFlash {
                    text-decoration: none;
                }

                 

                /* Text under picture (describing picture) in flash videos */
                span.FlashImageText {
                    font-size: 8pt;
                }

                 

                p.SupportQuestionsP {
                    font-style: oblique;
                    font-weight: bold;
                }

                 

                 

                 

                =======================================

                 

                SPRY CSS

                 

                @charset "UTF-8";

                 

                /* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */

                 

                /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

                 

                /*******************************************************************************

                 

                LAYOUT INFORMATION: describes box model, positioning, z-order

                 

                *******************************************************************************/

                 

                /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
                ul.MenuBarVertical
                {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                    font-size: 8pt;
                    cursor: default;
                    width: 100%;
                }
                /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
                ul.MenuBarActive
                {
                    z-index: 1000;
                }
                /* Menu item containers, position children relative to this container and are same fixed width as parent */
                ul.MenuBarVertical li
                {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                    font-size: 100%;
                    position: relative;
                    text-align: left;
                    cursor: pointer;
                    width: 100%;
                }
                /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
                ul.MenuBarVertical ul
                {
                    margin: -5% 0 0 95%;
                    padding: 0;
                    list-style-type: none;
                    font-size: 100%;
                    position: absolute;
                    z-index: 1020;
                    cursor: default;
                    width: 100%;
                    left: -1000em;
                    top: 0px;
                }
                /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
                ul.MenuBarVertical ul.MenuBarSubmenuVisible
                {
                    left: 0;
                }
                /* Menu item containers are same fixed width as parent */
                ul.MenuBarVertical ul li
                {

                 


                }

                 

                /*******************************************************************************

                 

                DESIGN INFORMATION: describes color scheme, borders, fonts

                 

                *******************************************************************************/

                 

                /* Outermost menu container has borders on all sides */
                ul.MenuBarVertical
                {
                    border: 1px solid #CCC;
                }
                /* Submenu containers have borders on all sides */
                ul.MenuBarVertical ul
                {
                    border: 1px solid #CCC;
                    width: 100%;
                }
                /* Menu items are a light gray block with padding and no text decoration */
                ul.MenuBarVertical a
                {
                    display: block;
                    cursor: pointer;
                    padding: 0.5em 0.75em;
                    color: #333;
                    text-decoration: none;
                    background-color: #FFFFFF;
                }
                /* Menu items that have mouse over or focus have a blue background and white text */
                ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
                {
                    background-color: #33C;
                    color: #FFF;
                }
                /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
                ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
                {
                    background-color: #33C;
                    color: #FFF;
                }

                 

                /*******************************************************************************

                 

                SUBMENU INDICATION: styles if there is a submenu under a given menu item

                 

                *******************************************************************************/

                 

                /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
                ul.MenuBarVertical a.MenuBarItemSubmenu
                {
                    background-image: url(SpryMenuBarRight.gif);
                    background-repeat: no-repeat;
                    background-position: 95% 50%;
                }

                 

                /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
                ul.MenuBarVertical a.MenuBarItemSubmenuHover
                {
                    background-image: url(SpryMenuBarRightHover.gif);
                    background-repeat: no-repeat;
                    background-position: 95% 50%;
                }

                 

                /*******************************************************************************

                 

                BROWSER HACKS: the hacks below should not be changed unless you are an expert

                 

                *******************************************************************************/

                 

                /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
                ul.MenuBarVertical iframe
                {
                    position: absolute;
                    z-index: 1010;
                }
                /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
                @media screen, projection
                {
                    ul.MenuBarVertical li.MenuBarItemIE
                    {
                        display: inline;
                        f\loat: left;
                        background: #FFF;
                    }
                }

                 

                 

                 

                =======================================