Lost Spry Menu editability

Please help - I'm using Dreamweaver CS3. A few weeks ago I
built a website and had successfully created drop down menus using
the Horizontal Spry Menu Bar. I have come back to it today and have
somehow lost the ability to edit the drop down menu. I can no
longer see the "blue tab" for the Spry Menu which opens the
Property Inspector widget.
When I preview the site - everything works fine, but I need
to make some edits to the dropdowns - Please help.
Thanks!

Thanks for replying - I tried what you suggested but still
not able to open the Spry menu widget. Have I lost the link to my
Spry assets? I do see my SpryMenuBarHorizontal.css in the Spry
Assets folder - but don't see it in my CSS Styles properties
I can do what I need to do by hand coding, but need to hand
this off to the client who will need to use the widget to make
future edits to the dropdown menus (ie. add to, delete, change
links, etc.)

Similar Messages

Lost Spry Menu Widget Code

Please help -
I have somehow lost the code that allows me to use the SPry
menu widget to edit my horizontal spry menu. The drop down menu I
created for my site template using the Spry menu bar works fine and
my page looks great when I preview. But now widget no longer
exists. I still have all my original spry assets and CSS. It looks
like I may have to recreate the page and drop downs all over again
- -is there a way to "reimport" the spry assets and css to save
time in recreating my page? Any idea why my widget code got
deleted?

You could change this part of the css file for the menu in
your spry assets folder.
SpryMenuBarVertical.css
Try changing the 95% to -95%.
/* 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: 8.2em;
left: -1000em;
top: 0;
Also change this for the pointer gif that shows. Its in the
SPryAssets folder also.
Change the 95% to 2% and you can use Photoshop to flip the
image to point to the right, or left direction.
/* 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%;
}

Lost Spry Menu Styling?

I was just finishing up tweaking my web site when I lost the
styling on my Horizontal Spry Menu, now it looks like a basic
library item with no styling and I have no idea how to recover the
styling? I've tried attaching css sheets but I don't know, nothing
works. I even tried setting up a new spry menu but it has no
styling either, just the basic flow text.
I'm really stuck and can't believe this has happened after
all this work, can somebody please help me?
Thank you for your time and help.
Peter

Tim, Thanks for the speedy reply.
The site hasn't been published yet. I've pasted the code if
that will work;
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="index-2.html"
class="MenuBarItemSubmenu">Home</a> </div>
</li>
<li><a href="Gallery-2.html"
class="MenuBarItemSubmenu">Photo Gallery</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Our
Catalog</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Photo
Plaques</a>
<ul>
<li><a
href="OurPhotoPlaqueCatalogPage-2.html#Custom5X7PhotoPlaque">5X7
Photo Plaques</a></li>
<li><a
href="OurPhotoPlaqueCatalogPage-2.html#Custom6X8PhotoPlaque">6X8
Photo Plaques</a></li>
<li><a
href="OurPhotoPlaqueCatalogPage-2.html#Custom8X10PhotoPlaque">8X10
Photo Plaques</a></li>
<li><a
href="OurPhotoPlaqueCatalogPage-2.html#Custom9X12PhotoPlaque">9X12
_ Photo Plaques</a></li>
<li><a
href="OurPhotoPlaqueCatalogPage-2.html#Custom12X15PhotoPlaque">12X15
Photo Plaque</a></li>
<li><a
href="OurPhotoPlaqueCatalogPage-2.html#Custom24inchPanoramicPhotoPlaque">Panoramic
Photo Plaque</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Custom Plaques</a>
<ul>
<li><a
href="SpecialOccasion-ActivityPlaqueCatalogPage-2.html#SpecialOccasionPlaques">Special
Occasion Plaques</a></li>
<li><a
href="SpecialOccasion-ActivityPlaqueCatalogPage-2.html#SpecialActivityPlaques">Special
Activity Plaques</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Customizable Gift Items</a>
<ul>
<li><a
href="CustomizableGiftsCatalogPage-2.html#RosewoodOvalSinglePenBox">Oval
Rosewood Single Pen Box</a></li>
<li><a
href="CustomizableGiftsCatalogPage-2.html#MapleSinglePenTriangleBox">Maple
Single Pen Triangle Pen Box & Pen
Holder</a></li>
<li><a
href="CustomizableGiftsCatalogPage-2.html#MapleKeepsakeBox">Maple
Keepsake Box</a></li>
<li><a
href="CustomizableGiftsCatalogPage-2.html#ExecutiveCardPlayingSet">Executive
Card Playing Set</a></li>
<li><a
href="CustomizableGiftsCatalogPage-2.html#RosewoodFlaFaceClock">Rosewood
Flat Face Clock</a></li>
<li><a
href="CustomizableGiftsCatalogPage-2.html#Maple4X6PhotoAlbum">Maple
4X6 Photo Album</a></li>
<li><a
href="CustomizableGiftsCatalogPage-2.html#RosewoodDominoSetinStorageBox">Rosewood
Domino Set in Storage Box</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Wood
Ornaments</a>
<ul>
<li><a href="Custom Wood
OrnamentsCatalogPage-2.html#bear">Bears</a></li>
<li><a href="Custom Wood
OrnamentsCatalogPage-2.html#bell">Bell</a></li>
<li><a href="Custom Wood
OrnamentsCatalogPage-2.html#elfinwreath">Elf in
Wreath</a></li>
<li><a href="Custom Wood
OrnamentsCatalogPage-2.html#snowflake">Snowflake</a></li>
<li><a href="Custom Wood
OrnamentsCatalogPage-2.html#stocking">Stocking</a></li>
<li><a href="Custom Wood
OrnamentsCatalogPage-2.html#roundball">Round
Ball</a></li>
<li><a href="Custom Wood
OrnamentsCatalogPage-2.html#snowman">Snowman</a></li>
<li><a href="Custom Wood
OrnamentsCatalogPage-2.html#bulbshaped">Bulb
Shaped</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Custom Cut Glass Ornaments</a>
<ul>
<li><a
href="CustomBevelEdgeGlassOrnamentsCatalogPage-2.html#Arch">Arch</a></li>
<li><a
href="CustomBevelEdgeGlassOrnamentsCatalogPage-2.html#Bell">Bell</a></li>
<li><a
href="CustomBevelEdgeGlassOrnamentsCatalogPage-2.html#Bulb">Bulb</a></li>
<li><a
href="CustomBevelEdgeGlassOrnamentsCatalogPage-2.html#Heart">Heart</a></li>
<li><a
href="CustomBevelEdgeGlassOrnamentsCatalogPage-2.html#Oval">Oval</a></li>
<li><a
href="CustomBevelEdgeGlassOrnamentsCatalogPage-2.html#Round">Round</a></li>
<li><a
href="CustomBevelEdgeGlassOrnamentsCatalogPage-2.html#Tree">Tree</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Custom Glass Jars</a>
<ul>
<li><a
href="CustomGlassJarPage-2.html#Round">Round</a></li>
<li><a
href="CustomGlassJarPage-2.html#Square">Square</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">A
Round TUITs (To-it)</a>
<ul>
<li><a
href="A-Round-TUITCatalogPage-2.html#tuit">1 Sided
TUITs</a></li>
<li><a
href="A-Round-TUITCatalogPage-2.html#customtuit">Custom
TUIT</a></li>
</ul>
</li>
<li><a href="CustomWoodJewelryPage-2.html">Wood
Jewelry</a></li>
</ul>
</li>
<li><a
href="CustomLaserCuttingPage-2.html">Puzzle
Cutting</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Laser
Services</a>
<ul>
<li><a
href="CustomLaserEngravingPage-2.html">Laser Engraving
Services</a></li>
<li><a
href="CustomLaserCuttingPage-2.html">Laser Cutting
Services</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Information</a>
<ul>
<li><a
href="FAQ-Page-2.html">FAQ</a></li>
<li><a href="HowToOrderPage-2.html">How to
Order</a></li>
<li><a href="Images/Site
Photos/OrderForm-2.pdf">Order Form</a></li>
<li><a href="How to ColorFillPage-2.html">How to
Color Fill</a></li>
<li><a href="HowToContactUsPage-2.html">How to
Contact Us</a></li>
<li><a href="StoreHoursPage-2.html">Store
Hours</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">About
Our Company</a>
<ul>
<li><a href="AboutTouchOfWood-Page2.html">About
Touch of Wood?</a></li>
<li><a href="AboutOurWebSitePage-2.html">About
Our Web Site</a></li>
</ul>
</li>
</ul>

Spry menu editing in template

I am a newbie to DW CS3 and have been searching for an answer
in the forum to why I cannot select and edit my Spry navigation
menu now that it resides in the template file. When I go to edit
the template and click on where the Spry bar is, all I get is the
first menu item outlined in blue and no Spry editor in the
Properties menu. What am I missing here?

Thanks for the reply Murray. Being new to the forum, I will
not attempt to attach the file/code for you to see.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />

<title>Research Mannikin</title>

<link href="../twoColLiqLtHdr.css" rel="stylesheet"
type="text/css" />

<script src="../SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>

</head>
<body class="twoColLiqLtHdr">
<div id="container">
<div id="header">
<table width="637" border="0">
<tr>
<td width="283"><img src="../rmlogo.gif" alt="RM
logo" width="283" height="100" /></td>
<td width="344"><h1 align="right"><span
class="style1">1-800-826-0654</span></h1></td>
</tr>
</table>

</div>
<div id="sidebar1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Home</a> </li>
<li><a href="#">Online
Store</a></li>
<li><a class="MenuBarItemSubmenu"
href="#">Specials</a>
<ul>
<li><a href="#">Best Buys</a> </li>
<li><a href="#">Custom
Orders</a></li>
</ul>
</li>
<li><a href="#">Shipping
Information</a></li>
<li><a href="#">Request a
Catalog</a></li>
<li><a href="#" class="MenuBarItemSubmenu">About
Us</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Artists</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Reference</a>
<ul>
<li><a href="#">Information
Sheets</a></li>
<li><a href="#">Paint
Schedules</a></li>
<li><a href="#">Measurement
Charts</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Links</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Contact Us</a>
<ul>
<li><a href="#">Ask the
Expert</a></li>
<li><a href="#">Have mount
photos?</a></li>
<li><a href="#">Contact
Information</a></li>
</ul>
</li>
<li><a href="#">Hunting
Tales</a></li>
</ul>

</div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus,
fermentum id, molestie in, commodo porttitor, felis. Nam blandit
quam ut lacus. Quisque ornare risus quis ligula. Phasellus
tristique purus a augue condimentum adipiscing. Aenean sagittis.
Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,
odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse
potenti. Fusce varius urna id quam. Sed neque mi, varius eget,
tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut
nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi,
eleifend sollicitudin, molestie id, varius et, nibh. Donec nec
libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus,
fermentum id, molestie in, commodo porttitor, felis. Nam blandit
quam ut lacus. Quisque ornare risus quis ligula. Phasellus
tristique purus a augue condimentum adipiscing. Aenean sagittis.
Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,
odio.</p>

</div>
<br class="clearfloat" />
<div id="footer">
<p align="center">All rights reserved. ©2008
Research Mannikins, Inc.</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

I lost the blue tab on my spry menu.

I've saved my document and re-opened it, but still can't get the blue spry menu tab to show. Also can't see my submenus in the browser. It shows in my code. Here is my code.
<table width="878" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td width="878" height="37" align="center" valign="middle" bgcolor="#D1D1D1">
       <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">HOME</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
        <ul>
          <li><a href="#">Become A Member</a></li>
          <li><a href="#">Photo Gallery</a></li>
          <li><a href="#">Contact Us</a></li>
</ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">NEWS</a>
        <ul>
          <li><a href="#">Events</a>          </li>
          <li><a href="#">Job Listings</a></li>
          <li><a href="#">Hot Deals</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">EVENTS</a>
        <ul>
          <li><a href="#">News</a></li>
          <li><a href="#">Chamber Calendar</a></li>
          <li><a href="#">Community Calendar</a></li>
          <li><a href="#">Photo Gallery</a></li>
          <li><a href="#">Hot Deals</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">COMMUNITY</a>
        <ul>
          <li><a href="#">Scott Air Force Base</a></li>
          <li><a href="#">City of O'Fallon</a></li>
          <li><a href="#">O'Fallon Welcome Guide</a></li>
          <li><a href="#">O'Fallon-Shiloh Area Restaurant Guide</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Shiloh</a>
            <ul>
              <li><a href="#">Village of Shiloh</a></li>
              <li><a href="#">Village Services Guide</a></li>
              <li><a href="#">Shiloh Community Calendar</a></li>
            </ul>
          </li>
          <li><a href="#">Events & Reception Planning Guide</a></li>
          <li><a href="#">Relocation Packet Info</a></li>
          <li><a href="#">The Tourism Burea Illinois South</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">CONTACT US</a>
        <ul>
          <li><a href="#">Member Login</a></li>
          <li><a href="#">Member Directory</a></li>
          <li><a href="#">Community Business Info</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">JOIN US</a>
        <ul>
          <li><a href="#">Member Directory</a></li>
          <li><a href="#">Become A Member</a></li>
          <li><a href="#">Member Login</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">COMMITTEES</a>
        <ul>
          <li><a href="#">Board of Directors</a></li>
          <li><a href="#">Ambassadors</a></li>
          <li><a href="#">Star Investors</a></li>
          <li><a href="#">Member Directory</a></li>
        </ul>
      </li>
      <li><a href="#">PHOTO GALLERY</a></li>
</ul></td>
</tr>
</table>
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    list-style-type: none;
    cursor: default;
    width: 878px;
    white-space: nowrap;
    display: inline;
    position: relative;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
/* 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 a fixed width */
ul.MenuBarHorizontal li
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: left;
    cursor: default;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
    font-weight: normal;
    font-style: normal;
    font-size: 87%;
    white-space: nowrap;
    line-height: normal;
    width: auto;
    clear: none;
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: 1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    text-align: left;
    white-space: nowrap;
    display: block;
    float: none;
    font-size: 100%;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
    font-style: normal;
    line-height: normal;
    font-weight: bolder;
    text-transform: none;
    background-color: transparent;
    width: auto;
    position: relative;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    margin-top: -5%;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 95%;
    position: absolute;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border-top-color: #021844;
    border-right-color: #021844;
    border-bottom-color: #021844;
    border-left-color: #021844;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #021844;
    color: #FFF;
    text-decoration: none;
    border: 1px solid #FFF;
    text-align: left;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
    white-space: nowrap;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #036009;
    background-color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
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.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: none;
    background-position: 95% 50%;
    background-color: #021844;
/* 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.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRightHover.gif);
    background-position: 95% 50%;
    background-repeat: no-repeat;
/* 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: none;
    background-position: 95% 50%;
    color: #036009;
    background-color: #FFF;
/* 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.MenuBarHorizontal ul 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.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* 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.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;
// SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
    var b = navigator.appName.toString();
    var up = navigator.platform.toString();
    var ua = navigator.userAgent.toString();
    this.mozilla = this.ie = this.opera = this.safari = false;
    var re_opera = /Opera.([0-9\.]*)/i;
    var re_msie = /MSIE.([0-9\.]*)/i;
    var re_gecko = /gecko/i;
    var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
    var r = false;
    if ( (r = ua.match(re_opera))) {
        this.opera = true;
        this.version = parseFloat(r[1]);
    } else if ( (r = ua.match(re_msie))) {
        this.ie = true;
        this.version = parseFloat(r[1]);
    } else if ( (r = ua.match(re_safari))) {
        this.safari = true;
        this.version = parseFloat(r[2]);
    } else if (ua.match(re_gecko)) {
        var re_gecko_version = /rv:\s*([0-9\.]+)/i;
        r = ua.match(re_gecko_version);
        this.mozilla = true;
        this.version = parseFloat(r[1]);
    this.windows = this.mac = this.linux = false;
    this.Platform = ua.match(/windows/i) ? "windows" :
                    (ua.match(/linux/i) ? "linux" :
                    (ua.match(/mac/i) ? "mac" :
                    ua.match(/unix/i)? "unix" : "unknown"));
    this[this.Platform] = true;
    this.v = this.version;
    if (this.safari && this.mac && this.mozilla) {
        this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
    this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
    this.element = this.getElement(element);
    // represents the current (sub)menu we are operating on
    this.currMenu = null;
    this.showDelay = 250;
    this.hideDelay = 600;
    if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
        // bail on older unsupported browsers
        return;
    // Fix IE6 CSS images flicker
    if (Spry.is.ie && Spry.is.version < 7){
        try {
            document.execCommand("BackgroundImageCache", false, true);
        } catch(err) {}
    this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
    this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
    this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
    this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
    this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
    this.hoverClass = 'MenuBarItemHover';
    this.subHoverClass = 'MenuBarItemSubmenuHover';
    this.subVisibleClass ='MenuBarSubmenuVisible';
    this.hasSubClass = 'MenuBarItemSubmenu';
    this.activeClass = 'MenuBarActive';
    this.isieClass = 'MenuBarItemIE';
    this.verticalClass = 'MenuBarVertical';
    this.horizontalClass = 'MenuBarHorizontal';
    this.enableKeyboardNavigation = true;
    this.hasFocus = false;
    // load hover images now
    if(opts)
        for(var k in opts)
            if (typeof this[k] == 'undefined')
                var rollover = new Image;
                rollover.src = opts[k];
        Spry.Widget.MenuBar.setOptions(this, opts);
    // safari doesn't support tabindex
    if (Spry.is.safari)
        this.enableKeyboardNavigation = false;
    if(this.element)
        this.currMenu = this.element;
        var items = this.element.getElementsByTagName('li');
        for(var i=0; i<items.length; i++)
            if (i > 0 && this.enableKeyboardNavigation)
                items[i].getElementsByTagName('a')[0].tabIndex='-1';
            this.initialize(items[i], element);
            if(Spry.is.ie)
                this.addClassName(items[i], this.isieClass);
                items[i].style.position = "static";
        if (this.enableKeyboardNavigation)
            var self = this;
            this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
        if(Spry.is.ie)
            if(this.hasClassName(this.element, this.verticalClass))
                this.element.style.position = "relative";
            var linkitems = this.element.getElementsByTagName('a');
            for(var i=0; i<linkitems.length; i++)
                linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
        return document.getElementById(ele);
    return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
    if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
        return false;
    return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
    if (!ele || !className || this.hasClassName(ele, className))
        return;
    ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
    if (!ele || !className || !this.hasClassName(ele, className))
        return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
    try
        if (element.addEventListener)
            element.addEventListener(eventType, handler, capture);
        else if (element.attachEvent)
            element.attachEvent('on' + eventType, handler);
    catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
    var layer = document.createElement('iframe');
    layer.tabIndex = '-1';
    layer.src = 'javascript:""';
    layer.frameBorder = '0';
    layer.scrolling = 'no';
    menu.parentNode.appendChild(layer);
    layer.style.left = menu.offsetLeft + 'px';
    layer.style.top = menu.offsetTop + 'px';
    layer.style.width = menu.offsetWidth + 'px';
    layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
    var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
    while(layers.length > 0)
        layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
    var menus = root.getElementsByTagName('ul');
    for(var i=0; i<menus.length; i++)
        this.hideSubmenu(menus[i]);
    this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
    return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
    if(this.currMenu)
        this.clearMenus(this.currMenu);
        this.currMenu = null;
    if(menu)
        this.addClassName(menu, this.subVisibleClass);
        if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
            if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
                menu.style.top = menu.parentNode.offsetTop + 'px';
        if(Spry.is.ie && Spry.is.version < 7)
            this.createIframeLayer(menu);
    this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
    if(menu)
        this.removeClassName(menu, this.subVisibleClass);
        if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
            menu.style.top = '';
            menu.style.left = '';
        if(Spry.is.ie && Spry.is.version < 7)
            this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
    var opentime, closetime;
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    if(menu)
        this.addClassName(link, this.hasSubClass);
    if(!Spry.is.ie)
        // define a simple function that comes standard in IE to determine
        // if a node is within another node
        listitem.contains = function(testNode)
            // this refers to the list item
            if(testNode == null)
                return false;
            if(testNode == this)
                return true;
            else
                return this.contains(testNode.parentNode);
    // need to save this for scope further down
    var self = this;
    this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
    this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
    if (this.enableKeyboardNavigation)
        this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
        this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
    this.lastOpen = listitem.getElementsByTagName('a')[0];
    this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
    this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
    this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
    //search any intersection with the current open element
    if (!this.lastOpen)
        return;
    if (el)
        el = el.getElementsByTagName('a')[0];
        // check children
        var item = this.lastOpen;
        while (item != this.element)
            var tmp = el;
            while (tmp != this.element)
                if (tmp == item)
                    return;
                try{
                    tmp = tmp.parentNode;
                }catch(err){break;}
            item = item.parentNode;
    var item = this.lastOpen;
    while (item != this.element)
        this.hideSubmenu(item.parentNode);
        var link = item.getElementsByTagName('a')[0];
        this.removeClassName(link, this.hoverClass);
        this.removeClassName(link, this.subHoverClass);
        item = item.parentNode;
    this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
    if (!this.hasFocus)
        return;
    if (!this.lastOpen)
        this.hasFocus = false;
        return;
    var e = e|| event;
    var listitem = this.lastOpen.parentNode;
    var link = this.lastOpen;
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    var hasSubMenu = (menu) ? true : false;
    var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
    if (!opts[3])
        opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
    var found = 0;
    switch (e.keyCode){
        case this.upKeyCode:
            found = this.getElementForKey(opts, 'y', 1);
            break;
        case this.downKeyCode:
            found = this.getElementForKey(opts, 'y', -1);
            break;
        case this.leftKeyCode:
            found = this.getElementForKey(opts, 'x', 1);
            break;
        case this.rightKeyCode:
            found = this.getElementForKey(opts, 'x', -1);
            break;
        case this.escKeyCode:
        case 9:
            this.clearSelection();
            this.hasFocus = false;
        default: return;
    switch (found)
        case 0: return;
        case 1:
            //subopts
            this.mouseOver(listitem, e);
            break;
        case 2:
            //parent
            this.mouseOut(opts[2], e);
            break;
        case 3:
        case 4:
            // left - right
            this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
            break;
    var link = opts[found].getElementsByTagName('a')[0];
    if (opts[found].nodeName.toLowerCase() == 'ul')
        opts[found] = opts[found].getElementsByTagName('li')[0];
    this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
    this.lastOpen = link;
    opts[found].getElementsByTagName('a')[0].focus();
        //stop further event handling by the browser
    return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    var hasSubMenu = (menu) ? true : false;
    if (this.enableKeyboardNavigation)
        this.clearSelection(listitem);
    if(this.bubbledTextEvent())
        // ignore bubbled text events
        return;
    if (listitem.closetime)
        clearTimeout(listitem.closetime);
    if(this.currMenu == listitem)
        this.currMenu = null;
    // move the focus too
    if (this.hasFocus)
        link.focus();
    // show menu highlighting
    this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
    this.lastOpen = link;
    if(menu && !this.hasClassName(menu, this.subHoverClass))
        var self = this;
        listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    var hasSubMenu = (menu) ? true : false;
    if(this.bubbledTextEvent())
        // ignore bubbled text events
        return;
    var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
    if(!listitem.contains(related))
        if (listitem.opentime)
            clearTimeout(listitem.opentime);
        this.currMenu = listitem;
        // remove menu highlighting
        this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
        if(menu)
            var self = this;
            listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
        if (this.hasFocus)
            link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
    var child = element[sibling];
    while (child && child.nodeName.toLowerCase() !='li')
        child = child[sibling];
    return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
    var found = 0;
    var rect = Spry.Widget.MenuBar.getPosition;
    var ref = rect(els[found]);
    var hideSubmenu = false;
    //make the subelement visible to compute the position
    if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
        els[1].style.visibility = 'hidden';
        this.showSubmenu(els[1]);
        hideSubmenu = true;
    var isVert = this.hasClassName(this.element, this.verticalClass);
    var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
    for (var i = 1; i < els.length; i++){
        //when navigating on the y axis in vertical menus, ignore children and parents
        if(prop=='y' && isVert && (i==1 || i==2))
            continue;
        //when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
        if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
            continue;
        if (els[i])
            var tmp = rect(els[i]);
            if ( (dir * tmp[prop]) < (dir * ref[prop]))
                ref = tmp;
                found = i;
    // hide back the submenu
    if (els[1] && hideSubmenu){
        this.hideSubmenu(els[1]);
        els[1].style.visibility = '';
    return found;
Spry.Widget.MenuBar.camelize = function(str)
    if (str.indexOf('-') == -1){
        return str;
    var oStringList = str.split('-');
    var isFirstEntry = true;
    var camelizedString = '';
    for(var i=0; i < oStringList.length; i++)
        if(oStringList[i].length>0)
            if(isFirstEntry)
                camelizedString = oStringList[i];
                isFirstEntry = false;
            else
                var s = oStringList[i];
                camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
    return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
    var value;
    try
        if (element.style)
            value = element.style[Spry.Widget.MenuBar.camelize(prop)];
        if (!value)
            if (document.defaultView && document.defaultView.getComputedStyle)
                var css = document.defaultView.getComputedStyle(element, null);
                value = css ? css.getPropertyValue(prop) : null;
            else if (element.currentStyle)
                    value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
    catch (e) {}
    return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
    var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
    if (isNaN(a))
        return 0;
    return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
    doc = doc || document;
    if (typeof(el) == 'string') {
        el = doc.getElementById(el);
    if (!el) {
        return false;
    if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
        //element must be visible to have a box
        return false;
    var ret = {x:0, y:0};
    var parent = null;
    var box;
    if (el.getBoundingClientRect) { // IE
        box = el.getBoundingClientRect();
        var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
        var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
        ret.x = box.left + scrollLeft;
        ret.y = box.top + scrollTop;
    } else if (doc.getBoxObjectFor) { // gecko
        box = doc.getBoxObjectFor(el);
        ret.x = box.x;
        ret.y = box.y;
    } else { // safari/opera
        ret.x = el.offsetLeft;
        ret.y = el.offsetTop;
        parent = el.offsetParent;
        if (parent != el) {
            while (parent) {
                ret.x += parent.offsetLeft;
                ret.y += parent.offsetTop;
                parent = parent.offsetParent;
        // opera & (safari absolute) incorrectly account for body offsetTop
        if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
            ret.y -= doc.body.offsetTop;
    if (el.parentNode)
            parent = el.parentNode;
    else
        parent = null;
    if (parent.nodeName){
        var cas = parent.nodeName.toUpperCase();
        while (parent && cas != 'BODY' && cas != 'HTML') {
            cas = parent.nodeName.toUpperCase();
            ret.x -= parent.scrollLeft;
            ret.y -= parent.scrollTop;
            if (parent.parentNode)
                parent = parent.parentNode;
            else
                parent = null;
    return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
    if (ev.stopPropagation)
        ev.stopPropagation();
    else
        ev.cancelBubble = true;
    if (ev.preventDefault)
        ev.preventDefault();
    else
        ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
        return;
    for (var optionName in optionsObj)
        if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
            continue;
        obj[optionName] = optionsObj[optionName];
})(); // EndSpryComponent

You don't need to upgrade your software. But if you're struggling with Spry, IMO you should cut your losses and switch to something better for the longrun.
If you have a budget to work with, I highly recommend Project Seven's Pop-Menu Magic 3. It's easy to use in DW CS4, 5, 6 or CC. More importantly, it's bullet proof and works in all devices.
Pop-Menu Magic3 by PVII (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget to work with, you can roll your own menus with jQuery plugins. A bit more effort on your part, but they perform better than Spry.
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu2
DEMO:
http://www.geektantra.com/projects/jquery-megamenu-2/
DOWNLOAD:
http://code.google.com/p/jquery-megamenu/
Nancy O.

How Do I Create an Editable Spry Menu as part of a Template?

I am having considerable trouble trying to work out an issue and hope you can help. I have been working on a webpage that I would like to be a template for a fundraiser we are doing. I used a horizontal spry menu and a vertical spry menu. I have two youtube videos that I would like embedded on the page, but I would like the flexibility to change them for different pages. I am trying to make my horizontal and vertical spry menus editable since I am going to be making pages for all items in the menus. I can't seem to set this up correctly. Can you tell me what I am doing wrong? I have been able to set up editable regions according to my template file, however, when I open the template, I am unable to edit the spry menus or edit the youtube videos. Setting up editable regions also seems to change the look of my page.
Here is what I would like all the pages to look like: http://www.ymimusic.com/shoppers_guide.html
But this is how it looks presently when I try to make a page from the template I created following the instructions from the course: http://www.ymimusic.com/test.html
Since I cannot get the template to work the way I would like, I have not created any links yet. I can send you the template and html page if this will help. Thank you for your help in advance./p>

Murray,
I am just opening your responses now. I will try to clarify again. "There's the rub. This is not a wise choice. A completely different menu in each page will not only confuse your visitors, it will drive you insane. I strongly suggest you not do this." You were referring to "What throws us off the track is your wish to be able to have a different menubar in each page. In that case the menubar will need to be in an editable region."
What I am simply trying to do is this: If I create a menu that has the following links: About Us, Products, and Contact Us on one page, I want my customers to see the SAME menu on the About Us page, the Products page and the Contact Us page. I am NOT creating different menus on each page. I am trying to automate the format by creating a template that will show these links on each page without me redoing it every page.
When I attempted this, and created a page from the template, I could not get into the menu to assign links to different pages. Using the above example, If I created my About Us page as the template for the site, then created the Products page from the template, I need the ability to assign the links on the Products page to the About Us and Contact Us pages. The page created from the template does not allow me to do this. I cannot get in to assign the links in the Properties section of Dreamweaver. I even attempted to do the following action in the .dwt file I created:
Modify > Templates > Make Attribute Editable
I did this to make the links editable after creating the template. This obviously didn't work.
To summarize: I do NOT want to make different menus on each page. I simply want to create the two menus you see (one horizontal and one vertical) that will be part of the template. I am trying figure out when I assign the links and How. I will go back and read your notes as well as read the help section (F1) as you requested, however that is why I contacted you; I did not understand what I was doing wrong. I have been working with a course series in Lynda.com that has explained much of what to do up to my problem spot, I simply need to understand the concept.
Thank you for your assistance.

Lost the 'file, edit' etc'task bar on the left side of my mail menu. my upper left screen reads 'welcome to lightroom moblie. I never had nor can use these. how do i back to basic LR and upper left task bar?

I have lost my 'file,edit, ...' task bar from the upper left side of my LR screen. My upper left corner now reads something about welcome to Lightroom mobile. ( I have never had or used the mobile version and I can't use it anyway. ) When I push my mouse pointer up again the top of the screen the 'file, edit,...' does not reappear and stay as it has been doing for the last 3 years. How can I get it back? And, maybe what did I do so I can avoid this from happening again? Thank you. (I am not PC knowledgeable, please bear with me.)

Does the menu bar appear when you move your mouse pointer to the top of your display. If so then you could change the behavior of Lightroom via the menu Window->Screen Mode
Hope that helps
Guido

How to edit existing Spry Menu?

I created a Spry Menu, but now that it's published (saved) I
don't see how to edit it so I can easily add more menu items using
DW's visual tool. All I can get to is the menu's CSS.
How do I edit an existing Spry Menu to add/remove more items?
I'm using CS3.

I guess I dont understand. You can add or remove or change
the menu in the
properties panel. You can do all that in the design view as
well, so I'm
not sure what I am missing.
Is the page available to view?
"morkafur" <[email protected]> wrote in
message
news:goja98$mho$[email protected]..
>I guess I'm not being clear. Sorry.
>
> What I'm saying is that when I click "anywhere in the
menu" or the border
> around it, I don't get the display where I can click the
"+" to add a menu
> item.
>
> For example, I have a menu item called "Capabilities".
If I click that
> menu
> item I see properties for it, no problem. I get this.
>
> What I'm trying to do, however, is get back the the Spry
menu item
> DESIGNER
> where I can add/remove menu items graphically.
>
> Regardless of where I click, that designer does not
re-appear.
>
> If I click the Spry menu item on the toolbar, CS3
creates a new menu, but
> doesn't let me edit (using the menu designer) the
existing one.
>
> -- M
>

Spry Menu Bar lost formating

Hi,
Using DW CS3, I was cleaning up my site and wanted to place
my main css file in the css folder (for some reason, it was in the
root folder). I assumed DW would keep all links, etc. in tact.
Everything else is fine, including my horizontal Spry Menu Bar, but
the vertical Spry Menu in my left sidebar lost all of it's
formatting.
I tried moving the file back but the link to the css, or
whatever it is that formats the styling for this, is broken. Even
deleting the Spry Menu Bar and inserting a new one has the same
result - no formatting.
In the code for the Spry Menu Bar discussed (I removed a
number of irrelevent links):
<script src="../SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

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

</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../Contact-Us.html" rel="no
follow">Contact Us</a></li>
<li><a
href="../FAQs.html">FAQs</a></li>
<li><a href="../About-Us.html">About
Us</a></li>
</ul>
<a href="../index.html"><img
src="../Graphics/bannerimage.jpg" alt="BodyMindAwakening.com"
width="890" height="275" border="0" /></a>
</div>
<div id="sidebar1">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a href="../index.html">Home</a>
</li>
<li><a href="../Reading.html">Recommended
Reading</a></li>
</ul>
<h3 class="style1"> </h3>
</div>
Is this enough to go on to figure this out?
The CSS folder is in the root folder. The Spry Assets folder
is in the root folder. The .css file "thrColFixHdr.css" is the one
I moved from the root folder to the CSS folder.
Thanks for any help or suggestions!

Add the following to each page, or to your template
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
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,"current");
Spry.Utils.addLoadListener(InitPage);
</script>
making sure that you do have SpryDOMUtils.js in the SpryAssets folder.
Because the above place a class of current in the list item, you will need to change the selctor to and add
ul.MenuBarHorizontal li.current a {
    color: #F4F4F4;
    background-color: #8FC8D1;
Gramps

Spry Menu Bar Editing Links PLEASE HELP

Ok I am a new user and this is my first site and I have a question regarding creating links in the spry menu bar.
I created my home page with a spry menu bar and I have begun creating pages to link to my home page.
My question is when I navigate to another page from my home page my spry menu bar on the second page does not have the links set for the spry menu. Do I have to input all the links again on each additional page or is there an easier way to copy from my home page.
I am creating an online store and my homepage menu bar has over thirty links to products pages. Each page has the original banner and spry menu bar from my home page but the links arent set on any of the products pages. Do I have to go into each one of my thirty pages and create the thirty links to the other pages? and if that is the case what if I want to change or add additional links to the home page for new products launching? Do I have to update the links and spry menu bar on all of the additional pages as well?
If anyone can help me out I would greatly appreciate it. Any answer would be helpful even if its not the one I want.

If you're not using DW Templates to spawn site pages or Server-Side Includes for sitewide menus, you definitely must edit each menu on each page and upload to your server. Tedious.
Server-Side Includes are a huge time saver. Learn to use them.
http://www.smartwebby.com/web_site_design/server_side_includes.asp
Nancy O.

I am not able to edit the spry menu via dreamweaver

After having configured a spry-menu-horizontal-bar in my we page the
day before, I cam back to add more links, however, I found this error
message:
The following translator were not loaded due to errors:
PHP_MySQL.htm, has configuration information that is invalid.
Spry.htm: has configuration that is invalid.
SplyWidget.htm: has configuration information that is invalid.
XSLT.htm: has configuration information that is invalid
I am not able to edit the spry menu via dream weaver and doing the
modifications by hand is cumbersome and prone to errors.
Does anyone know how to solve this problem?
Have a good day!
http://www.tandooristyle.ca/ArbolOne1.html

Not sure exactly why, but somethings don't look normal like why you have a PHP_MYSQL.htm file?
Anyways, bets to post this on the Dreamweaver forum instead of the Developer Toolbox forum. You will get a much quicker response as this has nothing to do with the Adobe Dreamweaver Developer's Toolkit.
Brad Lawryk
Adobe Community Expert, Dreamweaver
Adobe Usergroup Manager, Northern British Columbia Adobe User Group

Dreamweaver "SPRY" Menu - Question on editing the CSS?

Hi, I am using the "SPRY" menu in DW CS4
In the CSS Styles panel there are a lot of "ul" (unordered lists) and "li" (lists) but I am unsure which ones to edit to get the changes I need below. If someone could give me some direction I would be very thankful.
Here is the link to the website with the menu. http://www3.telus.net/~jessum/#
How Do I ...
1.Center the menu horizontally?
2. Change the font style to a sans serif font?
3. Move the menu's to the right so they're centered in the button?
4. Add a different colored background images that will tile the width of the buttons?
5. Change the width of the buttons?
6. Add some "blank" buttons or empty spacers to the left and right of the menu buttons to fill up the with of the menu bar?

Customizing Spry Menu Bar
http://foundationphp.com/tutorials/sprymenu/customize1.php
Centering a Horizontal Spry Menu
http://foundationphp.com/tutorials/sprymenu/centering.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Spry menu bar woes (add submenu levels and edit width)

So i need some spry menu bar help. Apparently as a graphic designer i'm also expected to webdesign, and while i can solve most problems with a good googling, i seem to be at my wit's end fo this one. So the site i'm doing has a header ith a horizontal spry pop-up menubar (in Dreamweaver CS4). But some problems arise: when i manually add another submenu level, they don't show up in chrome or FF, they do werk perfectly in IE6. I just add the following code to the codepage:
<li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers & mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>
the PMX never pops open in FF an chrome.. Should i be adding anything else to another part of the code? i'd like my submenu text to have a slight indent? How ever, when i add the indent to ul.menubarhorizontal ul , it elongates the submeny boxes in IE6, while looking normal (width) in chrome and FF. WHat part of the CSS style should i change to just have the text scoot over a bit without it really affecting the box layout? ALso, if anyone could tell me how to add a wee bit of spacing above the text (and beneath), i'd be eternally gratefull. Also, how do i change the with of the submenus? seing as my main buttons are images, but the names i ned to put in my submenus are turning out to be pretty long...
HTML code for the menu:
<tr>     <td><ul id="MenuBar1" class="MenuBarHorizontal">       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a>         <ul>           <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers & mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>               <li><a href="#">music Sources</a></li>               <li><a href="#">amplifiers</a></li>               <li><a href="#">paging</a></li>               <li><a href="#">speakers</a></li>               <li><a href="#">microphones</a></li>             </ul>           </li>           <li><a href="#">racks and stands</a></li>           <li><a href="#">cables</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Company','','images/knoppenrollover_02.jpg',1)"><img src="images/knoppenbalk_02.jpg" name="Company" width="165" height="41" border="0" id="Company" /></a>         <ul>           <li><a href="#">Who are we?</a></li>           <li><a href="#">history</a></li>   <li><a href="#">contact us</a></li>   <li><a href="#">philosophy</a></li>   <li><a href="#">careers</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/knoppenrollover_03.jpg',1)"><img src="images/knoppenbalk_03.jpg" name="news" width="166" height="41" border="0" id="news" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects','','images/knoppenrollover_04.jpg',1)"><img src="images/knoppenbalk_04.jpg" name="projects" width="166" height="41" border="0" id="projects" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Downloads','','images/knoppenrollover_05.jpg',1)"><img src="images/knoppenbalk_05.jpg" name="Downloads" width="165" height="41" border="0" id="Downloads" /></a>         <ul>           <li><a href="#">catalogs</a>            </li>           <li><a href="#">manuals</a></li>           <li><a href="#">software</a></li>           <li><a href="#">documents</a></li>           <li><a href="#">pricelists</a></li> </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/knoppenrollover_06.jpg',1)"><img src="images/knoppenbalk_06.jpg" name="Contact" width="169" height="41" border="0" id="Contact" /></a></li>     </ul></td>
sprymenuhorizontal.css:
@charset "UTF-8"; /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /*******************************************************************************   LAYOUT INFORMATION: describes box model, positioning, z-order   *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 14px;      cursor: default;      width: 1010px;      font-family: Arial, Helvetica, sans-serif; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ ul.MenuBarActive {      z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      position: relative;      text-align: left;      cursor: pointer;      float: left; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul {      list-style-type: none;      font-size: 100%;      z-index: 1020;      cursor: default;      width: 166px;      position: absolute;      left: -1000em;      background-color: #6C6C6C;      height: 0px;      margin-top: 0px;      margin-right: 0em;      margin-bottom: 10px;      margin-left: 0em;      text-align: right;      text-indent: 0em;      padding-top: 0px;      padding-right: 0em;      padding-bottom: 0px;      padding-left: 0px;      border-top-width: 1px;      border-right-width: 1px;      border-bottom-width: 1px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #666;      border-right-color: #666;      border-bottom-color: #666;      border-left-color: #666; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {      left: auto;      height: 0px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {      width: 166px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      height: 41px;      margin-top: 0%;      margin-right: 0%;      margin-bottom: 0px;      margin-left: 162px;      float: right; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {      left: auto;      top: 0; } /*******************************************************************************   DESIGN INFORMATION: describes color scheme, borders, fonts   *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul {      border: 1px solid #666;      background-color: #6C6C6C;      height: 0px;      padding-left: 0em; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a {      display: block;      cursor: pointer;      background-color: #6C6C6C;      padding: 0em;      color: #FC0;      text-decoration: none;      font-size: 14px;      margin-left: 0em; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      background-color: #FC0;      color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {      background-color: #FC0;      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.MenuBarHorizontal a.MenuBarItemSubmenu {      background-image: url(SpryMenuBarDown.gif);      background-repeat: no-repeat;      background-position: 98% 50%; } /* 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.MenuBarHorizontal ul a.MenuBarItemSubmenu {      background-image: url(SpryMenuBarRight.gif);      background-repeat: no-repeat;      background-position: 98% 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.MenuBarHorizontal a.MenuBarItemSubmenuHover {      background-image: url(SpryMenuBarDownHover.gif);      background-repeat: no-repeat;      background-position: 98% 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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {      background-image: url(SpryMenuBarRightHover.gif);      background-repeat: no-repeat;      background-position: 98% 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.MenuBarHorizontal iframe {      position: absolute;      z-index: 1010;      filter:alpha(opacity:0.1); } /* 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.MenuBarHorizontal li.MenuBarItemIE      {           display: inline;           f\loat: left;           background: #FFF;      } }[/SPOILER] any help would be greatly appreciated, as i've been fidgiting with this thing for 2 days now, to no satisfying effect...

since the layout of the pasted text got all weird, here i'm trying it again.
sprymenubarhorizontal.css:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 14px;
cursor: default;
width: 1010px;
font-family: Arial, Helvetica, sans-serif;
/* 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 a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 166px;
position: absolute;
left: -1000em;
background-color: #6C6C6C;
height: 0px;
margin-top: 0px;
margin-right: 0em;
margin-bottom: 10px;
margin-left: 0em;
text-align: right;
text-indent: 0em;
padding-top: 0px;
padding-right: 0em;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
height: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 166px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
height: 41px;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 162px;
float: right;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #666;
background-color: #6C6C6C;
height: 0px;
padding-left: 0em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #6C6C6C;
padding: 0em;
color: #FC0;
text-decoration: none;
font-size: 14px;
margin-left: 0em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #FC0;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #FC0;
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.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
/* 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.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 98% 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 98% 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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 98% 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.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* 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.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Edit Spry Menu Bar using Mouse Click

Hello…
I created a Spry Menu Bar and it's working just fine. But on phones and Tablets the submenu doesn't work because it's a mouseover, is it possible to change it to a mouse click?
Thanks!

Yes, but it needs a lot of JS coding to do so.
A better solution is to use a jQuery or pure CSS menubar or visit http://www.projectseven.com/ for a commercial version

Using Spry Menu

I'm in the middle of re-doing my astronomy web site using Dreamweaver CS5 and have designed my Spry menu. I haven't done much in Dreamweaver having used FrontPage for the most for several years. I only create my own web sites for displaying my astronomy images. I have it on my index.html page and was expecting the menu to appear on each subsequent new page. I am using a free template and expect the issue is having the menu static on all pages. The area that the menu was intended is on the left side but I could not see how to have the Spry menu display at that location so I used a horizontal menu across the top of the page. My published site, www.astral-imaging.com, was made in FrontPage using a template that used frames so this wasn't an issue. This site is using a different template altogether. What I'm not sure of is when editing the menu, will the changes go site wide everywhere the menu is displayed? So far it appears not to. I must confess that I'm not CSS savvy and suspect this may have some bearing in this. The other issue is how do I get additional pages to show the menu as well? The reason the linked pages show it now is that I copied it to the page I use as a new page template but if you look at the Nebulae sub-menu you'll notice that Planetary is missing on all but the home page. I remember using frames that everything but the body of the pages were the same so I didn't have to deal with this but now I'm a bit lost.The pages I'm working on are posted at http://www.astral-imaging.com/test/index.html
Any suggestions would be very welcomed
Thanks,
Steve

You could use a method called "includes" to include the menu in every page and edit it in a single location
see my answer to http://forums.adobe.com/thread/882527?tstart=0 for some pointers and a Spry example

Lost Spry Menu editability

Similar Messages

Maybe you are looking for