Spry Menu CSS Editing - Need Explicate Instructions

I have two menus & two style sheets. – Please: Is there an article or book that highlights the style names that need to be changed on the 2nd style sheet.
I changed different things; more things, less things and get new errors each time.
I got my first set working perfectly then started breaking things and can’t find my errors.
In this sample the drop-downs do work but the Right & Hover Arrows don’t appear. - In the Oracle CMS Portal I lose the 2nd menu drop-down: http://www.coronasdomain.net/jmh/mnu/ddNav/
Thanks,
Corona

This is good to keep in mind when changing the CSS http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
When you have two menus use the menu ID (eg MenuBar1 and MenuBar2) to assign the rule changes. Keep the original CSS and use an overriding CSS with the modified rules
eg.
#MenuBar1 ul.MenuBarHorizontal a {
    background-color: black;
    color:white;
and
#MenuBar2 ul.MenuBarHorizontal a {
    background-color:yellow;
    color: black;

Similar Messages

Help with spry menu css

Very new to this, so...in an effort to code a page using a spry menu bar for a mobile device, I made the following edits: 1) renamed MenuBarHorizontal to MenuBarMyCompany 2) renamed MenuBarVertical to MenuBarMyCompany 3) moved the SpryMenuBarHorizontal.css code to MyCompanyStyle.css 4) moved the SpryMenuBarVertical.css code to mobile.css. These changes are displayed exactly as I’d hoped in Dreamweaver CS5.5 Live View; however, the menu bar styling is does not display at all in Safari or Firefox browsers. Any advice? Thanks so much.

When I reviewed the source, I realized I hadn't removed one of the style links. I am so sorry to have posted this question.

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.

Odd spry menu / css positioning

Hi folks,
Working on a site with a Spry menu - looks as expected in IE,
but totally
out of whack in FF and Safari. Any suggestions to what I'm
missing?
http://www.applicationdynamics.com/Clients/pwj/
I'm sure I'm just neglecting to configure the CSS correctly
but haven't
found the trick yet.
Thanks!
Lawrence
Cartweaver.com

"Lawrence *Adobe Community Expert*"
<[email protected]> wrote in
message news:g915h6$t2o$[email protected]..
> Never mind.... Got it.
Hi Lawrence,
Maybe you got the part of it you caught as an issue, but it
still doesn't
work very well in IE7. The links are not being treated as
blocks so unless
you are moused over the actual text in a submenu, it will
snap shut.
I'd recommend a better menu, but you should be able to fix
this easily
enough and so long as there are not third-level flyouts,
usability with Spry
is OK.
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
http://www.projectseven.com/go/Elevators

Help with Spry menu bar editing

I posted this discussion topic, and have received loads of viewing but no comments:
http://forums.adobe.com/message/4657643#4657643
When I looked at the discussion just now, it was saying Read Only, but I don't understand why. Can anyone help me the original query, or why the discussion has changed to RO.
If you need more information, or I'm posting in the wrong place, perhaps someone could let me know.
Thanks.

Thanks, I understand GitHub a little better now. I didn't link to the CSS and JS files on the Adobe Labs server so I'm glad to know my website will be ok.
My site isn't live at the moment as I've taken it down whilst working on it. However, my question was more about tring to understand how to do something' in principle'.
I currently have around four templates and one individual screen. When I add/remove/edit the Spry drop down menu, I currently go to each of the four templates + the screen and make the adjustments to each one. It works fine, but is there a more efficient way of making changes so that I only have to do it once?
The second question is linked to the first - having made the changes to the Spry menus, when I make the site live, the majority of users see the 'old' version of the website. Am I doing something wrong, or is this just the way it works (presumably something to do with the pages being cached??)? I advise them to use Refresh, but not all of them are happy with this especially as they have to do it for each page.
Lulu

Spry Menu Bar issue, NEED HELP...???

Here is the coding for a menu bar that i created with CS3, for some reason i am having an issue when i open the web page in IE, on firefox and safari it looks fine, the menu drops down to sub menu's fine, but for some reason when i open it in IE, the submenu's show on the very top of the page rather than right below the menu itself, please check my coding and see if there is an issue???
i ran compatability and there are no issues shown.
@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: 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;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 10.4em;
    float: left;
    background-image: url(tab2.png);
/* 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;
    text-decoration: underline;
/* 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;
    background-image: url(../tab1.png);
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.2em;
/* 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
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: default;
    padding: 0.5em 0.75em;
    color: #FFFFFF;
    text-decoration: none;
    border-left-color: #0063bd;
    border-right-color: #0063bd;
    border-right-width: 3px;
    border-left-width: thin;
    font-family: Calibri;
    font-weight: bold;
    font-size: 19px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #000000;
/* 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: #000000;
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-block;
    f\loat: left;
    position: relative;

Hey gramps, thanks for the info, i have updated my spry framework to 1.6.1 but the problem is still the same, i recreated my menu with the new 1.6 and it still doing the same thing, the submenu's are like vertically reversed... ugh need help.
here the new code
@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: 100%;
    cursor: default;
    width: 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;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 10.4em;
    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: 8.2em;
    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;
    background-image: url(../tab1.png);
    line-height: 18px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.2em;
/* 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;
/* 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: #FFFFFF;
    text-decoration: none;
    font-size: 19px;
    font-family: Calibri;
    font-weight: bolder;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #000000;
/* 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: #000000;
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-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-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-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-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;

Spry menu for my phone.css and tablet.css?

I finished learning how to set up my media queries and during the process I changed the properties of my spry menu for my phone.css. I now realize that all my menu bars are the size that I did for my phone.css.
How can I get my phone.css and tablet.css to recognize different spry menu bars? I was thinking to place certain spry menu css information inside of the appropriate phone.css or tablet.css (in my case) then within my #navigation ID.
Does anyone see what trap I have set for myself?
This has come about when I started to make a current site viewable in a tablet and phone device. As I change the spry menu bar it changes all of my navigation.
Thanks in advance for the help.

So in other words are you saying to paste in my spry menu bar css code into let's say my phone.css?
current phone.css code:
<><>
@charset "utf-8";
@import url("SpryAssets/SpryMenuBarHorizontal.css");
body {
    text-align: center;
    background-color: #be7042;
#wrapper {
    height: 750px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    background-color: #006400;
    position: static;
#bottombanner {
    text-align: center;
    height: 192px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 25px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 8px;
    line-height: 2px;
    color: #FFF;
    position: static;
#ckimage {
    text-align: center;
    height: 145px;
    width: 75px;
    margin-top: 50px;
    margin-left: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 6px;
    color: #FFF;
    position: static;
#estriolimage {
    text-align: center;
    height: 75px;
    width: 56px;
    margin-top: 45px;
    margin-left: 26px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 6px;
    color: #FFF;
    position: static;
#maincopy {
    font-family: Verdana, Geneva, sans-serif;
    text-align: left;
    height: 350px;
    width: 200px;
    margin-top: -265px;
    margin-left: 115px;
    color: #FFF;
    font-size: 8px;
    position: static;
#navigation {
    text-align: center;
    height: 49px;
    width: 320px;
    margin-top: 1px;
    position: static;
#topbanner {
    text-align: center;
    height: 48px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    position: static;
><><
Would I paste my spry menu bar css code into my #navigation portion of my phone.css (I bolded the part where I think I would paste in my spry menu css.)

Spry Menu Bar jumps off screen-right in CS6

Frustrating little glitch I'm experiencing. When in a NON-LIVE mode in CS6, I have a Spry Menu Bar that I've placed, customized and is functioning properly. It is precisely in the right location in BOTH live mode and in a browser preview, however, when I am editing the site the menu bar jumps off screen right to where I have to scroll right to locate it. The only thing that pops it back in to place is by tweaking a setting like "Float" from right to left then back to right. But once I begin to edit the site again it will jump off the screen. This isn't a massive deal since it remains in place in live and preview modes, it's just annoying for layout purposes while I'm editing. It sort of screws up the aesthetic of the layout. Has anyone found the same problem? Below is my layout.css and my Spry Menu css.
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
    max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:        6;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    15;
    Inspiration from "Responsive Web Design" by Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 95.8695%;
    padding-left: 1.0652%;
    padding-right: 1.0652%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#maincontent {
    clear: none;
    float: left;
    margin-left: 2.6785%;
    width: 100%;
    display: block;
#navigation {
    clear: none;
    float: left;
    margin-left: auto;
    width: 100%;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #300;
    height: 16px;
    top: 5px;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    color: #FFF;
    background-attachment: fixed;
    background-image: url(../bkgdContent.png);
    background-repeat: repeat;
    margin-top: 20px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 91.4836%;
    padding-left: 0.7581%;
    padding-right: 0.7581%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
#maincontent {
    clear: none;
    float: left;
    margin-left: 1.6574%;
    width: 100%;
    display: block;
#navigation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height: 16px;
#whf-content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#donatecontent {
    clear: none;
    float: left;
    margin-left: 1.6574%;
    width: 100%;
    display: block;
#theride-content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 49.1712%;
    display: block;
#donate-content {
    clear: none;
    float: left;
    margin-left: 1.6574%;
    width: 49.1712%;
    display: block;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 89.0217%;
    max-width: 1232px;
    padding-left: 0.4891%;
    padding-right: 0.4891%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    color: #FFF;
#maincontent {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.6007%;
    display: block;
#navigation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#whf-content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.6007%;
    display: block;
#donatecontent {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 100%;
    display: block;
#donate-content {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 32.6007%;
    display: block;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#theride-content {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 32.6007%;
    display: block;
#whf-content {
    font-family: Georgia, "Times New Roman", Times, serif;
SPRY 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: 100%;
    cursor: default;
    width: auto;
    float: right;
/* 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;
    width: 4.3em;
    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: 4.3em;
    position: relative;
    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
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: relative;
    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
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #300;
    color: #FFF;
    text-decoration: none;
    font-size: 12px;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-align: center;
    height: 16px;
    padding: 0px;
/* 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: #003;
    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: #003;
    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: 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;
    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;

Design view is not reliable. Learn to work in Code View or Split View with Live View to check your layout.
Spry menus are not responsive so they will not work well in a Fluid Grid Layout. Find a better menu system.
Project Seven Responsive Tabs
http://www.projectseven.com/products/tools/tpm2/tutorials/responsive/index.htm
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
In the meantime,
It's often easier to work with an unstyled HTML page.
To disable CSS, go to View > Style Rendering > untick Display Styles.
Or, use a Design-Time Style Sheet.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.h tml
Nancy O.

Removing white space after Spry Menu Bar...

I having a bit of a problem trying to remove a little white space after my Spry Menu bar, when I set it to 8.6em theres a little white space, when I set the width to 9.7 it goes too far, I changed it to 137 pixels, however in Firefox and IE, it messes up the layout.
Also what do you do if there a different browsers, where some layouts are out of place, do you need to detect the browser with JS?

The website is not live yet, everything is stored locally so heres the code: -
HTML: -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="website_style.css" />
<title>My Website</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="menu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a>      </li>
      <li><a href="#">Personal Profile</a></li>
      <li><a href="#">Education</a>      </li>
      <li><a href="#">Work Experience</a></li>
      <li><a href="#">Skills</a></li>
      <li><a href="#">Additional Info.</a></li>
      <li><a href="#">Referees</a></li>
    </ul>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
CSS: -
@charset "utf-8";
/* CSS Document */
body{
    background-size:auto;
    background-repeat:no-repeat;
    background-color:#967255;
    padding: 5px;
#wrapper {
    width:968px;
    background: #FFF;
    padding-left:0px;
    padding-right:0px;
    overflow:hidden;
    height: auto;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    margin:0 auto;
#wrapper #banner {
    background-image:url(banner.gif);
    height: 100px;
    width: 968px;
    margin-left: auto;
Spry Menu 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: 100%;
    cursor: default;
    width: auto;
    font-family: abeatbyKai;
    height: auto;
    background-image: url(../paper.gif);
/* 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;
    text-align: left;
    cursor: pointer;
    width: 8.68em;
    float: left;
    height: 3em;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0em;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0em;
    padding-bottom: 0;
    padding-left: 0px;
/* 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;
/* 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: 8.2em;
/* 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    color: #333;
    text-decoration: none;
    background-image: url(../paper.gif);
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 1.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
    background-color: #33C;
    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: #33C;
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
/* 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;
    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;

Tri-color spry menu bar

Thank you for viewing my post!
I am having trouble editing the default spry menu bar .css file
How do I edit the spry menu .css file to display two different roll over colors for the menu and submenu?
My goal is to have a blue menu bar with gray rollover color, gray drop down submenus with their own orange rollover color.
I tried giving ul.MenuBarHorizontal li its own style but I think something else in the .css is preventing this (or my own skill is).
Thank you ahead of time to the kind soul who can help me with this!

Have a look at this David Powers tutorial http://foundationphp.com/tutorials/sprymenu/customize1.php
I hope this helps.
Ben

How to populate a spry menu using microsoft sql server database?

Hi
I would like to use dreamweaver cs4 and spry menu to create a dynamically created menu system.
My concept is to populate the menu items on the fly using MS sql server as the database technology.
Can anyone point me in the right direction? I have googled and searched but cant seem to get anywhere.
Also once i get my menu established, i would like to style it. It seems like a lot of work to style each element by hand. I was wondering if there were some collection of spry menu css files somewhere that i could just attach and presto!
Thank you.
Jerry

I would like to use dreamweaver cs4 and spry menu to create a dynamically created menu system. My concept is to populate the menu items on the fly using MS sql server as the database technology.
Basically
create a dynamic XML file containing data from the database
create A SpryXMLDataSet
create a SpryRegion where the menu appears
using SpryRepeat populate the menu
More info can be found here http://labs.adobe.com/technologies/spry/samples/
Also once i get my menu established, i would like to style it. It seems like a lot of work to style each element by hand. I was wondering if there were some collection of spry menu css files somewhere that i could just attach and presto!
Have a look here http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2141544
If you require further Spry related support go to http://forums.adobe.com/community/labs/spry

Spry Menu Widget puts white borders around menu items in IE7

I have adjusted the Spry Menu css field to work with images
rather than block style menu items to achieve an aesthetically more
pleasing result. It all works fin in
Firefox...
When I have a look at the very same page in IE7, I can see
borders or margins drawn around all menu items.
Like
so...
Interestingly, when I remove the background image, I still
bet right hand side border/margin on the menu bar, but none for the
submenu items.
Like
so...
I thought first of an IE7 vs. Firefox incompatibility issue,
but then removed the SpryMenu.js from the file and got
this
result in IE7...
Of course the menu does not work anymore, but the rendering
is correct in IE7 and FireFox.
Any idea or suggestion, whether I am looking at a
compatibility issue or a bug in SpryMenu.js? More important, any
suggestions to make the page behave in IE7 just as in Firefox? Any
suggestion is welcome.
Cheers
chillifire
Appendix
test.php
inluding html code
SpryMenuBarHorizontal.css
css code

It appears to be a bug in the SpryMenuBar.js v0.12 after all.
I found an acceptable solution by commenting out line 163
changing
this.addClassName(items
, this.isieClass);
to
// this.addClassName(items, this.isieClass);
Now the menu is rendered correctly without the white
borders/margins.
I guess it is not always IE's fault ;-)
Something for the Adobe crew to pick up for their next
version...

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

Problem with .css for Spry menu

Hi,
I am having a problem with the Spry menu I have created and edited. All looks great in the Design view of Photoshop however under the Live view or opened using a browser the menu reverts to a list of hyperlinks!
I have checked the .css link but when using Firefox CSS editor the CSS file for the menu is simply blank?
Any suggestions would be great!
Thanks,
Ozan

Your SpryMenuBarHorizontal.css needs to be within your SpryAssets folder, which is where it would have been put automatically when you inserted the SpryMenuBar. You can move it back in there using the Files Panel.
Here is what the file structure needs to look like:
SpryAssets
SpryMenuBar.js
SpryMenuBarHorizontal.css
cssstyletemplate.css
index.html (or whatever the name of your page is)
Hierarchally, the top level of your root folder will show folders for SpryAssets and css and the html pages will be on the same level.
The Spry assets themselves will be down a level IN the SpryAssets folder, as the styletemplate.css file will be down a level IN the css folder.
In the head of the document, you will have
     <link rel="stylesheet" type="text/css" href="css/styletemplate.css" />
     <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"> </script>
     <link rel="stylesheet" type="text/css" href="SpryAssets/SpryMenuBarHorizontal.css" />
At the end, remove the slash before Spry inside the imgDown and imgRight sections:
     <script type="text/javascript">

</script>
Compare these with your files and file structure and correct any small typos, and they should be correctly linked.
Beth

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.

Spry Menu CSS Editing - Need Explicate Instructions

Similar Messages

Maybe you are looking for