Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   Newbie needs help with Verticle Spry Menu (http://www.dreamweaverclub.com/forum//showthread.php?t=28554)

Irimi-Ai 08-14-2008 09:51 PM

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!

edbr 08-15-2008 01:37 AM

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>


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:

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.

edbr 08-19-2008 02:17 AM

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%;

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/6...niecopywc6.jpg

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

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 08-21-2008 02:40 PM

bumpity bump


All times are GMT. The time now is 08:48 PM.

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