Spry Menubar 2.0 Fallback

Hi All,
Just finished adding and styling the Spry Menubar 2.0 for a new template on my site.
http://sfgraphicdesigner.com.au/services.htm
Just wondering what the fallback options are for the Menubar.
The Spry 1.6 Menubar degrades quite gracefully but as the Spry UI creates the a lot of the markup on the fly it looks shocking when Javascript is disabled.
Any thoughts?
Cheers,
Stephen

Hi Lon,
Yeah that's exactly what I'm talking about.
I know I could make this easier on myself with a CSS version but I wouldn't learn anything that way lol!
Plus I have a lot of other sections planned for my site which the Spry Menu will be useful for.
Found some links for a possible answer, haven't had a chance to review them properly yet:
http://css-plus.com/2010/06/how-to-make-a-jquery-drop-down-menu-with-a-css-fall-back/
http://www.simonbattersby.com/blog/jquery-dropdown-menu-plugin-with-css-fallback/
http://www.twinhelix.com/dhtml/fsmenu/
Thanks for the replies,
sf d;-)=

Similar Messages

Problems to add a background-image to the widget Spry MenuBar!

With DreamweaverCS4 version 10.0 Build 4117, (italian language) I have tried to add a Spry MenuBar to the one website page.
But the problem is that I haven't understood where add my property "background-image": url(../immagini/Menu_Button_01.gif).
In the Application Page of Dreamweaver I have this screenshot:
But in the Preview Window of InternetExplorer 7 I have this strange behavior:
The "Menu_Button_01.gif" are a rounded square button made with PhotoshopCS4 and have a transparent background.
In the IE7 MenuBar doesn't appears as expected, without the transparent background!
1) How can I do to show my "Menu_Button_01.gif" image as transparent background in the MenuBar?
2) What is the correct CSS Style Rule to apply the "background-image" property?
(Example: "ul.MenuBarHorizontal li"? Or "ul.MenuBarHorizontal a"? )
3) Should I also apply the property: "background-color:transparent"? Where? What is the specific CSS Style Rule?
I have uploaded my little local WebSite to Rapidshare (100KB):
http://rapidshare.com/files/370735082/Test_Spry.zip.html
Please download it to inspect my problem.
Please response me!
Horsepower0171.

For a starter, you should not put your background style rules in the following. The accompanying descriptions will tell you this.
/* 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;
    width: 116px;
    float: left;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
/* 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: 116px;
    position: absolute;
    left: -1000em;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
Then when you apply style rules to
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
this will be overridden by the following rules. They replace your image with an arrow image.
/* 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: 95% 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: 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
There are one of two solutions
If you do not want and arrow, simply set background to none in the above four instances.
If you do want an arrow, include a down arrow image in a second Menu_Button_01.gif image called Menu_Button_01_DownArrow.gif or similar as well as a third one for your right arrow image.
I hope this helps.
Ben

Spry menubar does not work in IE

I made a spry menubar to my website using dreamweaver cs3 on
mac. Everything works fine with Opera, Firefox and Safari, but the
menubar won't show on Internet Explorer. I've been trying to find
out how to fix the problem but it still won't work properly.
Can anyone here help me?
Thanks!
You can have a look at the page at
http://www.skls.fi/jasenalue.html

I have the same problem. Looks great in FF, Safari, Opera,
but in IE the dropdowns are dancing all over the place. Suspect
it's something in the hover classification, but can't figure out
where the problem is:
http://www.kirkaubry.com

Dreamweaver spry menubar vertical doesn't work properly in firefox 3.6.3 for windows

The links in the menu items in the left hand sidebar (a Spry menubar vertical) do NOT work properly in Firefox 3.6.3 for Windows. They work when the home page is first loaded, but when you go to another page using the menu links and return to the home page via the BACK ARROW, the links no longer work. You have to reload the page to get the links to reappear.This bug is only manifested in Firefox 3.6.3 for Windows. The menus work as expected in IE 8 for Windows, Google Chrome 4.1.249.1064 (45376) for Windows, Safari 4.0.5 for the Mac, Google Chrome 5.0.375.38 beta for the Mac and Firefox 2.0.0.17 for the Mac.
== URL of affected sites ==
http://elkview.zxq.net/

Your above posted system details show multiple Java Console extensions.
You can uninstall (remove) the Java Console extensions and disable the Java Quick Starter extension, you do not need them to run Java applets.
See http://kb.mozillazine.org/Java#Multiple_Java_Console_extensions
See also http://www.java.com/en/download/help/quickstarter.xml - What is Java Quick Starter (JQS)? What is the benefit of running JQS? - 6.0
Disable the Java Quick Starter extension: Tools -> Addons -> Extensions
Control Panel -> Java -> Advanced tab -> Miscellaneous -> Java Quick Starter (disable)
You can try a direct connection: <br />
Control Panel > Java > General tab > "Network Settings...": "Direct Connection" (enable)

Spry menubar submenu horizontal instead of vertical

I have spent two days trying to figure out why the submenu on my spry menubar goes horizontal instead of vertical. I have watched youtube videos and all the tutorials automatically have them going vertical under each other. My submenu bar goes left to right and i dont want that. I have tried several changes with the code in CSS and the HTML and I can move the main menubar and the submenu all over the screen, just cant get it do drop down under each other. Help please!!

Have a look here for auto widths http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml.
The only change I would make to the above is to add !important to the following
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
Gramps

Spry Menubar in table -problem in IE

I'm a newbie to web design and this software...having said
that here is my issue:
I inserted a horizontal Spry menu bar in a cell of a table.
When viewed in Firefox, all is well. When viewed in IE, the Spry
menubar is no longer in the cell but dropped well below and to the
right of the entire table.
Any idea where to correct this?

I'm a newbie to web design and this software...having said
that here is my issue:
I inserted a horizontal Spry menu bar in a cell of a table.
When viewed in Firefox, all is well. When viewed in IE, the Spry
menubar is no longer in the cell but dropped well below and to the
right of the entire table.
Any idea where to correct this?

SPry menubar floating submenu's

I've been tackling with this spry menubar trying to get it so that menu's float over content in div's or frames instead of positioning the content below the extended menu.
Here is my website www.nathanielmcmahon.com
I had it working in one browser before but not others. Now firefox and iexplorer push content below and chrome pushes content to the side.
I want the menu to display over content with an opaque background
Below is the modified sprymenubar css.
@charset "UTF-8";
/* SpryMenuBarHorizontal.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, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    z-index: 1200;
/* 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
/* 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%;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    height: inherit;
    position: relative;
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%;
    cursor: default;
    width: 10em;
    position: relative;
    left: -1000em;
    z-index: 1300;
    visibility: visible;
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: 115px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 13em;
    z-index: 2000;
    height: 35px;
    background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../assets/images
/transparent-png.png', sizingMethod='fixed');
    background-color: #FFF;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    margin: -27% 0 0 75%;
/* 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: .5em;
    color: #999999;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #999999;
/* 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
    color: #999999;
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(../SpryAssets/SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 94% 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
    z-index: 1010;
    position: absolute;
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

I've been tackling with this spry menubar trying to get it so that menu's float over content in div's or frames instead of positioning the content below the extended menu.
Here is my website www.nathanielmcmahon.com
I had it working in one browser before but not others. Now firefox and iexplorer push content below and chrome pushes content to the side.
I want the menu to display over content with an opaque background
Below is the modified sprymenubar css.
@charset "UTF-8";
/* SpryMenuBarHorizontal.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, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    z-index: 1200;
/* 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
/* 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%;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    height: inherit;
    position: relative;
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%;
    cursor: default;
    width: 10em;
    position: relative;
    left: -1000em;
    z-index: 1300;
    visibility: visible;
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: 115px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 13em;
    z-index: 2000;
    height: 35px;
    background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../assets/images
/transparent-png.png', sizingMethod='fixed');
    background-color: #FFF;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    margin: -27% 0 0 75%;
/* 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: .5em;
    color: #999999;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #999999;
/* 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
    color: #999999;
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(../SpryAssets/SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 94% 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
    z-index: 1010;
    position: absolute;
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

Using Spry MenuBar in a FrameSet

Hello,
I would like to use a Spry MenuBar in a fixed top frameset and redirect the link to the bottom frame. However, when I insert the menubar into the top frame, the Spry MenuBar "widget tab" will not show thus not allowing me to configure the menuing other than directly editing in code view.
Any help you can asist with will be appreciated.
Thanks in anvance

I see this is your first post at the Dreamweaver Spry Forum. Welcome!
Framesets are an old way of constructing pages. I don't have specific knowledge about how they work with Spry, but it appears that the answer to that is "not well." In construction, a frameset is a set of child pages arranged in a containing frame.
I suggest that you would be much happier running through a good tutorial on the modern way of building web pages, which is with Cascading Style Sheets. You can easily incorporate Spry MenuBars into those pages.
Here is a link to such a tutorial: http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html
Beth

Spry MenuBar F. Fox fine, IE Explorer displays off

Hello Friends,
I am having an issue with my Horizontal SpryMenubar.
In Firefox all seems fine. However when I load my website in IE Explorer, a black bar, (same length as my Spry Menubar) appears below the actual Menubar. It almost seems like it is part of the Menubar and but is pushed down out of position.
I have included my CSS and a screen shot to illustrate the issue.
If anyone can shed some light on this I would be very grateful hearing from you. Many thanks in advance for your assistance!
@charset "UTF-8";
/* SpryMenuBarHorizontal.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, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 600px;
    margin:auto;
    background-color: #000000;
/* 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
    list-style-type: none;
    font-size: 100%;
    position: relative;
    cursor: pointer;
    top: -55px;
    width: 9em;
    padding: 2px;
    float: right;
    background-color: #000000;
/* 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: 8.2em;
    position: absolute;
    left: -1000em;
    top: 10px;
/* 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
    width: 10px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* 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 #CCC;
    background-color: #000000;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    cursor: pointer;
    background-color: #000000;
    color: #FFFFFF;
    font-family: "Century Gothic";
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #33FF66;
/* 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
    color: #FF0000;
    font-family: "Century Gothic";
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
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: 95% 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: 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.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.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;
/* 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-color: #000000;

Hi,
The following code will give you a nice black line as you described:
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 600px;
    margin:auto;
    background-color: #000000;
My advice, keep the original CSS and create a myStyles.css which is loaded after the Spry CSS. myStyles.css will then contain your mods. This makes it much easier to keep track of when something goes wrong.
Hope this helps,
Ben

Spry MenuBar Help

Is there anyway to get the Spry MenuBar to align and work properly in each of the table cells, like the menu below it? I have placed each of the main buttons (home, core IT, option IT, biography and help) into a separate <td> cell. It's really annoying me, I spent around 5 hours yesterday just trying to get it to work, and it works outside of the table cell, but it appears like that inside <td> cells. =/
http://dylricho.com/portfolio/help/test.htm
Also, the error messages that popup on screen are confusing. Both of the files required are uploaded and in the same directory as all the other scripts. =/

1. Yes, but you must have a different menu ID and corresponding constructor for each table cell as follows
<td>
     <ul id="MenuBar">
     
     </ul>
</td>
<td>
     <ul id="MenuBar_2">
     
     </ul>
</td>
<script>
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
      widgetClass: "MenuBar MenuBarLeftShrink",
      insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
// BeginOAWidget_Instance_2141544: #MenuBar_2
var MenuBar_2 = new Spry.Widget.MenuBar2("#MenuBar_2", {
      widgetID: "MenuBar_2",
      widgetClass: "MenuBar MenuBar_2LeftShrink",
      insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
2, The online SpryWidget.js is corrupt. Upload a fresh un-corrupted version

Spry MenuBar - IE6 - how to make that submenu is shown above the parent element

Hi you all,
I need the menubar to open the submenu above the parent element.
Here´s what I did:I inserted a spry menubar and the only css-change I did was the one shown below in red "botom: 2em;"
This works exactly as I need it to - in Safari, Firefox and Opera.
In IE6 however, the submenu is shown far below the parent element. Is there a solution?
Greetings from Germany
Alex
/* 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: 100px;
    position: absolute;
    left: -1000em;
    bottom: 2em;

thank you very much, Nancy!
Greetings from Mannheim, Germany
Alex
Am 03.09.2010 um 23:45 schrieb Nancy O.:
>> In IE6 however, the submenu is shown far below the parent element.
>> Is there a solution?
Possibly. It's hard to tell without seeing your page, though.
>
The position of Spry Menu Bar submenus is controlledby the margin
property on submenu ul tags.
1. Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontalul rule.
2. Change the margin: -5% 0 0 95%; default values to the desired
values.
>
http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS895F3A6D-6D73-42ef-B568-3D04A BD2F171.html
>
Also, look through the CSS coments for IE hacks. Often these
workarounds for older browsers can be commented out or deleted.
Test before you delete anything permanently.
>
>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
>

Spry menubar DW - I messed up?

I created a Spry horizontal menubar in DW but I must have missed something in the instructions. I've followed several tutorials but can't get it straight.
1) It looks funky online - comes out as a vertical list instead of a horizontal menubar.
2) Once I get it straight, how do I place the same menubar in all the pages on the site?
I tried by copying it to each page - got the same vertical list, though.
I tried putting the insert spry menubar thing into a Library page then putting the Library item on this page - still no go.
Using DW CS5.5 on iMac running OS 10.10.2 (Yosemite). Thanks.

I have now created a Spry Assets folder and uploaded the Spry files to it,
but it didn't make any difference. You ask if the local and remote site
folders are properly defined, and the thing is, they are not. After
upgrading my OS to Yosemite something went crazy in my DW, and I was unable
to define the remote site. I have been uploading file by file directly to
my hosting service, which is very awkward, and much more cumbersome than
using DW as I have done for years. Still, mostly it works, until I hit this
snag.
At this point I think I'm going to give up on Spry and try to use a
different method - I really appreciate your questions and suggestions.
Thank you very much!
Jamie Tubmen
111 ElderSpirit Court, Abingdon, VA 24210
276.676.0997
[email protected]
www.elderspirit.org

How to make spry menubar top level only appear for browsers with java turned off

I was under the impression that just the top level of the horizontal spry menubar appears when someone with Java turned off views it...now I see that the entire unordered list appears vertically and takes up the whole page....is there a way to make just the top level menubar items appear when java is turned off in viewers browser?
Thank you in advance for any insight you can provide.
Lois

When you disable Javascript in your browser...and it is Javascript not Java... if your menubar is properly constructed, the submenus do not appear, only the top level menu items.
It sounds to me as if you are turning off style rendering in Dreamweaver itself, or have not properly linked your CSS stylesheet to your page.
When CSS is linked properly, the submenus are "hidden" with left: -10000px; (a BIG distance) offscreen to the left of the Viewport. They stay there unless Javascript is turned on. It is Javascript that "calls them back" onto the Viewport.
Give me a link, Lois, and I'll check into your page for you...
Beth

How to make spry menubar first button different colour?

Hi
When making spry menubar how do you make the first button or whatever page you are on a different colour to show that you are on that page?
thanks
alix

1. Add a helper script called SpryDOMUtils.js as per
<script src="SpryAssets/SpryDOMUtils.js"></script>
2. Add a function called InitPage or similar that inspects each of the menu items and compares the link with the current URL as per
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
3. Add a listener for when the page is loaded. The listener will be the trigger for the function
Spry.Utils.addLoadListener(InitPage);
4. Add a style rule for the activeMenuItem that we, in our function, addedto the current menu item.
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
The !important bit is to override the JS
Your complete document should look similar to
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="untitled.php">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
</script>
</body>
</html>
Gramps

Spry menubar IE6

I am working on this page
http://www.spinsister.nl/TV3/index.htm
which has a
spry menubar at the top. Both FF and IE7 show the menu's as
intented. In IE6
all looks well when the page is first opened, but when a menu
link in the
navbar or in the left sidebar (which has ordinary links, no
spry) is clicked,
all text disappears from the navbar at the top, plus visited
links become
invisible. I experimented with adding a:visited to
ul.MenuBarHorizontal li a
so that it read
ul.MenuBarHorizontal li a:link, ul.MenuBarHorizontal li
a:visited
but that is no good either.
Two questions:
Am I on the right track thinking the problem is with the link
css?
Does someone know how to solve the problem in IE6?
Thank you.
Regards,
Adriana.
[ put out the rubbish if you need to reach me by e-mail ]
www.spinsister.nl

> I am working on this page
http://www.spinsister.nl/TV3/index.htm
which has a
> spry menubar at the top. Both FF and IE7 show the menu's
as intented. In IE6
> all looks well when the page is first opened, but when a
menu link in the
> navbar or in the left sidebar (which has ordinary links,
no spry) is clicked,
> all text disappears from the navbar at the top, plus
visited links become
> invisible. I experimented with adding a:visited to
> ul.MenuBarHorizontal li a
> so that it read
> ul.MenuBarHorizontal li a:link, ul.MenuBarHorizontal li
a:visited
> but that is no good either.
> Two questions:
> Am I on the right track thinking the problem is with the
link css?
> Does someone know how to solve the problem in IE6?
I have redone the whole css from scratch, modifying the Spry
Assets style sheet
and checking in IE6 as I went along, and found that "all is
well" in IE6 until
I change the background colour for the menu items {
display: block;
cursor: pointer;
background-color: #666699;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
the moment I change that bg colour, IE6 shows no text in the
menu's as though
I'd set the *color* to #669999. But I haven't.
I have been going over and over this thing now for two days.
Can someone please
help me?
Regards,
Adriana.
[ put out the rubbish if you need to reach me by e-mail ]
www.spinsister.nl

Spry Menubar 2.0 Fallback

Similar Messages

Maybe you are looking for