logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-14-2008, 09:51 PM   #1
Irimi-Ai
 
Join Date: Aug 2008
Posts: 4
Question Newbie needs help with Verticle Spry Menu

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:

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!
Irimi-Ai is offline   Reply With Quote
Old 08-15-2008, 01:37 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

Try This ,
Code:
 <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>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 08-15-2008, 12:00 PM   #3
Irimi-Ai
 
Join Date: Aug 2008
Posts: 4
Question

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:

Code:
/* 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.

Last edited by Irimi-Ai; 08-15-2008 at 12:05 PM..
Irimi-Ai is offline   Reply With Quote
Old 08-19-2008, 02:17 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

where you have
Code:
/* 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
Code:
margin: -5% 0 0 95%;
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 08-19-2008, 05:05 PM   #5
Irimi-Ai
 
Join Date: Aug 2008
Posts: 4
Question

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:


This is how it looks in Opera (correct):


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


Here's the CSS I have:
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: 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:
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="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 is offline   Reply With Quote
Old 08-21-2008, 02:40 PM   #6
Irimi-Ai
 
Join Date: Aug 2008
Posts: 4
Default

bumpity bump
Irimi-Ai is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:47 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com