Vertical Menu bar from an item of a horizontal menu bar

I need to create a vertical navigation menu from an item of a horizontal navigation menu. I'm working on DreamWeaver CC

OK. So you're looking for a Horizontal drop-menu.
http://jsfiddle.net/NancyO/zN7fU/

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;

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

Links from 2nd vertical menu appear in submenu of 1st vertical menu

http://www.westhoustonairport.com/index_troubleshoot.shtml - Problem occurs in IE
I have five vertical Spry menus. Some of the menus have submenus. Go to PHOTO COLLECTION first, and the submenu looks good. Then go to either HANGARS / OFFICES or HISTORY in the third vertical menu, and you'll see that the submenus contain links from the fourth vertical menu.
As a temporary fix, I switched PHOTO COLLECTION (which has a submenu) with ON-AIRPORT BUSINESSES (no submenu), which you can see here:
http://www.westhoustonairport.com. There is no problem now because the fourth column no longer contains links with submenus.
I, however, need to change the links back to the previous order. What is causing the links to appear in the previous column's submenu? Thank you.

The following is where you should specify the menu items background color
ul.MenuBarVertical a
     display: block;
     cursor: pointer;
     /*background-color: #000ECE;*/
     padding: 0.5em 0.95em;
     /*color: #333;*/
     color: #FFF;
     text-decoration: none;
The browser and I do not understand the following style rule
ul.MenuBarVertical a.MenuBarItemSubmenu
     /*background-image: url(SpryMenuBarRight.gif);*/
     background-image: url(SpryMenuBarRightHover.gif);
     background-repeat: no-repeat;
     background-position: 95% 50%;
     display:!important;
Gramps

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"

How do I get the vertical menu's widget's sub menu to come from the left?

I am using the vertical menu widget and want to make the submenu come from the left of the parent item. Muse only offers the choice of the submenu coming from the right. Is there a cheat to sort this anyone's aware of? If not, is there a widget out there that would allow me to do this.

Hi Anshul
When I tried to replicate your video on my machine, it didn't work in the same way. I have a button on the site that links you through a drop-down menu of five options and from each of them comes several (between 5 and 10) other pages, via a drop down menu, currently on the right.
Your video shows setting the Menu Type to All Pages, but I can't do this as i have to set it to Manual. I also cannot open all the child menus at the same time, as you do in the video. I can only do one set at a time.
I can move the menus from right to left without a problem but when I re-open the menu, it's gone back to the right. Any suggestions?

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

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.

Open a pdf file from a item of the menu

Hi, I need to open a file .pdf from a item of the menu, I'm working with Foms 6.0., the problem is that I don't have idea how do that!
Thanks!

Hi,
Most folks use Java. Here is code for a Word doc:
http://www.thescripts.com/forum/thread586852.html
package oracle.forms.demos.ole;
import com.jacob.activeX.ActiveXComponent;
import java.awt.Panel;
import com.jacob.com.*;
public class wordbean extends Panel
private ActiveXComponent MsWordApp = null;
private Dispatch document = null;
public void openWord(boolean makeVisible)
//Open Word if we've not done it already
if (MsWordApp == null)
MsWordApp = new ActiveXComponent("Word.Application");
//Set the visible property as required.
Dispatch.put(MsWordApp, "Visible",
new Variant(makeVisible));
}

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.

T43p with one vertical white bar 1/2" in width 3" from right side of screen

I have a T43p with this vertical white bar that is new as of an hour ago. Not sure where it came from or how to fix it. I don't think anytihng is loose because I wiggled and pushed on every part on and around the monitor to see if it would change color or flicker at least a little. No change was noted. I also restarted and no change. External monitor shows no signs of this bar so it is not due to programming. I believe is is all due to hardware. Any ideas on an easy cost free fix? any help woud be awesome.

Welcome to the forum!
I don't believe that there's a cheap fix for an expensive machine such as T43p. Do you have any warranty left?
Have you run PC-Doctor on all video aspects of the system?
Good luck and let us know.
Cheers,
George
In daily use: R60F, R500F, T61, T410
Collecting dust: T60
Enjoying retirement: A31p, T42p,
Non-ThinkPads: Panasonic CF-31 & CF-52, HP 8760W
Starting Thursday, 08/14/2014 I'll be away from the forums until further notice. Please do NOT send private messages since I won't be able to read them. Thank you.

Adobe Reader move the vertical scroll bar from left to right

Hi,
is it possible to move the vertical scroll bar from left to right in Adobe Reader 9?
If not, are you planning to implement this functionality?

I meant from right to left, sorry
You see, I'm left handed and when I use the scroll bar that is on the right side with the left hand I don't actually see the content of the page, because my left hand is covering the screen (I'm browsing the internet in tablet mode and I use the pen to navigate between pages).
My system is a Tablet PC with Windows XP Tablet Edition 2005 and Adobe Reader 9.3.2.
P.S. can you edit my post so the google indexes it right? (
from right to left
instead of "from left to right")

Removing the Vertical scroll bar from the content area.

Hello,
Is there a way to remove the vertical scroll bar from the content area?
I am trying to create a new light portal frame work.
Everything works fine except that I see two vertical scroll bars, one from the content area and another from the page(frame).
Thanks in advance.
-Sudheer

Hi
There are a couple of ways in which to achieve this
1) Try and make the content flat. What I mean by this is that the content area (when using the standard light framework) doesn't contain an iframe, meaning that the iview defined on the page has "EMBEDDED" isolation mode. This should mean that you only have one scrollbar (if the content extends past the size of the browser)
2) If you need to make the iview URL isolation, then try and get the domain of the content to be of a similar domain to your portal server, i.e. your portal is portal.company.com and the content is content.company.com. In this way you can make the pages expand.
NOTE: One thing to note is that when using URL isolation iviews doesn't allow the automatic expanding of the iframe content. This is because the standard javascript doesn't allow this. Therefore you may have to write your own javascript function (or content area page) to do this
I hope this helps
Darrell

Vertical Menu bar from an item of a horizontal menu bar

Similar Messages

Maybe you are looking for