PDA

View Full Version : Newbie needs help with Verticle Spry Menu


Irimi-Ai
08-14-2008, 09:51 PM
Hi all,

First post here, and I need some help. I'm trying to do a simple verticle spry menu with a total of 3 levels (i.e., 2 levels of submenus). Everything is lined up the way I want, except for the lowest menu level. On rollover, this last level (the one labeled "Individual") appears on top of the 2nd level submenu (on top of "Therapy" to be exact). I want the lowest menu level to be exactly side-by-side with the 2nd menu level (like I have with the 1st and 2nd menu levels). Specifically, I want the 2nd menu level to keep it's current width (i.e., I don't want "Workshops/Presentations" to be word wrapped. I've been fiddling with this for days with no luck. Please help! Below is the code:



<!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="Spry Assets/SpryMenuBar.js" type="text/javascript"></script>
<link href="Spry Assets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>

<body>
<img src="" alt="" name="sdf" width="580" height="135" align="top" id="sdf" />
<ul id="Navigation" class="MenuBarVertical">
<li><a href="#">Home</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Services</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Therapy</a>
<ul>
<li><a href="#">Individual</a></li>
</ul>
</li>
<li><a href="#">Assessment</a></li>
<li><a href="#">Workshops/Presentations</a></li>
</ul>
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">What To Expect</a></li>
<li><a href="#">Getting Started</a></li>
<li><a href="#">FAQ</a> </li>
<li><a href="#">Contact</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("Navigation", {imgRight:"Spry Assets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>




Thank you for taking a look!

edbr
08-15-2008, 01:37 AM
Try This ,
<ul id="Navigation" class="MenuBarVertical">
<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="#">Therapy</a>
<ul>


<li><a class="MenuBarItemSubmenu" href="#">Therapy1</a>
<ul>
<li><a href="#">what_therapy</a></li>
<li><a href="#">This therapy</a></li>
</ul>
</li>
<li><a href="#">alternate therapy</a>
<ul>
<li><a href="#">what_alternate_therapy</a></li>
<li><a href="#">This_alternate_therapy</a></li>
</ul></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>

</ul>

Irimi-Ai
08-15-2008, 12:00 PM
Hmmm...tried your code and the lowest level menu items are still covering up the 2nd level menu when I mouse over the 2nd level submenu item. I think it's a problem in my CSS, now that I think of it. Here's the relevant section of my CSS file:


/* 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: 8.4em;
}
/* 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
{
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
background-color: #CC3300;
font-family: Arial;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
visibility: inherit;
margin: 0;
}
/* 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: 0 0 0 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 1em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
width: auto;
top: 0em;
left: 8.4em;
position: absolute;
white-space: nowrap;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
position: relative;
width: auto;
white-space: nowrap;
}


Basically, the 2nd level submenu is correct when NOT moused over, and looks like this:
Services ->

When I mouse over it, it looks like this:
ServicIndividual (the 3rd level menu being layered on top of the 2nd level menu)

I want it to look like:
Services -> Individual

I keep trying to shift the <ul> to the right so the 3rd level won't overlap the 2nd level, but that moves all <ul> levels to the right. That then creates a gap betweent the first level of the menu and the 2nd level.

edbr
08-19-2008, 02:17 AM
where you have
/* 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: 0 0 0 0;try
margin: -5% 0 0 95%;

Irimi-Ai
08-19-2008, 05:05 PM
Ok, got the alignment issues sorted out. Now I'm running into another problem. I'm having issues with IE (6 & 7...surprise, surprise). I think it has to do with the whitespace:nowrap on the 2nd level menu items. 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:
http://img517.imageshack.us/img517/6674/menuiniecopywc6.jpg

This is how it looks in Opera (correct):
http://img517.imageshack.us/img517/2713/menuinoperaln3.jpg

How do I get IE to display it exactly like it is in Opera?


Here's the CSS I have:
@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;
}
}



Here's the HTML I have:
<!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="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="MenuBar1" class="MenuBarVertical">
<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="#">really really long menu name</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Irimi-Ai
08-21-2008, 02:40 PM
bumpity bump