IE Issue Using Vertical Menu

I wonder whether someone can help me. I have used spry menu in dreamweaver and works ok in Safari and Firefox however in IE 7 the menu appears in two lines. You can see this on www.sancere.com/index and also when you click onto Asian weddings. Is there something I can do to stop this.
I have enclosed the IE css
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
f\loat: left;
Also I want to highlight the current page in a colour to help indicate what page you are on how can I do this?

The link above is broken to due to the lack of a file extension.
Should be www.sancere.com/index.html
Removing this hack works for me in IE7 and IE8:
/* 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
f\loat: left;

Similar Messages

Vertical menu using javascript and css

Hi all,
I have to build a vertical top-level menu for a customer. for a few days I surfing the internet to find a good sample. The only sample I found is http://javascript.internet.com/navigation/expanding-menu.html. this is what the customer wants. But this sample has just one level of subitems. I need a sample or source with dynamical levels of subitems. I'am not so formiliar with javascript and css to build it by my own very quickly.
Has someone a sample for me or can someone change the sample so that I can use it in my toplevel menu.
Richard

Richard,
       Are you trying to implement this vertical menu at Portal's Top Level Navigation? If so, please be aware that these menu's might run into issues which SAP will not support.
        Also, there might be issues with upgrades on your portal. We have encountered the same for your client implementation and had to finally decided against the idea until SAP released their own version.
       Hope this helps.
Regards,
Winston
PS: reward points if you find this useful

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.

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;

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!

Force vertical menu bar to stay open on loaded pages

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

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

Vertical Menu Spry

Design a vertical menu spry with DW CS3. The menu is shorter
in height than the default, font is designed smaller and bold. Menu
looks fine in preview, but reverts back to default in browser after
uploading to site. Followed the instructions in the Help, but
missed something.
margin - 0
padding - 0
float - none
What else can I tell you to help figure out issue?
http://www.amvetspost29.com
Thank you.....

In SpryMenuBarVertical.css change the following style:
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
The value of left needs to be changed to a negative value equal to the width of the menu and submenu. Using the default styles, it should be changed to -15.9em.
You'll also need to change the submenu indicators. There are two style rules involved:
ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
ul.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
You will need to replace SpryMenuBarRight.gif and SpryMenuBarRightHover.gif with images of left-facing arrows. Also change the background-position in both style rules to 5% 50%.
By the way, you should be aware of the fact that Adobe announced a couple of months ago that it no longer plans to invest in the development of Spry. Although your menus should work, Adobe plans to remove Spry menus from the next major version of Dreamweaver.

Generic vertical menu-list in ADF application

Hi All,
I am trying to create a generic vertical menu for my application. I follow the best practices given in Oracle docs and don't seem to get it right. I have a panelAccordion and several child showDetailItem components in it. Within each showDetailItem I have several commandlinks (I could not find a suitable component to replace the commandlink). I have attached the jspx template code for review. I have several issues
1) I want to display all the showDetailItems and child commandlinks taking geometry and screen resolution into account. I tried playing around with the flex and InflexibleHeight attribute without much success. Is there way I can force the framework to do the geometry space allocation for each showDetailItem for me. The problem seems to be the showDetailItem on monitors with different resolution flows out of the page even if sufficient space is available to display everything. How to handle this?
2) Is there a substitute component for the commandlink component. I want the user to click on that component to take them to specific screens. I don't want the underline of the commandlink. It should looks like neat tiles one under the other.
To achieve this I even tried playing around with the skinning.css. I am using simple skin and want to extend on it.
Is there a sample example out somewhere which will help?
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<af:pageTemplateDef var="attrs">
<af:xmlContent>
<component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
<display-name>VacarTemplate</display-name>
<facet>
<facet-name>center</facet-name>
</facet>
</component>
</af:xmlContent>
<af:panelStretchLayout topHeight="107px" bottomHeight="50px" id="pt_psl1">
<f:facet name="top">
<af:image source="/images/vacarhead.JPG" id="pt_i2"/>
</f:facet>
<f:facet name="center">
<af:decorativeBox theme="dark" id="pt_db1">
<f:facet name="center">
<af:panelSplitter splitterPosition="190" id="pt_ps1">
<f:facet name="first">
<af:panelAccordion id="pt_pa1" discloseMany="true"
dimensionsFrom="parent">
<af:showDetailItem text="Main Menu" id="pt_sdi1"
inlineStyle="font-family:Arial, Helvetica, sans-serif; background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="1">
<af:group id="pt_g2">
<af:commandLink text="Home" id="pt_cl13"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s13"/>
<af:commandLink text="Case Search" id="pt_cl14"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="pt_s14"/>
<af:commandLink text="Import Cases" id="pt_cl16"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="pt_s16"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Data Maintenance" id="pt_sdi5"
inlineStyle="background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="3">
<af:group id="pt_g3">
<af:commandLink text="Questionnaires" id="commandLink1"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="separator1"/>
<af:commandLink text="Reference Codes" id="commandLink2"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="separator2"/>
<af:commandLink text="Employees" id="commandLink3"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="separator3"/>
<af:commandLink text="Error Messages" id="commandLink4"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="separator4"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Cases" id="pt_sdi6"
inlineStyle="background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="1">
<af:group id="pt_g4">
<af:commandLink text="Cases" id="commandLink5"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="separator5"/>
<af:commandLink text="Teams" id="commandLink6"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="separator6"/>
<af:commandLink text="Case Audit" id="commandLink7"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="separator7"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Patient" id="pt_sdi2"
inlineStyle="font-family:Arial, Helvetica, sans-serif; background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="5">
<af:group id="pt_g5">
<af:commandLink text="Patient" id="pt_cl1"
inlineStyle="font-weight:bold; text-align:right; font-size:small;"/>
<af:separator id="pt_s3"/>
<af:commandLink text="Contacts" id="pt_cl2"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s1"/>
<af:commandLink text="Arrest" id="pt_cl3"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s2"/>
<af:commandLink text="Trauma" id="pt_cl4"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s4"/>
<af:commandLink text="Mx" id="pt_cl5"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s5"/>
<af:commandLink text="VSS" id="pt_cl6"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s6"/>
<af:commandLink text="Destination" id="pt_cl7"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s7"/>
<af:commandLink text="Hospital" id="pt_cl8"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s8"/>
<af:commandLink text="Clinical Trial" id="pt_cl9"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s9"/>
<af:commandLink text="QOL Survey" id="pt_cl10"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s10"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Reporting" id="pt_sdi3"
inlineStyle="font-family:Arial, Helvetica, sans-serif; background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="1">
<af:group id="pt_g6">
<af:commandLink text="Standard Reports" id="pt_cl11"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="pt_s11"/>
<af:commandLink text="Ad-Hoc Reporting" id="pt_cl12"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="pt_s12"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Documentation" id="pt_sdi7"
inlineStyle="background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="1">
<af:group id="pt_g7">
<af:commandLink text="User Guide" id="commandLink8"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="separator8"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Search" disclosed="true" id="pt_sdi4"
inflexibleHeight="10" flex="1">
<af:panelGroupLayout
id="pt_pgl1">
<af:panelFormLayout maxColumns="1" id="pt_pfl1">
<af:inputText id="pt_it1"/>
<af:commandButton partialSubmit="true" text="Find Case"
id="pt_cb3"/>
</af:panelFormLayout>
</af:panelGroupLayout>
</af:showDetailItem>
</af:panelAccordion>
</f:facet>
<f:facet name="second">
<af:decorativeBox theme="medium" id="pt_db2" topHeight="30px">
<f:facet name="center">
<af:facetRef facetName="center"/>
</f:facet>
<f:facet name="top">
<af:panelGroupLayout id="pt_pgl2" halign="end"
layout="horizontal">
<af:outputText value=" Currently Logged In: #{sessionScope.user}" id="pt_ot1"
noWrap="true"
visible="#{not empty sessionScope.user}"/>
<af:spacer width="10" height="10" id="pt_s17"/>
<af:commandLink text="Login?" id="pt_cl15"
visible="#{empty sessionScope.user}"/>
<af:commandLink text="Logout"
id="commandLink9"
visible="#{not empty sessionScope.user}"
action="#{Main.onLogoutButtonPressed}"/>
</af:panelGroupLayout>
</f:facet>
</af:decorativeBox>
</f:facet>
</af:panelSplitter>
</f:facet>
</af:decorativeBox>
</f:facet>
<f:facet name="bottom">
<af:panelFormLayout id="pt_pfl2" maxColumns="4" rows="1">
<f:facet name="footer">
<af:group id="pt_g1">
<af:outputFormatted value="Copyright &copy; 2010 VACAR" id="pt_of1"
styleUsage="pageStamp"/>
</af:group>
</f:facet>
</af:panelFormLayout>
</f:facet>
</af:panelStretchLayout>
</af:pageTemplateDef>
</jsp:root>
Thanks
Edited by: user5108636 on Feb 8, 2011 6:51 PM

I want to remove the '+' and the '-' from the showDetailItem. Should I tweak the css file.
Thanks

Vertical Menu Bar Component

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

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

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.

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 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.

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.

Question on spry vertical menu bar backgrounds

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

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

Navigation in Spry Vertical menu is horizontal at bottom of page in IE8

My vertical menu appears correctly in Firefox and Safari but when I checked it from Internte Explorer 8 on a PC it doesn't show up in the left column as it's supposed to; instead it shows up horizontally at the bottom of the content area, just above the footer. Here's a link: http://www.tabardtheatre.org/aboutUs.html .
Is there a hack I can use to correct this?

Hope this from the Chrome forum helps.
http://www.google.com/support/forum/p/Chrome/thread?tid=6d78452432a4c4d7&hl=en

IE Issue Using Vertical Menu

Similar Messages

Maybe you are looking for