Vertical menu with vertical submenu's

Hi,
I would like to create a vertical menu with vertical submenu's. So when you click on a menu item, it slides open and reveals the submenu items. I tried to combine different accordion widgets together and also to combine an accordion with a vertical menu, but this got all quite messy, especially when I previewed it. It seems such simple feature (Muse is using it for its own menu structures, for example the widget-library) so I find it strange that it is not available in the library or somewhere else online...
Thanks for your advice!

Hi
How exactly you have tried with accordion ?
With accordion widget this can be achieved , as label the items as main menu and sub menu items.
For example , insert an Accordion , name the label as Main and insert other elements in container area and then link them to specific pages.
You can also , try to insert an accordion with rotation so that the menu items should appear with horizontal expansion.
These video should help you :
http://www.youtube.com/watch?v=dQy_lj0ZXss
http://www.youtube.com/watch?v=_LYbjPQnw9k
Thanks,
Sanjit

Similar Messages

Horizontal menu with horizontal submenu

I am trying to create a horizontal menu with a submenu that is horizontal directly underneath. So, when you hover over the items on the top menu, the list of subitems appears as a horizontal menu direclty below the the top menu. I've been able to modfy the spry tabbed panel widget to mostly do that, but there has to be a better way. It appears that the spry menu widget for the horizontal menu just has a drop down of subitems in a vertical list below the top menu item.   I've searched but can't find the answer. Could someone please help me out with suggestions? Thank you.

It would have been a lot easier to see what the problem is if you had posted a URL to your site. Now I am only guessing that you have placed an auto width on the submenu item container.
See here for more info http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml
The only problem with the above sample is that when you make the style rule for the submenu items, you need to include !important next to the float as follows
ul.MenuBarHorizontal ul li {
    display: block;
   float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
Gramps

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

CSS horizontal menu with vertical dropdowns

What I would like my menu to look like:
- solid border on top and bottom
- first-level menu items horizontal and centered
- first-level menu items equally spaced as opposed to same
widths
- second-level menu items vertical and on individual lines
What my menu actually looks like:
www.vicesbyproxy.com/staging/exp_menu_vert.html
What's wrong:
- border not on top & bottom
- second level wrapping within the width of the container
This CSS is much more complex than what I usually do. Any
help would be greatly appreciated.

The only way to go -
http://www.projectseven.com/products/menusystems/pmm/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"anubia" <[email protected]> wrote in
message
news:e5o4gk$28t$[email protected]..
> What I would like my menu to look like:
> - solid border on top and bottom
> - first-level menu items horizontal and centered
> - first-level menu items equally spaced as opposed to
same widths
> - second-level menu items vertical and on individual
lines
>
> What my menu actually looks like:
> www.vicesbyproxy.com/staging/exp_menu_vert.html
>
> What's wrong:
> - border not on top & bottom
> - second level wrapping within the width of the
container
>
> This CSS is much more complex than what I usually do.
Any help would be
> greatly appreciated.
>

Spry Vertical Menu Mac - 2nd Submenu

Hi,
I have a Spry Verticle Menu installed via DWCS4 on the PC.
The HTML website in question has about 5 buttons, but one of them
has a dropdown with 3 topics, 2 of which have flyouts.
***Question: Why doesn't the SECOND flyout show up in any MAC browser?
Here is the code:
<li><a class="MenuBarItemSubmenu" href="chapters.htm">    CHAPTERS</a>
                            <ul>
                              <li><a class="MenuBarItemSubmenu" href="chapters.htm">North America</a>
                                <ul>
                                  <li><a href="http://www.website.com/" target="_blank">USA</a></li>
                                  <li><a href="http://www.website.com/" target="_blank">NY</a></li>
<li><a href="http://website.com" target="_blank">LA</a></li>
                                </ul>
                                </li>
                              <li><a href="#">International</a></li>
                                <ul>
                                  <li><a href="http://www.website.com/" target="_blank">Headquarters</a></li>
                                  <li><a href="http://www.website.it" target="_blank">Italy</a></li>
                                </ul>
                              <li><a href="start_chapter.htm">Start a Chapter</a></li>
                            </ul>
                          </li>
Thanks!
-toonsas

<li><a class="MenuBarItemSubmenu" href="chapters.htm">CHAPTERS</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="chapters.htm">North America</a>
        <ul>
          <li><a href="http://www.website.com/" target="_blank">USA</a></li>
          <li><a href="http://www.website.com/" target="_blank">NY</a></li>
<li><a href="http://website.com" target="_blank">LA</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">International</a>
        <ul>
          <li><a href="http://www.website.com/" target="_blank">Headquarters</a></li>
          <li><a href="http://www.website.it" target="_blank">Italy</a></li>
        </ul>
      </li>
      <li><a href="start_chapter.htm">Start a Chapter</a></li>
    </ul>
</li>
Gramps

Vertical Menu with CSS

Hi there.
I have been working through the excellent tuturial posted by
Adrian Senior and its the Designing with CSS – Part 4:
Creating a Two-Column Layout one.
I'm happy with doing all that and have successfully completed
what he has done, but I want to know how to stretch the left
floating horizontal menu so that the height is the same as the
content.
I want to be able to create a page with a menu and content,
exactly as the tuturial, but with the background colour of the menu
actually going to the bottom of the page, so however long the
content happens to be.
If anyone can help, I would be very grateful!
Thanks in advance,
Craig Shaw

Google "faux column".
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"craig_shaw" <[email protected]> wrote in
message
news:etr29e$nsj$[email protected]..
> Hi there.
>
> I have been working through the excellent tuturial
posted by Adrian Senior
> and
> its the Designing with CSS ? Part 4: Creating a
Two-Column Layout one.
>
> I'm happy with doing all that and have successfully
completed what he has
> done, but I want to know how to stretch the left
floating horizontal menu
> so
> that the height is the same as the content.
>
> I want to be able to create a page with a menu and
content, exactly as the
> tuturial, but with the background colour of the menu
actually going to the
> bottom of the page, so however long the content happens
to be.
>
> If anyone can help, I would be very grateful!
>
> Thanks in advance,
>
> Craig Shaw
>

Hello! I need help for Adobe Muse vertical menu! very urgent!!!

Hello!
How can i make a menu like this in adobe Muse: http://www.bryanschutmaat.com/
- vertical menu with vertical submenu
Thanks!!

To achieve this, you can use an accordion widget with custum styling.
IF you search for Terry White, Muse, accordion, you will find some video tutorials on YouTube.

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!

SPRY Vertical Menu Problem

Hey Guys,
I am have been trying to figure this thing out for hours. I
am new to coding. I made a vertical menu with one sub menu in
products. It works fin on my mac computer when running it on
firefox and safari, but when I run it on on a pc in Internet
Explorer it does not work. Can you please help me, I have a
deadline I am trying to meet.
here is the link:
http://www.fcsenterprises.com/test/cabinetman/index.html

Hi,
I'll give exactly the changes you have to do to have the menu
working on both browsers:
On the SpryMenuBarHorizontal.css file make the following
changes:
- on this rule: ul.MenuBarHorizontal li.MenuBarItemIE ,
delete background: #FFF; property. (This seems to have an influence
here)
- on this ul.MenuBarHorizontal li rule add a fixed height,
height: 30px for example;
- on this ul.MenuBarHorizontal iframe rule add the line:
filter: alpha(opacity=0.1); (This is a known bug that is fixed for
Spry 1.6)
Diana

How to copy and paste manual menu with hyperlinks from one page to another?

Copy paste does not duplicate hyperlinks. Neither does putting it in the library. Both erases links. This is a general menu that will be on every page of the site, do I really have to hyperlink all 40 buttons in accordion menu again?
There has to be a way to copy the accordion with inset vertical menu with the hyperlinks for each button of menu?!?!?

Use a Master Page and create the links on that. (Use A-Master if that will work for your site, but otherwise create a B-Master page (with A-Master as its master - again if that works for your site)). You can then add the hyperlinks once to your new master page and use it for each for each of your other pages. (The new master page is added at the bottom of the "Plan" view of the site and once created you just drag and drop onto the other pages to apply it to them. Hope that all makes sense - it should be pretty easy to do what you want to achieve.

Collapsing Menu with Sub-Menus

Hi
I am trying to create a collapsing vertical menu (with nested
submenus). Check out the 'products' quick menu here and you will
know what i mean:
http://www.sofaworldhomefurnishings.com
Does anyone know how to do this using dreamweaver (ASP VBS)
or can point to any reference or tutorial?
Any help greatly appreciated.

It's pretty simple to do manually with DW's Change Property
behavior and a
nested list, or you might find some tuts and products here -
http://www.projectseven.com/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"pakora" <[email protected]> wrote in
message
news:ee3vb7$qqd$[email protected]..
> Hi
>
> I am trying to create a collapsing vertical menu (with
nested submenus).
> Check
> out the 'products' quick menu here and you will know
what i mean:
>
http://www.sofaworldhomefurnishings.com
>
> Does anyone know how to do this using dreamweaver (ASP
VBS) or can point
> to
> any reference or tutorial?
>
> Any help greatly appreciated.
>

Spry Submenu Not Inline With Vertical Menu in Internet Explorer

Please could someone help with advice on my website. The spry
vertical submenu lines up okay in Safari and Firefox but in
Internet Explorer my submenus are shown higher than the the
vertical menu item they link to. I have tried changing all that I
can to find a solution but nothing works. Have a look at
www.jadedlusion.com/Home.html. I have attached my code.

Please address the following first http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmyareasbest.com%2FMI%2520cities%2 FTraverse-City.html

Connect horizontal with vertical spry menu

Hi,
I am a beginner, so maybe this is a stupid question... But here we go
Is there a way to "link" horizontal and vertical menu bars together?
I'll try to give an example...
The horizontal bar (main menu, in the header of the page) is:
Item 1          Item 2        Item 3          Item 4
(sub 1.1)      (sub 2.1)
(sub 1.2)      (sub 2.2)
Now, when clicking on one of the links, let's say "Sub 2.2", I would like to have the sidebar show this:
Item 2
sub 2.1
sub 2.2
     subsub 2.2.1
     subsub 2.2.2
     subsub 2.2.3
sub 2.3
Where "Item 2" stays fixed as a title, and the subs form an accordion menu revealing sub-submenu's (you can open and jump to another sub by clicking on it)
Now, the easy way to do this, is to create a separate page with a separate accordion menu in the side bar for each of the "Items". But that means that when I alter something (add a submenu, change its name, change a link, etc), I'd need to change the separate pages as well.
Is there a not too complicated way to link them together? So that the Item 2 in the side bar is not just a word, and the menu below not just a separate menu, but refer to the horizontal menu which is in the header? In other words, I would like to create one single list with all the "Items", "Subs" and "Sub-subs" to which I can refer and use them in different spry formats and locations.
Thanks in advance!
Tom

Short answer, no way to do that with Spry menus. Also, Spry is a dead framework. Adobe abandoned it in 2012 and removed Spry from DW CC because it has outlived it usefulness and is not mobile friendly.
You might want to consider a different navigation approach such as a jQuery Mega Menu.
5 Best jQuery CSS3 Navigational Mega Menus | Jaspreet Chahal
Nancy O.

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.

Vertical Menu & Submenu

Does anyone know how to create (or if there is a widget out there in the market somewhere) a vertical menu that can contain submenu items that expand and push down (like an accordion), but that will stay fully open (expanded) once a submenu item is selected (thus allowing selection of another submenu item without having to return to the parent menu item. My specific objective is to have a vertical with "Home", "Galleries", "About", etc. with individual galleries in the expandable (on click and/or rollover) area below Galleries, but that remain open once a specific gallery is selected. I've worked various tries, and the only way I can come close is to have state buttons inside the drop-down below an accordion menu item, but that won't stay open when any of the buttons are selected.
The only examples I can find are copyrighted by others, so I am hesitant to reference/show them here as examples. Any help would be appreciated.

You can checkout these links :
https://creative.adobe.com/addons/products/2111#.VHwFD8lsiks
https://creative.adobe.com/addons/products/4061#.VHwFGclsiks
http://muse.adobe.com/widget/vertical-almosnino01
http://creativedroplets.com/adobe-muse-tips-sliding-menu/
Thanks,
Sanjit

Vertical menu with vertical submenu's

Similar Messages

Maybe you are looking for