Vertical menu design

i need someone to help me figure out in dreamweaver cs3 how to create a vertical menu designed the way the vertical menu for "Templates Types" was designed at this url:  http://template.dreamweavertutorial.co.uk/

Some links below to help you get started:
CSS Lists
http://css.maxdesign.com.au/listamatic/index.htm
CSS Borders
http://www.w3schools.com/css/css_border.asp
CSS Border-radius generator
http://border-radius.com/
CSS Gradient generator
http://www.colorzilla.com/gradient-editor/
CSS Box Shadow generator
http://css3gen.com/box-shadow/
Nancy O.

Similar Messages

  • Why does Vertical Menu conceal items in design view?

    I have a problem with a vertical menu that is placed in my page's left column.  When workign in desing view, the vertical menu's sub menu components remain open and this conceals the things that I want to work on that are placed behind the sub-menu items.  Any ideas how I can "collapse" the menu when workginin design view? Thanks!

    Hello Beth,  to follow is the CSS for my menu bar (vertical).  I see that the left: -10000em; is in there correctly.  Notice anything out of line?  Thanks for your input!!!
    Rod
    @charset "UTF-8";
    /* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
    ul.MenuBarVertical
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
         z-index: 1000;
    /* Menu item containers, position children relative to this container and are same fixed width as parent */
    ul.MenuBarVertical li
    /* 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
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
         border-top-style: none;
         border-right-style: none;
         border-bottom-style: none;
         border-left-style: none;
         border-top-color: #EEE;
         border-right-color: #EEE;
         border-bottom-color: #EEE;
         border-left-color: #EEE;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
         background-color: #F00;
         color: #FFF;
         font-size: 12px;
         border-top-style: none;
         border-right-style: none;
         border-bottom-style: none;
         border-left-style: none;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
         background-color: #F00;
         color: #FFF;
         border-top-style: none;
         border-right-style: none;
         border-bottom-style: none;
         border-left-style: none;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenu
         background-image: url(SpryMenuBarRight.gif);
         background-repeat: no-repeat;
         background-position: 95% 50%;
         font-size: 12px;
         border-top-style: none;
         border-right-style: none;
         border-bottom-style: none;
         border-left-style: none;
    /* 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%;
         border-top-style: none;
         border-right-style: none;
         border-bottom-style: none;
         border-left-style: none;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarVertical iframe
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
         ul.MenuBarVertical li.MenuBarItemIE
         display: inline;
         f\loat: left;
         background: #FFF;
         width: 160px;
         border-top-style: none;
         border-right-style: none;
         border-bottom-style: none;
         border-left-style: none;

  • Is there a way to create a vertical menu for tablet that stays in place?

    I am a novice in web design, and I want to make a vertical menu for a tablet page that stays in place.
    It should not scroll, and  it has to resize depending on screen size, so it looks the same across different tablet sizes.
    Is this possible in Muse? After reading some posts I am getting the feeling this is not possible at all, is that really true?
    If it can't be done in Muse, can I do it another  way? In Dreamweaver for instance?
    The reason I want this is that in my opinion horizontal menu's for tablets are ergonomically bad design, and just plain annoying. You always have to use two hands, lift one hand and then you probably block the view of the screen.
    Vertical menu's for tablets just make more sense since they can be made so that you could place them on the side of the screen so it would be possible to navigate with the hand that is holding that side of the tablet.
    I hope someone can help me.

    Yes, I am using the widget.
    It seems it is not possible to make the menu stick in tablet design (the pin options are greyed out). Nor is it possible to make the menu scale with screen sizes.
    A possible solution would be the ability to make it stretch to 100% screen size, like you can with horizontal objects.
    I have noticed though, that, for some reason, in web design it is discouraged or very hard to make things stretch 100% vertically. It seems to cause problems, and I don't understand why.
    Since I have started in web design, I have seen many posts of people having design problems, where stretching 100% vertically would be the obvious solution.

  • Spry vertical menu button shows background color instead of image in preview

    Hello All, I'm a newbie (to the forum and Dreamweaver) so my apologies if my question is not in good form.  I've searched for this issue but cannot seem to find the exact problem I have. 
    I've created a website (my first) and used the spry menu bar.  It works well using the default blue and grey colors for button and hover.  However, I decided I want to spruce it up a little and change the buttons to use a background image (rainbow pattern) instead of background color.  I internet researched this for some time and watched all the youtube videos people have posted for this process and editing the spry vertical menu bar CSS.  Using the .a and hover lines from the CSS, I was able to add my background .jpg image file.  In the design view, the button look exactly how I want them to.  However, when I attempt to preview in IE, Chrome, or FF, the buttons still have the default colors and no image.  I've gone back and deleted the default blue and grey, but then the preview just shows dark grey and white for the buttoms.  is there something that I am overlooking that would cause the background color to show instead of the image I have attached to the buttons.  I can't figure out why it looks right in DW but not in preview.
    BTW, I'm editing a template file and all the pages are updated with the new image buttons, but none of the pages show correctly in preview. 
    Thanks

    Point taken :-)
    This is my spry vertical css code.  No sub-menus. 
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
    border: 1px solid #CCC;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    background-image: url(/Images/Rainbow_Button.jpg);
    background-color: ;
    background-repeat: no-repeat;
    background-position: center;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #666666;
    color: #333333;
    background-image: url(/Images/Rainbow_Button_Hover.jpg);
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #0000FF;
    color: #FFF;

  • Spry Vertical Menu and sub menus not working correctly

    I am designing a website for a client and cannot get the spry vertical menu and submenus to work correctly.  The submenus will show on the index.html page, but not on any other pages, or when I preview in browser. Should I make it a library item then add it to the other pages? I am not sure what I am doing wrong.  I appreciate your help!

    URL to your site please

  • Iframe flashing Spry Vertical menu

    Hi All,
    Im having an issue with the Spry Vertical Menu with flyouts.
    It appears that the iframe used for the IE hack is flashing
    on the screen whenever I rollover a menu item with a flyout in it.
    Anyone having this same issue? Any help would be much
    appriciated as I like the new Spry Widgets but I cannot have
    glitches such as these... thanks
    Here is my CSS:
    @charset "UTF-8";
    /* SpryMenuBarVertical.css - Revision: Spry Preview Release
    1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    LAYOUT INFORMATION: describes box model, positioning,
    z-order
    /* The outermost container of the Menu Bar, a fixed width box
    with no margin or padding */
    ul.MenuBarVertical
    margin: 82px 0px 0px 26px;
    padding: 0;
    list-style-type: none;
    font-size: 1em;
    cursor: default;
    width: 14.5em;
    /* Set the active Menu Bar with this class, currently setting
    z-index to accomodate IE rendering bug:
    http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this
    container and are same fixed width as parent */
    ul.MenuBarVertical li
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style-type: none;
    font-size: 1em;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 14.5em;
    /* 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;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    width: 8.2em;
    background-color:#620808;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
    text-decoration:none;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
    border: 1px solid #000;
    /* Menu items are a light gray block with padding and no text
    decoration */
    ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    font-size: 1em;
    padding: 0.5em 0em 0.5em 2em;
    color: #dfc398;
    text-decoration:none;
    /* Menu items that have mouse over or focus have a blue
    background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-image:url(../images/office/side_menu_rollover.jpg);
    background-repeat:no-repeat;
    background-position:6px 8px;
    color: #FFF;
    text-decoration:none;
    /* Menu items that are open with submenus are set to
    MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
    a.MenuBarItemSubmenuHover, ul.MenuBarVertical
    a.MenuBarSubmenuVisible
    color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a
    given menu item
    /* Menu items that have a submenu have the class designation
    MenuBarItemSubmenu and are set to use a background image positioned
    on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class
    designation MenuBarItemSubmenuHover and are set to use a "hover"
    background image positioned on the far left (95%) and centered
    vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless
    you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form
    controls, we underlay each submenu with an iframe */
    ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    /* HACK FOR IE: to stabilize appearance of menu items; the
    slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
    display: inline;
    f\loat: left;

    ok... no sooner than I hit submit... figured it out...
    If anyone comes across this, it seems just add width:0,
    hieght:0 to the following css:
    /* HACK FOR IE: to make sure the sub menus show above form
    controls, we underlay each submenu with an iframe */
    ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    width:0px;
    height:0px;
    Happy coding!

  • Vertical Menu Problem

    I am trying to get the sub-menu to simply flyout just ABOVE the parent menu, instead of the default in which is appears just below.
    I played around with the margin settings to no avail, but I took the setting "top: 0;" and changed it to "bottom: 100%;" and viola! that did it in all browsers but IE. (IE7 and IE8) In explorer, the sub-menu still appears below the parent.
    I tried many different settings but to no avail - can someone please help with this?
    I can provide my code/example if needed but alls I did to test this is just open a blank html page, insert vertical menu - then changed the settings mentioned.....thats it.
    Thank you!

    The position of Spry Menu Bar submenus is controlled by the CSS margin property on submenu ul tags.
    Locate the ul.MenuBarVertical ul rule.
    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
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • Vertical Menu position problem

    Hi everyone,
    I'm trying to figure out how to manage the position of a vertical menu aligned on the left of the page.
    I have a centered background image. Depending on the size of the browser window the position of the menu varies and appears off. How can I align it to some position so that it follows coordinates of the background image.
    How would I go about to achieve this?
    Thanks in advance,
    JS

    As JTANNA said in another discussion, our psychic powers don't work so well on holidays. 
    Please post a URL to your problem page.  The answers to layout questions are in your code.  Without seeing your page, all we can do is make wild guesses.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

  • Spry Vertical Menu Arrow Cursor

    I have created a vertical menu, I am using the word immunization in the menu.  The problem that I am having is the pointer at the end of immunization is on the n at the end of the word.  I have tried resizing every area up to 12 em, but it just doesn't move that arrow.  The arrow seems stuck in the same place.  I tried downsizing the font, but the arrow stays on the n no matter how small I make the font. Anyone know how to move the arrow?

    The arrow is applied as a background image, applied to the a text.
    ul.MenuBarVertical a.MenuBarItemSubmenu
         background-image: url(SpryMenuBarRight.gif);
         background-repeat: no-repeat;
         background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
         background-image: url(SpryMenuBarRightHover.gif);
         background-repeat: no-repeat;
         background-position: 95% 50%;
    Although the comments indicate that the arrows are positioned on the far left, they are actually positioned on the far right, 95% of the distance from the left edge of the element.
    The a element has been set as a block element (it takes up the entire li in which it resides) and has been given a padding, which allows the background arrow space to appear, clear of text:
    ul.MenuBarVertical a
         display: block;
         cursor: pointer;
         background-color: #EEE;
         padding: 0.5em 0.75em;
         color: #333;
         text-decoration: none;
    If your arrow is bumping your text, and the arrow is the size you want, increase the horizontal (left and right) padding...boldened in the quote above...to make the li wider. If this does not suit, you can also increase the percentage distance from the left a few percentages, to fully nest the arrow in the right padding.
    Beth

  • Vertical Menu Spry

    Design a vertical menu spry with DW CS3. The menu is shorter
    in height than the default, font is designed smaller and bold. Menu
    looks fine in preview, but reverts back to default in browser after
    uploading to site. Followed the instructions in the Help, but
    missed something.
    margin - 0
    padding - 0
    float - none
    What else can I tell you to help figure out issue?
    http://www.amvetspost29.com
    Thank you.....

    In SpryMenuBarVertical.css change the following style:
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
        left: 0;
    The value of left needs to be changed to a negative value equal to the width of the menu and submenu. Using the default styles, it should be changed to -15.9em.
    You'll also need to change the submenu indicators. There are two style rules involved:
    ul.MenuBarVertical a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    You will need to replace SpryMenuBarRight.gif and SpryMenuBarRightHover.gif with images of left-facing arrows. Also change the background-position in both style rules to 5% 50%.
    By the way, you should be aware of the fact that Adobe announced a couple of months ago that it no longer plans to invest in the development of Spry. Although your menus should work, Adobe plans to remove Spry menus from the next major version of Dreamweaver.

  • CS3 Vertical menu

    I am using spry to create two vertical menu bars on the same
    page. But I want to apply different style and colour to each of
    them. If I change anything on the Spry menubar vertical CSS, it
    applies to all the menu bars items on the page. Do I need to create
    another CSS, but how to link it to the second menu bar? I am a new
    user of CS3, would appreciate any help on this. Thanks.
    W. Chui

    Hi Danilo, thank you for your response. I tried, but it
    didn't work. I am not sure if I have done something wrong. Here is
    SpryMenuVertical ccs I have changed according to my understanding
    of your reply. I have spent 2 days trying to figure it out... I
    hope you can help me. Thanks.
    @charset "UTF-8";
    /* SpryMenuBarVertical.css - Revision: Spry Preview Release
    1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    LAYOUT INFORMATION: describes box model, positioning,
    z-order
    /* The outermost container of the Menu Bar, a fixed width box
    with no margin or padding */
    ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    cursor: default;
    width: 150px;
    ul.MenuBarVertical2
    margin: 0;
    padding: 0;
    list-style-type: none;
    cursor: default;
    width: 150px;
    /* Set the active Menu Bar with this class, currently setting
    z-index to accomodate IE rendering bug:
    http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this
    container and are same fixed width as parent */
    ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 150px;
    ul.MenuBarVertical2 li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 150px;
    /* 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: 0% 0 0 113%;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 150px;
    left: -1000em;
    top: 0;
    ul.MenuBarVertical2 ul
    margin: 0% 0 0 113%;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 150px;
    left: -1000em;
    top: 0;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
    ul.MenuBarVertical2 ul.MenuBarSubmenuVisible
    left: 0;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    width: 150px;
    ul.MenuBarVertical2 ul li
    width: 150px;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    ul.MenuBarVertical2
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
    border: 1px solid #999933;
    ul.MenuBarVertical2 ul
    border: 1px solid #FF9900;
    /* Menu items are a light gray block with padding and no text
    decoration */
    ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #666600;
    text-decoration: none;
    ul.MenuBarVertical2 a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #FF9900;
    text-decoration: none;
    /* Menu items that have mouse over or focus have a blue
    background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #999933;
    color: #FFF;
    background-image: none;
    ul.MenuBarVertical2 a:hover, ul.MenuBarVertical a:focus
    background-color: #FF9900;
    color: #FFF;
    background-image: none;
    /* Menu items that are open with submenus are set to
    MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
    a.MenuBarItemSubmenuHover, ul.MenuBarVertical
    a.MenuBarSubmenuVisible
    background-color: #999933;
    color: #EEE;
    ul.MenuBarVertical2 a.MenuBarItemHover, ul.MenuBarVertical2
    a.MenuBarItemSubmenuHover, ul.MenuBarVertical2
    a.MenuBarSubmenuVisible
    background-color: #FF9900;
    color: #EEE;
    SUBMENU INDICATION: styles if there is a submenu under a
    given menu item
    /* Menu items that have a submenu have the class designation
    MenuBarItemSubmenu and are set to use a background image positioned
    on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 90% 50%;
    height: auto;
    width: 150px;
    ul.MenuBarVertical2 a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 90% 50%;
    height: auto;
    width: 150px;
    /* 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: 90% 50%;
    ul.MenuBarVertical2 a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 90% 50%;
    BROWSER HACKS: the hacks below should not be changed unless
    you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form
    controls, we underlay each submenu with an iframe */
    ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    /* HACK FOR IE: to stabilize appearance of menu items; the
    slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

  • Spry Vertical Menu Bar Styling Issues

    Hello all,
    I'm having CSS issues with a spry vertical menu bar. The Menu
    is fairly basic but, it has some odd sizing requirements specified
    by it's designer. The designer would like the sub menu items to all
    have different widths that correspond to the actual content within
    them. Here is sample.
    http://staging.rm306.com/cycle/
    The menu seen at the page above was not build with Spry. It
    was build with another tool and has considerable problems with
    consistent browser display.
    Can anyone give me a short list of styles and where they
    should be applied that might help me achieve this reletively simple
    effect?
    I've tried to use Spy menu bars in my projects in the past
    but, there was always some sticking point. I'd like this time to be
    the winner if possible.
    Thanks for your time and patience in advance,
    Kevin

    The sample page I posted came after searching for an easy
    "how to do it". The closest I found to a tutorial was this:
    http://www.adobe.com/devnet/dreamweaver/articles/spryte_menu.html
    The author designs and implements a spry menu with Fire Works
    graphics. The last section describes how to modify the existing CSS
    for multiple levels. Yet I found the sample page easier to follow.
    I hope this helps though.

  • Vertical Menu Bar with custom positioning

    I am working on a site that uses the very old mm_menu script. It is a PITA to maintain and modify. However, it allows on thing I have been unable to accomplish with Spry Vertical Menu -- the second level menus appear in the same vertical space as the first level menu. The normal operation for such menus is for the second level to start more or less with the vertical position of the first level button. But this means the second level often drops far below the bottom of the lowest first level button.
    Does anyone know of a way to customize where each second level appears (third and fourth are not needed)? Or some other UL/LI based menu code that can do this?

    Hi Bob,
    My first suggestion would be to re-order your navigation list to avoid the problem in the first place or figure out a different design altogether.  By re-ordering, I mean place menu items with the largest submenu at the top, and those with the smallest at the bottom.  Of course I understand there may be reasons not to do this, so here is what you can do to control where the menu positions itself.  The vertical positioning is controlled by "position: absolute;" style in all <ul>s contained within a <ul class='MenuBarVertical'>.  When you position something with absolute, it looks for its nearest parent that is positioned relatively (in this case the <li> items within <ul class='MenuBarVertical'>).  from there you can designate pixels or ems to offset from the top or bottom of the parent.  so an example of a way to do this is below.
    to give your menu the most control, you can assign each submenu its own class and decide its vertical positioning.
         your current html/css is something like:
        <style>
         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;   /* <-------this is what you will change for each submenu */
         </style>
    so to change this you could assign a class name to each submenu to look something like this
    <ul class='MenuBarVertical'>
         <li>
              <a href='#' class='MenuBarItemSubmenu'>Item 1</a>
              <ul class='item_1'>
                   <li>sub1</li>
                   <li>sub2</li>
                   <li>sub3</li>
              </ul>
         </li>
         <li>
              <a href='#' class='MenuBarItemSubmenu'>Item 2</a>
              <ul class='item_2'>
                   <li>sub1</li>
                   <li>sub2</li>
                   <li>sub3</li>
              </ul>
         </li>
         <li>
              <a href='#' class='MenuBarItemSubmenu'>Item 3</a>
              <ul class='item_3'>
                   <li>sub1</li>
                   <li>sub2</li>
                   <li>sub3</li>
              </ul>
         </li>
         <li>
              <a href='#' class='MenuBarItemSubmenu'>Item 4</a>
              <ul class='item_4'>
                   <li>sub1</li>
                   <li>sub2</li>
                   <li>sub3</li>
              </ul>
         </li>
    </ul>
    and extend the class styling to control each menu's vertical position.  "top:0;" is what is default and aligns the top of the submenu with the top of its parent <li>.  Giving it a negative number would move the submenu up and a positive number would move it down (can be in pixels, ems, etc.).  You can also use "bottom:0;" to align the bottom of the submenu with the bottom of its parent <li>.  Giving it a negative number would move the submenu down, and a positive number would move it up.  So using the above menu/list format you could position each submenu exactly where you want to:
    <style>
         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;  <-------comment this out or remove it.  we will set the position for each menu*/
         ul.MenuBarVertical ul.item_1
              top: 0;
         ul.MenuBarVertical ul.item_2
              top: -30px;
         ul.MenuBarVertical ul.item_3
              bottom: -2em;
         ul.MenuBarVertical ul.item_4
              bottom: 0;
         </style>
    Of course there are other ways to do this, but the lesson to remember is how absolute positioning works.  It looks for its nearest relatively positioned element and positions itself from that using top/bottom/left/right.  I hope this gives you a workable solution or at least gets you moving in the right direction.
    Dan

  • How do i customize the states in a vertical menu bar?

    i see that it is possible to change the states for a horizontal venu bar, but i can't get it to work for the vertical one.  please tell me we can edit the states in a vertical menu bar.
    valerie

    Yes, you've hit a bug in Muse, that will be fixed in the next release.
    The bug happens when you have a gradient fill for the default state, but no gradient fill for your other state. The vertical menu has this look by default. You can work around it by removing the gradient in the default state, or adding a gradient for the other states.

  • Spry vertical menu problem with IE

    We implemented the spry vertical menu for showing the
    categories of a products catalog. It has almost 1800 categories
    organizad at about 5 levels, some categories have about 30
    subcategories. These categories are extrated from a database.
    It works in mozilla but in IE present this problem:
    - The response time is slow when you change from one category
    to ahother. And the effiecience decrease.
    See in
    http://edit.panamericana.com.co/
    Thanks,
    Alejandro

    I tried in Firefox 3 and IE7 and they both seemed fairly slow
    for any action to take place. But IE7 did seem pretty slugish.
    It seems that you're already determined what the issue is,
    you have waaaaaay too many menu items. Seems to me that that number
    of items don't belong in a menu. There are even menus that are too
    long to appear entirely on the page, so they can't be easily
    accessed without accidentally hiding the menus again, which I did
    several times. IN particular:
    Cartuchos > Technologica
    If you cannot change to a different format to show all of the
    items, then perhaps you can split up the menu so that you don't
    have too many at one time. I checked the code of your page and it
    seems that you've got a lot of other scripting going on there
    besides Spry, so is the issue with Spry or with everything else
    you're trying to do with that menu. If you can try to recreate the
    page with only the menu items on it (and not pulled in dynamically
    on the fly), and then add back to your page a bit a time, you might
    be able to find out what is really causing the delays.

Maybe you are looking for