Vertical Sub Menu

Hi,
I have created a menu with four sub menu items. Unfortunately the sub menu navigation is horizontal and I want it to be vertical. How would I go about just making the sub menu vertical but leaving the main menu horizontal?
I've looked at all the menu options but can't for the life of me see where this option is toggled?
Thank-you.

Here is the options associated with a verticle sub-menu:
Is this what you were looking for?
Julia

Similar Messages

Horizontal sub menu in ie, need vertical?

Built a SpryMenuBarHorizontal with one sub menu. Works fine in all browers except ie.In ie sub menu is horizontal instead of vertical.
Any help?
Thanks

I put your page through the validator:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Foptionsclinic.net%2Ffirst_step.ht ml
Main problem it identified was "end tag for "p" omitted."
I looked at your page in "view source" and see this:
<div id="headernav2">
<p>CALL US: 817-599-6700<br />
    HOT LINE: 800-392-HELP<br />
    EMAIL US: <a href="mailto:[email protected]">[email protected]</a><br />
    CHAT WITH US:
I think that <p> element is not closed.
Whether it has anything to do with your spry menu is yet to be seen. I fix my own code in this way. I do not understand why some things work or do not work. My suggestion to you is add these tiny little characters in your code </p> and test it. If it works call me a Coding deity. If it doesn't work, remove it and post again content in the knowledge that someone, a complete stranger, was prepared to have a look at your page.
For my part, I have a hunch that it does have something to do with your menu. If not, it needs fixing anyway.
Regards
Martin

Vertical Spry sub menu bar gets misplaced in IE

Hi,
I'm using Vertical spry menu bar 1.4 and it works fine in
Firefox, but the submenu appears on a different place in Internet
Explorer, you can check it at
http://www.holystichaven.com/Html/main.html,
i tried changing the positions using the margins provided on the
help, but it still won't work.
Thanx for any help.
Wayne

Hello,
Here are the steps you should do to make the menu work as
expected:
1. Remove all the <div align="center"> from the HTML
source because this will trigger a bug in IE and will apply to all
<a> tags when they are declared as block elements and will
modify their position.
2. Go into your CSS and in the first class ul.MenuBarVertical
change the width:auto; with width: 11em;
3. Into the CSS change into the "ul.MenuBarVertical ul" the
margin property:
margin: 0% 0 0 95%;
to
margin: 0% 0 0 11em;
4. In the "ul.MenuBarVertical a" please add the following
line:
text-align: center;
5. Go to the following URL:
http://www.cristic.ro/samples/SpryMenuBar.js
and our latest version for the Spry Menu Bar that fix an issue on
IE.
Regards,
Cristian MARIN

Horizontal Spry Menu Bar with Horizontal Sub Menu

I have created a horizontal menu bar with only one main menu item leading to a sub menu. I would like this sub menu to display horizontally also, instead of vertically as added by default.
I am relatively new to dreamweaver and would appreciate any help possible.

Came across the fix by accident thru extensions in menu bar,
and choice of cursor for each section. Feeling happy! Happy New
Year everyone.

Positioning of spry sub menu in IE8

Hi - can anyone help with an IE8 issue concerning Spry? I have created a menu here:
http://www.clinicafiore.co.uk/jan2012/indexJan2012_1.html
In all the browsers I have tested (Chrome,FF,Safari,Opera) on Mac and PC platforms it works fine. In IE8 it doesn't (hooray).
The critical attribute is:
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: 189px;
top: 0;
I.e. I have pushed the sub-menu out 189px when visible and set the top value to 0 thinking this would align the sub-menu with the top of the main menu item.
Is there a better way to do this to cover all browsers or do I need some conditional code for IE?
Really.really grateful for any help
For good measure here's all the html & the css
HTML
<div id="leftNav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#" title="ageing body" class="MenuBarItemSubmenu">AGEING BODY</a>
        <ul>
          <li><a href="#">Ageing Décolleté</a></li>
          <li><a href="#">Ageing Hands</a></li>
          <li><a href="#">Ageing Neck</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">ageing face</a>
        <ul>
          <li><a href="#">Ageing Lips</a></li>
          <li><a href="#">Double Chin</a></li>
          <li><a href="#">Downturned Mouth</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
</div>
CSS
ul.MenuBarHorizontal
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 0.9em;
          cursor: default;
          width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
          z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 0.9em;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 189px;
          float: left;
          font-weight: bold;
          text-transform: uppercase;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 189px;
          position: absolute;
          left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
          left: 189px;
          top: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          width: 189px;
          font-weight: normal;
          text-transform: none;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
          position: absolute;
          margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
          left: auto;
          top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
          border: 1px solid #CCC;
          font-weight: normal;
          text-transform: none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: #aee56b;
          padding: 0.5em 0.75em;
          color: #333;
          text-decoration: none;
          border-bottom-width: thin;
          border-bottom-style: dotted;
          border-bottom-color: #FFF;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          background-color: #999999;
          color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: #999999;
          color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
          position: absolute;
          z-index: 1010;
          filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
          ul.MenuBarHorizontal li.MenuBarItemIE
                    display: inline;
                    f\loat: left;
                    background: #FFF;

I may be misinterpreting what it is that you want, partly because I thought we were talking horizontal menu and you point out a vertical menu.
I think that you used the vertical menu as an illustration to shopw how you want the submenu alligned. If that is correct, then please copy an paste the following into a new document and see the result in an IE8 browser.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
ul.MenuBarHorizontal ul {margin-left: 8em; margin-top: -35px;}
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
If the above is not what you want, then please explain.
Gramps

Vertical Spry menu works in IE7 but not Safari

My vertical SPRY menu works well in various versions of IE
but when I preview in Safari it has an odd way of creating the
sub-menu. Here is the visual:
http://www.ornh.mb.ca/index_test.html
Any suggestions? Dawn

First thing is first. Your spry code is out of date. You are
running version 1.4 and the latest is 1.6.1. Go to the page below
and run the Spry Updater package:
http://labs.adobe.com/technologies/spry/home.html

Cursor selection does not follow chapter order on sub-menu

I used iMovieHD6 to add chapter markers to my large DVD project. They "shared" very nicely into iDVD8 and the Chapter Selection sub-menus were created nicely.
The problem is that when I use the cursor arrows on the DVD remote (real or virtual, in or out of iDVD), the highlight jumps around the sub-menu items rather than moving in a logical order. For example, I have 4 sub-menus with 6 chapters in each. Let's use numbers for them starting with the upper left they are 1,2,3 and then at the lower left they begin 4,5,6. I am using the Reflection White theme. When I press the right remote cursor button it will move from 1 to 2 to 5 to 6 to 3 to 4 and back to 1. Note that this order is not the same for each sub-menu, but none of them go 1,2,3,4,5,6.
I don't know what might be wrong or how to correct it, but I have a really big project that is otherwise perfect and I'd really like to get it out, please help!
Thanks.

I just wanted to add this before closing this topic.
After poking around with the Reflection theme I better understood what Len was talking about. It appears that there are no modifiable parameters in the theme itself that control the order of cursor's motion through the buttons. That I assume is hard-coded into iDVD and follows a pre-programmed logic.
The point of failure is the position and orientation of the buttons in the Reflection theme's sub-menus when added automatically. They are made to look to the viewer as though they are set on an angled surface and viewed at an angle from above. While our brains can process this effect nicely, iDVD's cursor logic doesn't fare as well.
The work-around is fairly simple: Realizing that iDVD treats all chapter buttons as though they are two-dimensional objects on a flat surface, you must re-arrange them so that from top-left to bottom-right they follow a logical order, with the first buttons higher and farther left than the later-selected buttons. You don't have to move them very far to get the desired result and it doesn't have to affect the overall appearance of the menu in a noticeable way.
A slight rearrangement in my case left the overall look of the chapter menu the same but yielded a zig-zag flow through the buttons as follows:
[1] [3] [5]
[2] [4] [6]
Pressing the right cursor key jumps from top left to bottom left to top center then bottom center then top right and finally bottom right before going back to the start. Granted this is not quite "right" in that if iDVD could "see" the menu the way my brain does it would go left to right across the upper row of buttons rather than zig-zagging, but I figure that as long as the user can understand how to get to the button they want it'll be fine.
If you really need your menu selection to move linearly left to right with those arrows and with the up/down arrow used to move it vertically, then you have to arrange the buttons on the menu in a rectangular pattern with the top of each row of buttons all in a nice horizontal line. Note that's not the same as the alignment line that Reflection provides for you, it's a true horizontal line in relation to the monitor screen.
I'd much prefer that iDVD revisit the logic of the cursor control code, perhaps adding the choice of allowing the numerical sequence of the chapters to dictate the order of the cursor's motion rather than their relative position on the screen, but since they don't call me for advice, the above will likely have to do.

Menubar load modules for each sub-menu

I am creating an application using the MENUBAR but cannot get a module to open when a sub-menu is clicked. I have stripped my app down to bare bones to eliminate other factors. The menubar has several main options, such as, Button1, Button2, Button3 and then each has a sub-menu dropdown. If Button1 has Button1Sub1 and Button1Sub2 dropdowns I want to have a different module launch when either of the sub-menus are clicked.
I have been successful in using ModuleManager to open a particular module referencing the creationComplete="moduleLoadHandler()" but not by selecting a menu item from the menubar. My application needs to be as user-friendly and Windows-like as possible. There are many different modules which need to be loaded and unloaded.
I have attached a screenshot image of my project tree and circled the ActionModule.swf file to show its location.
I have attached my code below:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="creationHandler();" >
    <mx:Script>
        <![CDATA[
            import mx.controls.menuClasses.IMenuBarItemRenderer;
            import mx.controls.MenuBar;
            import mx.controls.menuClasses.MenuBarItem;
            import mx.controls.Alert;
import mx.modules.Module;
import mx.events.ModuleEvent;
import mx.modules.ModuleManager;
import mx.modules.IModuleInfo;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.events.FlexEvent;
import mx.events.MenuEvent;
            import mx.collections.*;
            public var _moduleInfo:IModuleInfo;
            [Bindable]
            public var menuBarCollection:XMLListCollection;
            private var menubarXML:XMLList =
                <>
                    <menuitem label="Menu1" data="top">
                        <menuitem label="MenuItem 1-A" data="1A" itemClick="moduleLoadHandler()"/>
                        <menuitem label="MenuItem 1-B" data="1B"/>
                    </menuitem>
                    <menuitem label="Menu2" data="top">
                        <menuitem label="MenuItem 2-A" type="check" data="2A"/>
                        <menuitem type="separator"/>
                        <menuitem label="MenuItem 2-B" >
                            <menuitem label="SubMenuItem 3-A" type="radio"
                                groupName="one" data="3A"/>
                            <menuitem label="SubMenuItem 3-B" type="radio"
                                groupName="one" data="3B"/>
                        </menuitem>
                    </menuitem>
                    <menuitem label="Menu3" data="top">
                        <menuitem label="MenuItem 3-A" data="3A"/>
                        <menuitem label="MenuItem 3-B" data="3B"/>
                    </menuitem>
                    <menuitem label="Menu4" data="top">
                        <menuitem label="MenuItem 4-A" data="4A"/>
                        <menuitem label="MenuItem 4-B" data="4B"/>
                    </menuitem>
                </>;
            private function creationHandler():void{
menuBarCollection = new XMLListCollection(menubarXML);
private function moduleLoadHandler(event:ModuleEvent ):void{
canvas.addChild( _moduleInfo.factory.create() as Module );
_moduleInfo = ModuleManager.getModule('ActionModule.swf');
_moduleInfo.addEventListener(ModuleEvent.READY, moduleLoadHandler);
_moduleInfo.load();
            // Event handler for the MenuBar control's itemClick event.
            private function menuHandler(event:MenuEvent):void {
                // Don't open the Alert for a menu bar item that
                // opens a popup submenu.
                //if (event.item.@data != "top") {
                //    Alert.show("Label: " + event.item.@label + "\n" +
                //        "Data: " + event.item.@data, "Clicked menu item");
            private function onTopSelection(event:MenuEvent):void{
                var mb:MenuBar=event.target as MenuBar;
                var selectedIndex:int=mb.selectedIndex;
                for (var i:int=0;i<mb.menuBarItems.length;i++){
                    if(i==selectedIndex){
                        (mb.menuBarItems[i] as MenuBarItem).setStyle("fontWeight","bold");
                    else{
                        (mb.menuBarItems[i] as MenuBarItem).setStyle("fontWeight","normal");
         ]]>
    </mx:Script>
    <mx:Canvas id="canvas" height="75%" width="75%"
        paddingTop="10" paddingLeft="10">
        <mx:MenuBar labelField="@label" itemClick="menuHandler(event);" dataProvider="{menuBarCollection}" change="onTopSelection(event)" />
    </mx:Canvas>
</mx:Application>

Hi,
   I am also doing the same way, but ended up with some issues.
I have a Main Application with a menu Bar on Top and Rest of the area occupied by a ModuleLoader.
First I set the URL to login module, on successful login I initialize my menu Bar based on User role and load a new module, it contains only a SuperTabNavigator.
On click of an item in my Application Menu, I add a Custom Componenet built on Canvas (Named MyCanMod , this contains a Module loader and a progress bar in it , I have attached the code) as a tab to the tab navigator.
On menu item click, I take the data of my menu item and set that as the URL of my Module Loader inside the Custom canvas. Then it is added as a tab to my tab navigator.
      private function openItem(event:MenuEvent):void
var myModule:MyCanMod = new MyCanMod();                tabNav.addChild(myModule);
                tabNav.selectedChild = myModule;
                myModule.label = event.item.@label;
                myModule.icon = document_icon;
                myModule.urlParam = event.item.@module;
urlParam is a bined to the module Loader url in my Custom componenet.
All works fine. I am not unloading any modules and all the module loader are set to current domain.
When the user logs out and logs back with out refreshing the browser I get Type Error or some time null Object error and it is random. If I refresh the browser and login back, every thing is fine.
I do have reference for IDragManager,HistoryManager,PopUpManager,RemoteObject in main application.
I am not concerned about unloading modules now, but then on Tab close event I unloaded the module, and that did not solve the problem.
I get an error like
TypeError: Error #1034: Type Coercion failed: cannot convert flexlib.controls::PromptingTextInput@6152a851 to flexlib.controls.PromptingTextInput.
            at mx.core::UIComponent/createReferenceOnParentDocument()
            at mx.core::Container/createComponentFromDescriptor()
            at mx.core::Container/createComponentsFromDescriptors()
            at mx.core::Container/createChildren()
            at mx.core::UIComponent/initialize()
            at mx.core::Container/initialize()
            at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()
            at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded()
            at mx.core::Container/addChildAt()
            at mx.core::Container/addChild()
Any help is appreciated; I am really struck with it, please help.

Sub menu display I.E 7.0

Hi,
Thanks for a fantastic extension.
I set-up a menu in Dreamweaver for site
http://www.pafiankingdom.com
and made some minor adjustments to the formatting. The navigation
menu displays correctly in I.E 6.0 and Firefox, but in I.E 7.0 the
sub menu's show up on top of the main menu items.
The CSS file looks like the following:
@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;
font-size: 100%;
cursor: default;
width: 100%;
/* 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.35%;
list-style-type: none;
font-size: 12px;
font-weight:bold;
position: relative;
text-align: left;
cursor: pointer;
width: 100%;
/* 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%;
font-weight:bold;
position: absolute;
z-index: 1020;
cursor: default;
width: 100%;
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: 102%;
border: 0.35px solid #FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0.35x solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0.35px solid #FFFFFF;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-image:url(../images/template/fon_menu.gif);
padding: 0.5em 0.75em;
color: #000000;
font-family : Tahoma,Verdana,Arial;
text-indent:30px;
text-decoration: underline;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
text-decoration: underline;
/* 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-image:url(../images/template/fon_menu.gif);
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(../images/template/fon_menu.gif);
background-repeat: no-repeat;
/* 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;
background: #FFF;
Perhaps my formatting changes have messed up it's
presentation in I.E 7.0. I don't seem to be able to locate the
problem.
Please help.
Thanks in advance
Richard

fixed the problem.
code:
@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;
font-size: 100%;
cursor: default;
width: 100%;
/* 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.35%;
list-style-type: none;
font-size: 12px;
font-weight:bold;
position: relative;
text-align: left;
cursor: pointer;
width: 100%;
/* 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 0%;
padding: 0;
list-style-type: none;
font-size: 100%;
font-weight:bold;
position: absolute;
z-index: 1020;
cursor: default;
width: 100%;
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: 150px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 102%;
border: 0.35px solid #FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0.35x solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0.35px solid #FFFFFF;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-image:url(../images/template/fon_menu.gif);
padding: 0.5em 0.75em;
color: #000000;
font-family : Tahoma,Verdana,Arial;
text-indent:30px;
text-decoration: underline;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
text-decoration: underline;
/* 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-image:url(../images/template/fon_menu.gif);
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(../images/template/fon_menu.gif);
background-repeat: no-repeat;
/* 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;
background: #FFF;

Unable to Adjust Sub Menu

Hi,
I am unable to 'permanently' adjust my sub menu on any of the x,y,z axis to align it to my preference.
After moving it to my liking, when I click away from the menu it snaps back to original position?!
Another guy back in april 2012 had this issue http://forums.adobe.com/message/4369269,
surely this must have been fixed?
Hopefully Im just being foolish.........Please point me to the solution.
Best Regards,
Ross

Thank you for the screen recording.
There is still one issue I need help with please. To produce "vertically
spaced", "rounded" buttons I try to use an "invisible" 1px border on the
menu item. This is a a very hit and miss process, sometimes the border
jumps back to solid black, sometimes the border resets to 0px...
Could you please check to see if it is a bug, or is there a specific order
of application that I need to know?
Thanks,
Peter
Peter Claridge
Member of The Directors Guild
w: www.peter-claridge.com
e: [email protected]
t: +49 89 613 98 240
f: +49 89 613 98 241
m: +49 171 2685600
skype: claridge_p
IMDB Résumé: www.imdb.me/peter-claridge

Horizontal sub-menu - can you help?

I'd like to make a horizontal sub-menu appearing under a
horiziontal root menu (rather than the usual vertical drop-down
menu) - can this be done?
I know I could do this type of menu using Flash but I'd
rather not contain the navigation for the site in a .swf file - not
very user-friendly.

Try:
- iOS: Not responding or does not turn on
- Also try DFU mode after try recovery mode
How to put iPod touch / iPhone into DFU mode « Karthik's scribblings
- If not successful and you can't fully turn the iOS device fully off, let the battery fully drain. After charging for an least an hour try the above again.
- If still not successful that usually indicates a hardware problem and an appointment at the Genius Bar of an Apple store is in order.
Apple Retail Store - Genius Bar

Help with vertical Spry menu

I posted this in the general forum, but thought I'd repost
here since this is more specific to Spry.
I'm having issues in IE (6 & 7...surprise, surprise) with
my vertical spry menu. It displays exactly the way I want it when I
use Opera. I think it has to do with the whitespace:nowrap on the
2nd level menu items, but I really don't know. I want the 2nd level
menu to be different width than the 3rd level, so I have both
levels set to auto width with nowrap.
This is how it looks in IE 7:
Menu
in IE
This is how it looks in Opera (correct):
Menu
in Opera
Attached is my CSS as well. Let me know if you need the HTML,
too.
Thank you for helping!
quote:
@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;
font-size: 100%;
cursor: default;
width: 8em;
/* 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: 8em;
/* 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: auto;
left: -1000em;
top: 0;
white-space: nowrap;
/* 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: auto;
white-space: nowrap;
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;
padding: 0.5em 0.75em;
color: #333;
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: #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;
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;
background: #FFF;

IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Sub menu question

How do I create verticle sub menus that when navigated over expand in the current menu. I have only found options that display sub menus on top of the other main menu options.
http://www.agrability.okstate.edu/ This is the site I am working on, I am looking to add sub menu options to the menu on the left hand side.
Any advice is greatly appreciated!

You already have a spry horizonal menu that you appear to be using as a vertical. You might be able to insert another <ul> within the <li>, like so
<ul id="MenuBar1" class="MenuBarHorizonal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
</li>
If that does not work, perhaps you might just want to delete what you have and insert a vertical spry menu.
I also notice all of your html files start with caps, looks like you have an Index html and a index.html. I'm guessing that gave you a few headaches.
Gary

Vertical Accordion Menu

Hi there.
I'm browsing a lot of sites and scripts for Vertical Accordion Menus; something like this: http://www.i-marco.nl/weblog/jquery-accordion-menu/#
BUT, I need to know from you: What is consider as general practice about what triggers the dfferent menus & sub-menus.
I want a menu that falls out on mouse-over and "rolls back" on mouse-out; no clicking and I don't want any menu to be "open" when the mouse does not hover above it.
Now, what is regarded a common practise: click or mouse-over?
Is it OK not to have a sub-menu opened. See attached link. The whole menu can not be retrackted and want to open some menu.
Thanx for your help.
If anyone can point to a nice vertical accordion menu, I will really appreciate it.
Regards,
Deon

Hi Deon,
Have you checked Project VII and there Accordian Extension? http://www.projectseven.com
Its quite well done and eaily customizable i f you know some basic CSS.
Brad
Edit: Oh, on click is the general practice for that.

Sub menu buttons not working on mobiles

Why are my sub menu buttons not working on mobile phones but working fine on computers?
Sub menu buttons come under these buttons, Our funerals services, Advice and information.
http://www.vanessaroberts.co.uk/

You are using a Spry menubar widget. Spry was created pre-touch-screen systems and hence not designed for touch screens.
There are a number of solutions available to you
1. Don't have an active link on the main menu item
2. Place submenus in the page that is opened by the main menu item, e.g. as a vertical menu
3. Use Spry Menu Bar ver 2.0
3. Use a different menu system that is geared to accommodate touch screens
Because of the demise of Spry, see here http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l, option 3 looks like the best option.
There are a number of free-of-charge jQuery menubars, you could also opt for one of the commercial menubars such as PVII, WebAssist or DMXZone

Vertical Sub Menu

Similar Messages

Maybe you are looking for