Vertical Menu Problem

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

The position of Spry Menu Bar submenus is controlled by the CSS margin property on submenu ul tags.
Locate the ul.MenuBarVertical ul rule.
Change the margin: -5% 0 0 95%; default values to the desired values.
http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS895F3A6D-6D73-42ef-B568-3D04A BD2F171.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Similar Messages

Spry vertical menu problem with IE

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

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

SPRY Vertical Menu Problem (IE Hack?)

I'm having a problem with the Spry vertical menu bar. The one
I created works fine in Firefox and in Safari, but not in Internet
Explorer. In IE the sub-menu containers open AT THE TOP of the menu
bar, and not next to the selected menu item. I'm not sure how to
fix it. Any help is appreciated.
You can see the problem here (view in IE and roll over any of
the menu items in the middle or lower part of the menu bar):
http://southerncharmgifts.net/thesouthernsportsman/html/ssarchery.html

I downloaded the Spry update but it didn't fix the problem.
It changed my menu box to white, when it should have remained
black. Hopefully I can fix it. But still the same problem with IE.
This is really bad! Any way to reverse the update?
quote:
Originally posted by:
SnakEyez02
First your Spry is out of date. Please click on the following
link below to get the Spry Updater. It will be inside the package
as an Extension. Then next time you start up DW click on Sites and
then you will see an option at the bottom to update Spry in your
site.
http://labs.adobe.com/technologies/spry/home.html
Looking at your page it appears to validate except for one
thing. All images need alt tags assigned to them.
See if updating the Spry helps.
Also there is a Spry forum that Adobe does check in case
there are bugs. The link to the forum is on that page and I will
also link it below:
http://www.adobe.com/go/labs_spry_pr1_forum
With regards to Pitmaster you can check the above links but
depending on the issue it could be something else. So if you need
further assistance post a link to your page.

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

Using a Spry Vertical Menu problems

I'm getting some extra spaces on the very top portion of my menu bar here is the link:
http://highdeftapetransfers.com/storefront.php
it's also duplicating the sub menu from below "symphonies" I'm pretty sure it's a coding problem but can't seem to figure it out
any help sould be appreciated
Thanks

As long as you have got inconsistancies in your code as the hightlighted parts in the following, I would not worry about the menubar not showing properly.
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' />
<title>High Definition Tape Transfers Online Store</title>
<link href="/design_packages/HDTT_Site_081308/catmenu3.css" rel='stylesheet' type='text/css' />
<link href="/design_packages/HDTT_Site_081308/default_css.css" rel='stylesheet' type='text/css' />
<style type="text/css">

</style><script language="javascript" type="text/javascript" src="/javascript.php"></script></head>
<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write("\<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>\<\/script>" ); </script><script type="text/javascript">var pageTracker = _gat._getTracker("UA-1046402-1"); pageTracker._initData(); pageTracker._trackPageview(); </script><body>
<form action="http://www.highdeftapetransfers.com/search_results.php" method="post" name="search_form" class="style3" id="search_form">
<table width="750" height="35" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="1%" nowrap><div align="center"><img src="/design_packages/HDTT_Site_081308/images/topbanner.jpg" width="750" height="107"></div></td>
    </tr>
</table>
</form>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td height="40" align="center" background="/design_packages/HDTT_Site_081308/images/gradient-two.gif" class="lighttext headline"><strong><a href="http://www.highdeftapetransfers.com/" class="lighttext">Store Home</a> | <a href="http://www.highdeftapetransfers.com/customers/" class="lighttext">My Account</a> | <a href="http://www.highdeftapetransfers.com/basket/" class="lighttext">View Basket</a> | <a href="http://www.highdeftapetransfers.com/checkout/" class="lighttext">Checkout</a> </strong></td>
</tr>
</table>
<table width="750" border="0" align="center" cellpadding="5" cellspacing="0" bgcolor="#616669">
<tr>
    <td class="lighttext"><strong>Your basket contains 0 products. </strong></td>
</tr>
</table>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td><strong><img src="/design_packages/HDTT_Site_081308/images/spacer.gif" width="20" height="10"></strong></td>
</tr>
</table>
<strong></strong>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td valign="top"><strong><a href="http://www.modularmerchant.com/clients/hdtt/category/63/Chamber-Music" target="_parent"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="/design_packages/HDTT_Site_081308/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/design_packages/HDTT_Site_081308/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="/javascript.php"></script></head>
<body>
Gramps

Vertical Menu position problem

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

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

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.

Problem with Vertical Menu Widget in Muse

Using the vertical menu widget in Muse, I want to make the submenu pop up under the parent item. The default action is to pop up to the right. How do I override this?

Thanks for posting this question - I too had this question, and I think I found a way to do this. Try using the "Padding" feature located on the Spacing panel. Looks like you can use this tool to move the location of the sub-menu group, Just make sure you have the sub-menu's selected first. Seems to have worked for what I was wanting to do. Hope this helps!
I will be posting a "new feature" request involving the menu widget, later on today. Check back later and vote in favor.

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

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

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

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

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

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

Menu problem with IE

menu problems with IE connected with spry - see site:
1.
http://www.whatwomenwant-tv.com/index.html
(horizontal menu bar - will not display fully, probably to do with
flash)
2.
http://www.whatwomenwant-tv.com/about.html
(horizontal menu bar swerves to the left)
3.
http://www.whatwomenwant-tv.com/streetinterviewswomen.html
(vertical menu bars in questions are all over the page)
thanks 4 help.

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

Context menu problem in ADF 11g

Hi All,
A context menu problem puzzle me. Following is the source,
=======================================
<af:tree id="tree" value="#{treeTest.collectionModel}" var="node"
contentDelivery="immediate"
disclosedRowKeys="#{treeTest.treeDisclosedRowKeys}"
rowDisclosureListener="#{treeTest.rowDisclosureListener}"
rowSelection="single">
<f:facet name="nodeStamp">
<af:group id="g1">
<af:image source="/image/#{node.treeLevel}.jpg" id="i1"
inlineStyle="width:16px; height:16px; vertical-align:middle;"/>
<af:outputText id="ddl" value="#{node.name}">
<af:showPopupBehavior popupId="myPopup" triggerType="contextMenu"/>
</af:outputText>
</af:group>
</f:facet>
<f:facet name="contextMenu">
<af:popup id="myPopup" popupFetchListener="#{treeTest.popupListener}"
contentDelivery="lazyUncached">
<af:switcher id="s1" facetName="#{treeTest.level}">
<f:facet name="1">
<af:menu text="menu 1" id="m1">
<af:forEach items="#{treeTest.menuItems['0']}" var="menuItemss">
<af:commandMenuItem text="#{menuItemss.name}"
actionListener="#{bindings.onNodeClicked.execute}"
disabled="#{!bindings.onNodeClicked.enabled}">
</af:commandMenuItem>
</af:forEach>
</af:menu>
</f:facet>
<f:facet name="2">
<af:menu text="menu 2" id="menu1">
<af:forEach items="#{treeTest.menuItems['1']}" var="menuItemss">
<af:commandMenuItem text="#{menuItemss.name}"
actionListener="#{bindings.onNodeClicked.execute}"
disabled="#{!bindings.onNodeClicked.enabled}">
</af:commandMenuItem>
</af:forEach>
</af:menu>
</f:facet>
</af:switcher>
</af:popup>
</f:facet>
</af:tree>
========================================================
I want to get the commandMenuItem tag's information, i use following code in onNodeClicked method try to get it,
FacesContext facesContext =FacesContext.getCurrentInstance();
ELContext elContext = facesContext.getELContext();
ExpressionFactory expressionFactory =facesContext.getApplication().getExpressionFactory();
ValueExpression exp =expressionFactory.createValueExpression(elContext,"#{menuItemss.name}", Object.class);
but the exp is null.
Please help me to solve this problem.
Thank you very much.
Edited by: Yitao Li on Dec 4, 2009 1:06 PM

You might need a #
ValueExpression exp =expressionFactory.createValueExpression(elContext,"#{menuItemss.name}", Object.class);

White flash in IE 7 with vertical menu

How do I get rid of the whitebox that flashes with a vertical
menu in IE 7?
This works fine in other browsers.
Here is a sample page
look
at in IE 7 to see the problem

I dont see anything flashing in IE7, FF, i only see the arrow
disapearing and showing on mouseover in IE6. or is this what u
mean?
Also im seeing your using /* SpryMenuBar.js - Revision: Spry
Preview Release 1.4 */ <-- 1.4
I suggest downloading version 1,6 and check if the problem is
still there.

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

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 Problem

Similar Messages

Maybe you are looking for