Vertical Menu Bar Component

Hi,
I would need to deploy some kind of component as a menu bar but on vertical position. I have found a very interesting component on FlexLib library (see http://flexlib.googlecode.com/svn/trunk/examples/VerticalMenuBar/VerticalMenu_Sample.swf) developed by Doug Mc Cune (see at http://dougmccune.com/blog/2007/01/25/vertical-menubar-component/). Unfortunately the code does not run properly on Flex 3, and in spite of tracing the source code I'm not able to find but is wrong (I have attached it there if someone wants to take a glance of it).
Has someone been able to fix this issue or developing some kind of component that may be re-used?
Thanks

OK just managed to resolve the ftp issue. Bit tricky as our
old (average) website is still on the same server.
Anyway please check this link.
http://www.klanntools.co.uk/Contact%20Us%20pagehtm.htm
As you can see it works fine in FF but not in IE7. The child
sub menus keep appearing at the top of the vertical menu
bar.

Similar Messages

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.

Question on spry vertical menu bar backgrounds

I have a spry vertical menu bar. The menu branches off to 3 or 4 levels in some cases. When you mouse over the menu structure the menu path that you have selected turns a different color. I acheived this by giving
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
a different text color and also a different background color using CSS. The thing I want to acheive now is to somehow make listings within my menu structure that are clickable links a slightly different color. This is to signal that a menu selection that is currently being hovered over is indeed clickable (and linked to another page). For example, most of my clickable menu listings are at the end of a menu branches. That is to say the menu listing at the 1st and 2nd level are not clickable (linked to another page) but the listing that falls at the end of the menu branch is clickable.
How can I make the menu listings that link to other pages a different color then the other menu listings that do not link anywhere but are instead just the preceding struture to get you to the end of the menu structure?
Currently menu listings which merely branches off and do not link to a clickable page have a reference of "#" as shown below.
<li><a href="#">Menu_1</a>
This "#" was put there by Dreamweaver so I just followed the pattern. Clickable menu listings reference another HTML page as you would expect.

Nancy,
Thanks for the reply (it helped me know how to approach it). It looks like editing
ul.MenuBarVertical a.MenuBarItemSubmenuHover
will give me the behavior I was looking for. I don't know if that is what I want to do now that I look at it though. Using different colored backgrounds when hovering over links seems to contrast too much (even though some are clickable and others are not). Perhaps I didn't have the right color choice.
Instead I thought about emphasizing links that are clickable (with some type of visual variation) as opposed to making the hovering background color path to those clickable links different. I experimented with placing a 1 inch border around links in the menu that can be clicked but I am not sure if I like it or not.
I am using a background color of #7D120C for the hover. Any suggestions are welcome and appreciated.
http://www.indiana.edu/~iutreas/index.html
Thanks,
JTB

Force vertical menu bar to stay open on loaded pages

I am creating a new site using Dreamweaver CS3, temporarily uploaded at:
http://www.sharpeacademy.co.uk/nick-jackson.co.uk/sharpeacademy/theatrearts/
I have a navigation bar with the usual main tabs and sub tabs. Is it possible to configure this so that each section of the nav menu stays open when any of the pages linked to the sub-menus are selected?
Hope that makes sense!

OK just managed to resolve the ftp issue. Bit tricky as our
old (average) website is still on the same server.
Anyway please check this link.
http://www.klanntools.co.uk/Contact%20Us%20pagehtm.htm
As you can see it works fine in FF but not in IE7. The child
sub menus keep appearing at the top of the vertical menu
bar.

Problem with IE Vertical Menu Bar Widths

I currently have a Vertical Menu Bar with the width set to
auto. IE shows all of the top-level menu items as a single
word-wrapped line.
When you hover over any submenu item, the border that appears
on hover only spans the width of that submenu item's text rather
than the width of the actual submenu.
Is there a way to use auto widths in IE or will I just have
to use predetermined widths?
My URL is
http://www.plpimports.com/
Thanks!!

I changed the layout so that the menu is fixed width. I think
I like it better this way anyway.

Artifacts between Logo and Vertical Menu Bar

See http://www.ottawapatentagency.com
Artifact #1: a light grey dot at the joint between the logo and the vertical menu bar, on the right hand side.
Artifact #2: on mouse over 'Home' - the top menu item of the vertical menu bar - there appears a light-colored, 1-pixel separation between the logo and the vertical menu bar.
The logo is a standard gif and the vertical menu bar is a standard spry menu bar, I am puzzled.
Anyone has a solution?

You could try adding the following code above your closing </head> tag:

Also, it looks like you need to add closing brackets to the following two lines:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"
<link rel="icon" href="/favicon.ico" type="image/x-icon"

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 difficulties

Hi, I'm using the spry menu bar to create a vertical menu bar
on our new website. I'm new to all this but I've been playing with
pc's for years and have got the promise of a payrise if I can get a
neat looking website up and running.
Anyway, my sub menu bars appear at the top of the section
when I preview my template and move the mouse over the menu bar.
I've put a few screen print pics on photobucket so you can see what
I'm talking about.
http://i199.photobucket.com/albums/aa13/ewanvx/Klannweb1.jpg
http://i199.photobucket.com/albums/aa13/ewanvx/Klannweb2.jpg
What I'd like is to have each sub menu "linked" to its parent
item in the main menu so it appears alongside the parent item
rather than at the top.
How can I make it do this? Or this something to do with the
IE7 glitch I keep reading about?
Also can I just check that when I publish the website, the
flash buttons at the top of the page will actually work as I've got
them all set as links to other pages, but in preview mode these
links don't seem to work.
Its annoying me this as I was unable to get a book on
dreamweaver cs3, so bought a book on dreamweaver 8 which of course
doesn't use the spry system. Everything else seems very similar
though. As I want the same basic layout at the sides and top I'm
using a template which is the page I'm editing in the above pics.
Please help!
E.

OK just managed to resolve the ftp issue. Bit tricky as our
old (average) website is still on the same server.
Anyway please check this link.
http://www.klanntools.co.uk/Contact%20Us%20pagehtm.htm
As you can see it works fine in FF but not in IE7. The child
sub menus keep appearing at the top of the vertical menu
bar.

Spry vertical menu bar positioning issue in IE

I have been trying to fix a problem with my spry menu bar and have been looking for answers at several spry forums. I have modified my vertical spry menu to open submenus above and to the right of the main menu. It works in Opera, Firefox and Safari and opens below in IE. I tried changing the positioning from absolute to relative and that made it position itself below in all browsers. So, by deductive reasoning there seems to be something going on with IE when it reads the absolute positioning, is there a fix for this? You can see my website at raydlett.com the menubar is called STUDIO.
Here is my vertical menubar CSS:
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 6.75em;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 6.75em;
/* 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 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 9.2em;
    left: -1000em;
    bottom:-1%;
/* 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: 9.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 0px solid #fff;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 0px solid #fff;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #fff;
    padding: 0.5em 0.75em;
    color: #666;
    text-decoration: none;
/* Menu items that have mouse over or focus have a white background and orange text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #fff;
    color: #FF4C00;
/* Menu items that are open with submenus are set to MenuBarItemHover with a white background and orange text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #fff;
    color: #FF4C00;
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;
    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.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
Here are the associated global.css components:
body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 76%;
    padding: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    margin: 0;
    background: #fff;
    color: #666;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    line-height: 1em;
#container {
    width: 880px;
    text-align: left;/* this overrides the text-align: center on the body element. */
    margin-right: auto;/* the auto margins (in conjunction with a width) center the page */
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    font-family: Verdana, Geneva, sans-serif;
#header {
    font-size: 1em;
    padding-left: 17px;
    height: 26px;
    position: relative;
ul {
    padding:0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px; /* used for both menubar 1 and 2 */
    margin-left: 20px;/* used for both menubar 1 and 2 */
li {
    margin:0;
    padding:0 0 0 5px;/* used for both menubar 1 and 2 */
I have also attached the index.html file that uses the modified "STUDIO" Spry MenuBar2
Any help on this would be greatly appreciated. Thanks in advance.
ribit10

That makes sense, tooltips are tooltips, and appear at the tip of the mouse...But those "submenu triggers" can be simply styled links (as they are in a spry menu)...don't need to be swaps or images or image maps.
What about a using show/hide behavior? Click the STUDIO and the menu pops up adjacent in an apDiv. Click a link. Or click the x to close the apDiv.
You know this is just an exercise to run through all the Javascript and Spry that is in Dreamweaver, eh?
By the way, just providing a link to your page is quite all you need to do. You don't need to attach your files or show pictures of them...by providing a link, I can save a web page in its entirety and open it in Dreamweaver.
Beth

Spry vertical menu bar size issue

hello world,
i've got a beautiful layout with a lefthand menu section that i would love to behave with pop-out menus.
the entire design was crafted lovingly in fireworks and then exported as html with images, then opened in dreamweaver - looks great!
remove the image that was in the slice where the menu will go, check.
place cursor and select insert>spry>menu bar, select orientation, check.
remove extraneous menu items in the properties inspector, check.
and then, the problem...the box where "Item 1" (which will become my first button) is too big and shifts the entire table out of shape.
i've edited the box sizes in the following CSS items:
ul.MenuBarVertical
ul.MenuBarVertical li
ul.MenuBarVertical a
sometimes i can get it close to it being in-shape with no shifting if i make the menu box smaller than the image that will go in it, looks great in DW but it is then shifted down by a considerable amount when previewing in browers. any pointers will be greatly appreciated.

hi hans
i can't upload at the moment, don't have the password to the site at the moment.
for now the best i can do is post the CSS, and let you know that the size of the image i'd like to place in the parent spry menu is 168w x 32h (in px)
i hope this isn't too much text....here goes:
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 150px;
    height: 25px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 150px;
    height: 25px;
/* 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;
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;
    background-color: #EEE;
    color: #333;
    text-decoration: none;
    height: 25px;
    width: 150px;
    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.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #33C;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #33C;
    color: #FFF;
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%;

Menu Bar Component Positioning

Hello,
I'm looking for a way to position a Menu Bar swf (made from
the menubar component) at the top of the web page, so it does not
push the rest of the content down the page and end up with a bunch
of white space. I believe it would be done with a style sheet.
Anynone have any suggestions for such a style sheet?
Thanks

Hi Noel,
Here is a link to what I am speaking of. It is just a test
example.
http://www.mallisoft.com/testbed/menu/menutest.html
I would like to like the content to fit right under the menu.
Thanks

Flash menu bar component

I am creating an application that requires the flash menu
bar. i am having some problems with the coding can you help?
i need the menu bar to goto certain frames when released.
can i have an example of actionscript for the component?
Jak - Cheers if you can help

Hi Hans-G,
Problem only exist on Windows 7 system, working fine in XP. Thanks for yr hep!

Width of vertical menu bar

I am using Spry 1.6.1 which came with my copy of Dreamweaver CS4 on my Mac.
I am trying to use the vertical tab menus, but am having a bit of a challenge (you can see what I am working on here: <http://www.billiantlysimple.com/Menus.html>).
My first 'challenge' is with changing the width. I have followed the instructions in the help, on Dreamweacer CS4 Customize the Menu Bar widget here:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html
However, the main menu width seems to be controlled by width: 8em; in ul.MenuBarVertical in SpryMenuBarVertical.css. Changing this value to 'auto' simply make the menu the page width, so I am assuming the only way to control the width is to manually change it. Following the suggestions in the help, I set width: to auto and this works well on the sub menus.
The second 'challenge' is on Safari 5.03 on my Mac the background-color looks how I would like to top appear. However, in Internet Explorer 8.0 the background-color to the right of the text is not shown. The help suggests using 'transparent' as the color, but even changing this does not help matters.
I can workaround the first issue, but the second is more of a problem.
Assuming that I had made a error when making the changes suggested in the help I deleted everything I had done and started again. Again I had the problem, so I started for a third time and still the problem remained.

I believe that I have worked out the background-colr issue in Internet Explorer.
There would appear to be CSS element named ul.MenuBarVertical li.MenuBarItemIE and if I add a background-color to this then it gets sorted out.

Vertical Menu Bar with scroll

How do I get a submenu to have a scroll bar? My list goes past the bottom of the page and I would like the submenu to have a scroll bar to see the additional items.

Sure, I couldn't see from here...did you actually have a link to your page?
But you should have a comparable rule in the vertical menu:
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;
   height: 200px; /*make this value whatever you want to so that your menu stays on the page */
    overflow: scroll;
You may need to actually specify submenus, too, but it should cascade from the above rule...
ul.MenuBarVertical ul ul {
     height: 200px;
     overflow: scroll;
If you TRULY only need one submenu to scroll, throw an ID on that submenu's ul and address it in the CSS with a special rule (leaving it off all the ones you don't want to scroll):
ul#specialscroll {
     height: 200px;
     overflow: scroll;
Beth

Spry Vertical Menu Bar OK in Safari?

I'm revising the menu and using Spry in order to make the
menu friendlier to all generations of Safari. Has anyone had issues
with the Spry menu bar in Safari?
Thanks for any help.

I am told by Safari users (no mention of which Safari
release) that the site as it stands (using Xara rather than Spry)
does not allow hover to work correctly. The submenus appear until
the Safari user hovers over them, at which point they disappear. My
mockup page menu seems to work fine with Safari for Windows Beta,
but I just want to make sure that Mac users can get into the page.
Thanks.

Vertical Menu Bar Component

Similar Messages

Maybe you are looking for