Background image in Spry dropdown menu

Hey everyone,
I am at my wits end. I am converting an old table-based page to a css standards-compliant page and need to use a spry drop-down menu but can't get a background image to show up in the menu. If the top-most level has no submenu, then the background image shows up fine. But if I have a submenu, then no background image will display. I have put a background image in every place I can think of in the css for the menu, but it won't show up. I have googled for a solution, read the documentation on the spry menus, as well as searched through the Dreamweaver forum to no avail.
Does anyone know how to do this? If it is not possible, can someone let me know that?
Here is the page: http://www.sportplanesflorida.com/index_css.php (notice how the "Learn to Fly" tab has no background image).
Thanks for your help.
Mike

remove the background-position:95% 50%; from your css.
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
background-position:95% 50%;
background-repeat:no-repeat;

Similar Messages

Background images with spry "horizontal menu"

hi again
I am trying to work with the spry: "horizontal menu"
I want to put some background images into the menu bar not into the submenu
and that is the problem: the background images appears overall
what can I do ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
    <ul>
      <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
      <li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
and css
ul.MenuBarHorizontal
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     cursor: default;
     width: auto;
/* 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 a fixed width */
ul.MenuBarHorizontal li
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     position: relative;
     text-align: center;
     cursor: pointer;
     width: 100px;
     float: left;
     height: 10px;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     z-index: 1020;
     cursor: default;
     width: 100px;
     position: absolute;
     left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
     left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
     width: 100px;
     height: 30px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
     position: absolute;
     margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
     left: auto;
     top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
     border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
     display: block;
     cursor: pointer;
     background-color: #FEF3E4;
     padding: 0.5em 0.75em;
     color: #FFF;
     text-decoration: none;
     background-repeat: no-repeat;
     background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
     color: #FF0;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
     background-color: #FEF3E4;
     color: #FF0;
     background-image: url(../rot.jpg);
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.MenuBarHorizontal a.MenuBarItemSubmenu
     background-color: #FEF3E4;
/* 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.MenuBarHorizontal ul a.MenuBarItemSubmenu
     background-color: #0F9;
/* 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
     background-color: #FEF3E4;
     color: #FF0;
/* 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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
     background-color: #F99;
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.MenuBarHorizontal 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.MenuBarHorizontal li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;

Complete page and css code below (scroll down)
All you should be concerned with at this moment to get the background image to appear in the top level anchor is the css style below:
/* 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.MenuBarHorizontal a.MenuBarItemSubmenu
background-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
I've added the background-postion because presumably you want it to appear flush left. This overides the out-of-the-box setting which positions it 95% far left.
Here is the code and css:
<!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/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<style type="text/css">

</style>
<style>
ul.MenuBarHorizontal
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     cursor: default;
     width: auto;
/* 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 a fixed width */
ul.MenuBarHorizontal li
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     position: relative;
     text-align: center;
     cursor: pointer;
     width: 100px;
     float: left;
     height: 10px;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     z-index: 1020;
     cursor: default;
     width: 100px;
     position: absolute;
     left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
     left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
     width: 100px;
     height: 30px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
     position: absolute;
     margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
     left: auto;
     top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
     border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
     display: block;
     cursor: pointer;
     background-color: #FEF3E4;
     padding: 0.5em 0.75em;
     color: #FFF;
     text-decoration: none;
     background-repeat: no-repeat;
     background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
     color: #FF0;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
     background-color: #FEF3E4;
     color: #FF0;
     background-image: url(../rot.jpg);
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.MenuBarHorizontal a.MenuBarItemSubmenu
background-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
/* 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.MenuBarHorizontal ul a.MenuBarItemSubmenu
     background-color: #0F9;
/* 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
     background-color: #FEF3E4;
     color: #FF0;
/* 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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
     background-color: #F99;
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.MenuBarHorizontal iframe
     position: absolute;
     z-index: 1010;
     filter:alpha(opacity:0.1);
</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
    <ul>
      <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
      <li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Spry Dropdown Menu properties hidden

I am trying to create a spry dropdown menu but cannot see the light blue menu thing that you click on to edit the spry menu, and so therefore cannot edit it. It should pop up when you hover over the spry menu in design view but I get nothing. Please help

See if this works:
Place your cursor inside on of the menu items, look at the tag above the Property Inspector and you'll see the <ul.MenuBarHorizontal#MenuBar1> tag.
(if it's a vertical menu, it'll say vertical instead of horizontal :-)
Click on the tag - does the editing box for the menu then show up?

Background Image in Spry Menu

Hi everyone,
I'm really struggling with this Spry Horizontal Menu thing. I tried to read thru some other people's duscussions but I got lost.
I just want to add a gradient image instead of a plain color background. Now, I did achieved that on the main level items but as soon as I add submenus, the background image dissapear from the main items and shows on the submenus. That's it. I hope this is easy enough to fix.
I'm not that familiar with CSS and by looking at some samples, the CSS code is embedded in the same HTML page where the menu bar is. Isn't supposed to be on it's own CSS page? And one more thing, can the horizontal menu be inside a table? And if not, how can I center it on the page?
I'm a beginner so please be gentle... : )
Thanks

This is good but my problem is that my background image dissapear from the main menu item as soon as I add a submenu item... everything else seems to work just fine. About the question if the menu could go inside a table or if has to be out side of it, how can I centered it on the page?
thx

Adding background image to Spry Menu Bar?

Hi Everyone,
I have a question concerning adding a background image to a horizontal spry menu.
1) I am using Dreamweaver CS4.
2) I am inserting this menu bar on a HTML document.
3) I have created and am using an external style sheet (CSS)
I am not sure on which style(s) ("ul.*) to edit in order to acheive this.
I have a total of four(4) different images I would like to use, they are...
1) Horizontal Menu Bar (main menu bar)
2) Horizontal Menu Bar - Rollover
3) Submenu
4) Submenu - Rollover
Also I would like the text to be centered on the button.
I have somewhat acheived this using the instructions for "customize this widget", yet the image "repeats" because the button is larger than the image.
I have not tried to center the text, this may be a very simple thing, if so just let me know.
What I dont know, and was hoping someone could tell me, is which style(s) ("ul.*) to edit in order to acheive this.
If anyone needs anymore information, just let me know and I will give it to you as soon as possible.
Also I have attached three(3) of the four(4) pictures I would like to use. (this is the maximum)
Any help will be greatly appreciated,
Musicman1994

I'd like to thank everyone with their help so far, but I am still having trouble.
I have tried both suggestions and the results are...
The one suggested by dhvani2511 gave me this...
(The cursur is over "Item 1" it is not blue when a cursur is not over it.)
I would like the image to "be" the button, not just "in" it,if that makes sense.
I have slightly tried the one suggested by .V1 but being that I am new to dreamweaver, code, etc. I am not sure where to copy/paste the code that you gave me.
Does anyone have anymore information?
Thanks,
Musicman1994

SPRY dropdown menu dont appear in IE

I know its been asked to death but can someone give me a hint how to solve this. Have tried everything posted, updated to new spry 1.6 etc.
It jsut shows a white frame with the message: false, whr the menu is supposed to be.
www.dykningithailand.com/dansk/dykning-thailand.html
here is my css:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
body {
background-color:#4286C8;
padding:0;
margin:0;
text-align:center;
#wrapper {
margin: 0px auto;
padding: 0;
background-color:#000000;
width: 1000px;
text-align:left;
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 1000px;
background-color: #4286C8;
/* 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 a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
z-index: 1020;
cursor: pointer;
width: 142px;
float: left;
background-color: #4286C8;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
top: 0
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 142px;
position: absolute;
left: -1000em;
background-color: #4286C8;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
top: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 142px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #3170BF;
color: #FFFFFF;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
font-weight: normal;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 2px;
letter-spacing: 0.1em;
padding-left: 3px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #036;
color: #FFF;
font-weight: normal;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
font-size: 10px;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #036;
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
text-decoration: none;
font-size: 10px;
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.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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.MenuBarHorizontal ul 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.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.MenuBarHorizontal ul 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.MenuBarHorizontal 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.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

You have changed this style:
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
If you change left back to 0, it should work again. Notice that the comment states "we set left to 0 so it comes onto the screen".
Beth

Spry dropdown menu not dropping down and reversing order cs4

Hi, thank you for reading my post.
I am having problems with my spry menu bar not dropping down when
I upload it to my site, I get bulleted lists. When I preview it, it works fine. Also, the menu is in reverse order (??) I've tried retyping it in the opposite order to see if that fixes it, but somehow it goes back to backwards. It should start with home at the left. I am trying to post my code, but it will not let me paste. How do I paste code? Sorry if thats a silly question.
Thank you

Hi, thank you for your replies. I set everything to left, which caused it to display correctly in dreamweaver. Thank you! I did enjoy the "wiggle" that I get from the menu items on hover, they move from right to left, will that cause problems if I change one back to right? I still am having trouble getting the menu bar to show on the website, Im still getting bullets.
How do I put the css files? They might be on the site, but not in the right place, where should they be? I also made another site from the same template, and saved it to a folder in my site so it can be previewed. Will that cause problems? Both spry's are not working..... argh! Thank you to everyone for your help, I appreciate it, this is my first time using the spry menu feature. Thank you for the help on posting code. Here is a link to the site and the code:
www.holly-parker.com
JAVA:
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
     (ua.match(/linux/i) ? "linux" :
     (ua.match(/mac/i) ? "mac" :
     ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
   document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
   if (typeof this[k] == 'undefined')
    var rollover = new Image;
    rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
   if (i > 0 && this.enableKeyboardNavigation)
    items[i].getElementsByTagName('a')[0].tabIndex='-1';
   this.initialize(items[i], element);
   if(Spry.is.ie)
    this.addClassName(items[i], this.isieClass);
    items[i].style.position = "static";
if (this.enableKeyboardNavigation)
   var self = this;
   this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
   if(this.hasClassName(this.element, this.verticalClass))
    this.element.style.position = "relative";
   var linkitems = this.element.getElementsByTagName('a');
   for(var i=0; i<linkitems.length; i++)
    linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
   element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
   element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
   if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
    menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
   this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
   menu.style.top = '';
   menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
   this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
   // this refers to the list item
   if(testNode == null)
    return false;
   if(testNode == this)
    return true;
   else
    return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
   var tmp = el;
   while (tmp != this.element)
    if (tmp == item)
     return;
    try{
     tmp = tmp.parentNode;
    }catch(err){break;}
   item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
   found = this.getElementForKey(opts, 'y', 1);
   break;
case this.downKeyCode:
   found = this.getElementForKey(opts, 'y', -1);
   break;
case this.leftKeyCode:
   found = this.getElementForKey(opts, 'x', 1);
   break;
case this.rightKeyCode:
   found = this.getElementForKey(opts, 'x', -1);
   break;
case this.escKeyCode:
case 9:
   this.clearSelection();
   this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
   //subopts
   this.mouseOver(listitem, e);
   break;
case 2:
   //parent
   this.mouseOut(opts[2], e);
   break;
case 3:
case 4:
   // left - right
   this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
   break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
        //stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
   clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
   var self = this;
   listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
   link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
   continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
   continue;
if (els[i])
   var tmp = rect(els[i]);
   if ( (dir * tmp[prop]) < (dir * ref[prop]))
    ref = tmp;
    found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
   if(isFirstEntry)
    camelizedString = oStringList[i];
    isFirstEntry = false;
   else
    var s = oStringList[i];
    camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
   value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
   if (document.defaultView && document.defaultView.getComputedStyle)
    var css = document.defaultView.getComputedStyle(element, null);
    value = css ? css.getPropertyValue(prop) : null;
   else if (element.currentStyle)
     value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
   while (parent) {
    ret.x += parent.offsetLeft;
    ret.y += parent.offsetTop;
    parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
   ret.y -= doc.body.offsetTop;
if (el.parentNode)
   parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
   cas = parent.nodeName.toUpperCase();
   ret.x -= parent.scrollLeft;
   ret.y -= parent.scrollTop;
   if (parent.parentNode)
    parent = parent.parentNode;
   else
    parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
   continue;
obj[optionName] = optionsObj[optionName];
CSS:
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 14px;
cursor: default;
color: #FCC;
background-color: #000;
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
font-weight: bold;
text-align: center;
float: left;
width: 880px;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
text-align: center;
cursor: pointer;
width: 145.8px;
background-color: #000;
color: #FCC;
float: left;
/* 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;
background-color: #000;
color: #FCC;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 145.8px;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
color: #FCC;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 145.8px;
clear: left;
float: left;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 0;
top: 0;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #000;
padding: 0.5em 0.75em;
color: #FCC;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #333;
color: #FFF;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
text-align: right;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #000;
color: #FCC;
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.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
color: #FCC;
/* 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.MenuBarHorizontal ul 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.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.MenuBarHorizontal ul 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.MenuBarHorizontal 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.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #000;
Home page 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>Holly Parker - Fashion, Commercial, Swim, Runway Model Los Angeles</title>




<style type="text/css">

</style>

<script src="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
    <h1><img src="images/holly-logo-top.jpg" width="875" height="139" /></h1>
    <table width="800" border="0" cellspacing="0" cellpadding="4">
      <tr>
        <td align="right" valign="middle" bgcolor="#FFE8FF" class="navigation">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="index.html">MAIN</a></li>
            <li><a href="pone.html" class="MenuBarItemSubmenu">PHOTOS</a>
              <ul>
                <li><a href="pone.html">Un</a></li>
                <li><a href="ptwo.html">Deux</a></li>
                <li><a href="pthree.html">Trois</a></li>
                <li><a href="pfour.html">Quatre</a></li>
              </ul>
            </li>
            <li><a href="me.html">ME</a>            </li>
            <li><a href="connect.html">CONNECT</a></li>
            <li><a href="links.html">LINKS</a></li>
            <li><a href="video.html">VIDEO</a></li>
          </ul>
        </td>
      </tr>
    </table>
    
</div>
<div id="mainContent">
    <p><img src="images/holly-parker-pink-beauty-web.jpg" width="265" height="349" /></p>

</div>
<div id="footer">
    <p>HOLLY PARKER © 2010 ALL RIGHTS RESERVED </p>
</div></div>
<script type="text/javascript">

      </script>
</body>
</html>

Using Images in Spry Dropdown Menus??????

I am in the middle of making a web site that needs a drop down menu for one of the top navigation menu buttons, when I designed the web site I created my own buttons (images) in photo shop. When I went to create me navigation bar I tried to insert images in the spry menu bar, so that I can have my imaged and have the drop down menu but that didn't work, so then I tried to use a table and insert the images there and in the cell that needs the drop down bar I put in a spry menu bar but that through the whole navigation bar off. Can anyone help or does anyone know how to use images in spry drop down menus that can help me have the look I want and the drop down menu?

Have a look here http://www.adobe.com/devnet/dreamweaver/articles/spry_widgets_design_04.html
I hope it helps.
Ben

Spry dropdown menu only works fully in Safari...

http://www.charlespatrickjewelers.com/jewelry_pages/rings.html
That is the link to my page. I have spry dropdowns set on the navbar for Rings, Bracelets, and watches.
In IE and Firefox, only the rings dropdown is working, but for Safari every dropdown works. Can someone help me fix this?
Thank you all!
Aza

Well, someone on another forum suggested I use css rollovers because both the spry and the swap image used the mouseover event, but I changed it and that didn't work. Can anyone here tell me why my spry navbar doesn't work in ie and Firefox?

IE 7 - CSS Issues with Spry dropdown Menu *HELP*

I am using a spry horizontal dropdown menu generated in DW. The menus look consistant in all other browsers except ie7 - When the drop down menu occurs they all appear to the right and not directly under its menu item.. Looked around in the Css and i cant seem to find the right rule to make the change in ie7 only... was planning on using a css conditional statement to shift them left.. But im not having any luck.. HELP!
Thanks so much in advance!

Sorry.. Here is the link.. Thanks so much for your willingness to help!
http://soldesign.us/_working/WEBSITE_BoulderPlasticSurgery/index.html

Spry Dropdown Menu problem in Mobile Safari (iPad)

I've used the stack SpryMenuBar.js in Dreamweaver to create a dropdown menu for a client (XponentMD.com).
When I Did a pass to optimize the site for the iPad, I found that the menu does not work properly. When you touch the top-level category, you go directly to the linked page and don't trigger the dropdown categories. I believe is it because the touch screen interface does not recognize focus and blur events.
It there and updated version of the SpryMenuBar.js that accommodates touch screen browsers like mobile Safari?

Thanks for your answers.
Looks like the browser on iPad simulator doesn't behave like the real touch device, because on iPad itself definitely all unmodified Spry 2.0 menus and also that example ( http://nwneighborhoodvet.com/ ) don't work properly. When I touch "About Us" on http://nwneighborhoodvet.com/, then it immediately loads http://nwneighborhoodvet.com/pages/about-us.html instead of displaying the drop down menu.
Somehow I also don't understand your versioning scheme. I downloaded today again the so called Spry 2.0 Dropdown Menu with the Widget Browser and when I install it on my site the directory with the CSS and Javascripts inside is called Spry-UI-1.7. When this is supposed to be Spry 2.0, why don't you call it Spry-UI-2.7 or 2.0.7 or something similar? Or do I get the wrong version from that strange Widget Browser/Dreamweaver CS5?
My test page (should be unmodified and it's not formatted properly at the moment) is http://www.safeexambrowser.org/Templates/main-D.dwt, also doesn't work properly on iPad.
This is a example (jQuery Superfish) which is actually working on iPad: http://users.tpg.com.au/j_birch/plugins/superfish/#examples (see the menu below "The result:".

Spry dropdown menu problem

I've been working on a drop down menu for a site for a few
months now. I'm using the Spry Widget. I can't seem to get it
working right. I had used the drop down menu feature without
problems in CS2, but now that I have CS3, I'm having problems. I
use a Mac and am checking the site on a PC. The problem is in IE on
the PC.
Here is the site and page with the problem:
http://www.nectfarmersmarket.org/farms.html
The menu item "Participating Farms" has a drop down menu.
Everything works fine on my Mac using FF and Safari. On the PC,
using IE, only some of the links to the page anchors work in the
drop down menu. The ones that don't work for me are: Duhamel Farm,
Palazzi, Stone Farm, and Woodstock Farm.
Since I assume it's user error :), today I recreated the page
and the dropdown menu again from scratch:
http://www.nectfarmersmarket.org/farmsC.html.
And now more links don't work. These are the ones that don't work
on this test page: Duhamel, Palazzi, Rachels, Stone and Woodstock.
I have posted about this a while back, but I still can't
figure it out and my client is getting a little impatient.
TIA!

In regards to the validation if you put that page through
right now you will get a few errors. I will try to give them a
quick rundown.
- HR tags should look like <hr /> instead of <hr>
which you have now. This is because there is no ending tag with HR
tags so XHTML puts an end in the tag <hr />.
-One error is a missing v in a closing div tag. You have
</di> instead of </div>.
-The final is with table tags, but with a quick glance I
can't tell which tags are duplicate. Basically it appears as though
there are one too many sets of closing tags. Would have to look
closer at this to solve.
In regards to the Drop-Down and anchors you may want to post
this over at the Adobe Spry Forums because this is an odd issue and
may be something that we have overlooked. So head over and post the
link to the page so that they can see on that forum:
http://www.adobe.com/go/labs_spry_pr1_forum
Outside of that I really don't know what to say without
rebuilding the menu from scratch and building a page locally on my
test server which I won't really have time to do until probably the
weekend and I know you want this solved as soon as possible. Wish
there was more I could tell you but this has me stumped.

Spry Menu Bar - Different Background Image Wanted for menu items

Hi, I've looked everywhere for help with this and just haven't found any answers yet ...
I want my Dreamweaver CS5.5 menu to look like this design I've done in PhotoShop ...
It's a simple one level list with no sub-levels.
Everything is good, except I can only set one background image for all the menu items at this level.
I want the first, last, and all the middle, menu items to use different background images.
I have no idea where or how to insert the code to set a different background image for each individual menu item ...
I know I could use images set one on top another in a column with rollover image swop, but the spry menu opens the door for dynamic content so I'm keen to get it working.
Manchester city council has a great example of this style of menu design working at - http://www.manchester.gov.uk/
They've got funky indenting of the text as well.
~~~~~~
This is the code for my menu list ...
<div class="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Groups</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
         <li><a href="#">Help</a></li>
    </ul>
</div>
This is how I set the background image (but I can only define one image) ...
I set the image background to "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg" through ...
CSS Styles
SpryMenuBarVertical.css
ul.MenuBarVertical a
I then select the background category
and browse to the image file.
doing this changes my CSS code as follows ...
ul.MenuBarVertical li
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 170px;
    margin-top: 4px;
    margin-bottom: 4px;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical ul
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 170px;
    left: -1000em;
    top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #0000;
    text-decoration: none;
    font: normal 12px Verdana, Geneva, sans-serif;
    background: #EEE url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
~~~~~~
These are the three images I want to apply to the top middle and bottom menu items :
Top menu item background image - "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg"
Middle menu items background image - "Menu-Nav-Bar-Pic-Mid-v1-w170px-h32px.jpg"
Bottom menu item background image - "Menu-Nav-Bar-Pic-Bot-v1-w170px-h32px.jpg"
~~~~~~
As I am unable to set the menu items individually, this is how the menu looks like on my website at the moment ...
~~~~~~
So near yet so far ! I'm hapy with the verdana font, the image size and spacing, but the background images I just can't set them right.
I'd really appreciate any help on this as I'm out of ideas.
Thank you.

The easiest way is to use pseudo elements.
To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
<!DOCTYPE HTML>
<html>
<head>
<meta 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">
<style>
ul.MenuBarVertical li:first-child a {
    background-color: red;
    color: white;
ul.MenuBarVertical li:last-child a {
    background-color: green;
    color: yellow;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
In your case, in liue of the background colour, you would have an image.
Gramps

Spry widget menu bar background image help

Does anyone know of a good tutorial for putting a background image behind the whole menu bar, not just each button, and a tutorial for putting images behind each button.
Also, does anyone have a good tutorial on creating some sort of gallery, with thumbnails, in dreamweaver.
Thank you, using cs4

You can start here for your spry menu.
http://livedocs.adobe.com/en_US/Spry/SDG/index.html
You can also use a background image in the container that you have your SM in. You can use in in conjuction with, or in place of images for the menu.
For the gallery, I would look at third party products.
gary

IWeb 08: Static horizontal menu with background image

Hi
I want to make a static horizonal menu bar. I want to have a 800px x 40px black bar that has a background image from the same size. The reason of a background image is because I want a logo to be in that menu. I have searched in google for samples but I haven´t been able to find one that is simple and that I can incorporate the logo in the background. Can somebody tell me a link to a place to get this or tell me a code ? I don´t know html thou
thank you in advance

Don't really understand exactly what you are asking here? Why do you need any code to create a menu bar? You can do this very easily in iWeb.
To create a menu bar:
1. Open your page in iWeb and then open the Inspector and go to Page and click on 'Hide from menu' and 'Don't include in menu and this will turn off the iWeb built in template navigation menu.
2. To create your own menu bar, simply use either a text box or a shape and make it 800px by 40px and then place it on your page where you want your nav menu to be and type in your links and then hyperlink them to your pages by opening the Inspector and opening Hyperlink - 2nd from the end and then highlighting the text and linking to relevant pages and then setting the colours via the format link.
Don't quite understand why you want a background image in a nav menu? It will be very hard to get anything of those sizings and people do not usually have a background image in a nav menu - normally a colour. A nav menu is not the place for background images or logos - it is too small and all this should be in your header section instead.
If you want more help, then please be precise about what you are asking.

Background image in Spry dropdown menu

Similar Messages

Maybe you are looking for