How do I make the menu bar for selected page different?

HobokenBob · Apr 20, 2009

How do I have the menu bar that the page is on different from the others?
It is a basic spry menu (SpryMenuBarHorizontal.css)
The menu bars are gray with black text. When the mouse hovers over a menu bar it turns black with white text.
If I'm on the home page I want the "Home" menu bar to be black with white text while the others are still gray.
If I'm on the "About Us" page I want that menu bar to be black with white text while the others are still gray, etc.

Also when I delete the link to a menu bar (the index.html link on the "Home" page) the menu box turns black and gets smaller.
I have 8 menus bars set on auto width.
Thanks.

lebisol · May 6, 2009

I am not sure what DW spits out as far as css but you can consider this pure css approach:

http://css-tricks.com/video-screencasts/36-current-nav-highlighting-using-php-to-set-the-body-id/

fauntleroy · May 6, 2009

I believe for Spry, you'd need multiple "Spry Assets" folders (with different names) for your multiple menus to point to. sounds like torture to me.

darrellblackhawk · May 7, 2009

Do you have any dynamic programming capabilities on the site?

Cheech · May 15, 2009

By adding a bit into the CSS you can set an active state.
Have a look at the page and css below to see how this has been achieved.
Page, look at lines 20, 22 and 24 for the id tags (different id's for validation)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<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" id="current1" href="#">Item 3</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" id="current2"  href="#">Item 3.1</a>
            <ul>
              <li><a id="current3" 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="#">Item 3.3</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>

CSS, look at the #current1/2/3 declarations at the bottom of the file.

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: [URL unfurl="true"]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/URL] */
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: 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;
}

/*******************************************************************************

 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;
	}
}
#current1, #current2, #current3 {
background-color:#00FF00;
color:#FF0000;
}

BTW the hideous green is just for demo..

All the best Cheech (I thought you would have got that one Lebisol!!!!!)

[Peace][Pipe]

lebisol · May 15, 2009

lol @Cheeeeech, I thought you were MIA.
Have to admit DW has fallen of my list of tools and spry...well, who needs it when there is jquery ;-)
but the link I provided breaks down to basics of css usage.

Then again this is why we have you here man!

Cheech · May 18, 2009

I am humbled by your praise ;-p
I'll try to remember to have msn logged on.
Give me a shout.

[Peace][Pipe]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I make the menu bar for selected page different?

HobokenBob

Programmer

lebisol

IS-IT--Management

fauntleroy

Technical User

darrellblackhawk

Programmer

Cheech

Technical User

lebisol

IS-IT--Management

Cheech

Technical User

Similar threads

Part and Inventory Search

Sponsor