Creating a drop-down menu using images, not text, in Dreamweaver CS3

Report · Jan 04, 2011

Hello, I am a web designer currently using CS3.

I have one client who asked me to use images, not text, for her menu items in her website. She wrote the menu items out in pen on crumpled paper, which she did, and scanned and sent to me.

I used CS3's Navigation Bar tool to create a rollover menu using the jpeg images of the handwritten paper which works perfectly.

the menu items are: Home, Art, Links, Blog, and Content.

But the now, client wants menu item "Art" to be broken into three sub-menus, Abstract Art, Representational Art, and Expressionist Art. She sent me the scanned images of those three words written out in pen and expects me to make a drop-down menu from those items.

But I don't know how to make a drop-down menu (which only appears when you hover over it and disappears when you move the cursor away) using images.

Drop-down menus are easy to do if you use only text, which I have done with CSS, but I just can't figure out how to do it using images.... Does anyone know how to make such a menu?

Thanks

Jim

Report · Jan 04, 2011

Project Seven's Pop Menu Magic will do this:

http://www.projectseven.com/products/menusystems/pmm2/image-based.htm

If you wish to roll your own, you could use DW's built-in Spry menu system and replace text with images.

<ul>

</li>

</ul>

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 05, 2011

Thanks Nancy...

I've heard a lot about this thing called Spry lately and I don't know anything about it... could you please tell me what it is and what it's used for? And how do I take advantage of the Spry menu system in Dreamweaver...

thanks

James

Report · Jan 05, 2011

Hi,

You might also want to check out the Universal CSS Navigation Menu extension. It also allows you to choose any icons/images for the drop down menu.

Greetings,

George Petrov

DMXzone.com

Report · Jan 05, 2011

thanks I appreciate the offer but they want 59 bucks...

now about spry, I managed to get the spry menu to work, but it has some issues.

number 1. there is... a thick border when you hover on an item... I don't want

any borders, just the images... so I need to know how to get rid of the

border..

Number 2 is that I would like to do a "rollover effect" that is the image

changes when you roll over it

Number 3 is I would like to have the current menu item also be a different image

than the other menu items...

number 4 is the drop down menus do not seem to work in my android smart phone...

Report · Jan 05, 2011

You are better off using Spry Menu Bar 2, especially if you use DW CS5. More info http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2141544. This menu bar is touch screen ready and can easily be modified within the Widget Browser.

More about Spry UI Widgets http://labs.adobe.com/technologies/spry/ui/

Gramps

Wappler, the only real Dreamweaver alternative.

Report · Jan 06, 2011

thanks, but I'm actually using CS3...

OK so.. I used the Spry dropdown menu in CS3 to make my drop down menu work using images... Here is a link to show you how it works:

http://www.abstractpassion.com (click on the art tab for the dropdown menu)

Now here's my menu wish list:

1) I want to be able to rollover the image and get a different image (it worked when I was using rollover image tool in CS3, but I don't know how to do it using spry

2) I want to have a different image for the current page

3) I want the drop down menu to be just the images without a white background.

please advise. thanks Jim

here is the spry menu CSS:

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

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

LAYOUT INFORMATION: describes box model, positioning, z-order

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

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */

ul.MenuBarHorizontal

{

margin: 0;

list-style-type: none;

font-size: 100%;

cursor: default;

width: auto;

padding-top: 0;

padding-right: 0;

padding-bottom: 100px;

padding-left: 0;

}

/* 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: left;

cursor: pointer;

width: 9em;

float: left;

}

/* 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: 8.2em;

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: 8.2em;

}

/* 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;*/

background-color: none;

}

/* Menu items are a light gray block with padding and no text decoration */

ul.MenuBarHorizontal 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.MenuBarHorizontal a:hover, ul.MenuBarHorizontal 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.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal 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.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;

}

/* 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;

}

and here is the code for my menu...

<ul>

</ul>

</li>

</ul>

Ok thanks

please advise...

JIm

Report · Jan 06, 2011

Spry does not offer that as an option. You would need to program it

yourself or consider an extension, such as our Pop Menu Magic, that has

full support for multi-state image menus. Here are 2 examples:

http://www.projectseven.com/products/menusystems/pmm2/image-based.htm

http://www.projectseven.com/products/menusystems/pmm2/tweaks/signs/

--

Al Sparber - PVII

http://www.projectseven.com

Dreamweaver Menus | Galleries | Widgets

Without equal

Report · Jan 06, 2011

Please have a look here at the SpryMenuBar using images and no text http://pleysier.com.au/jim/index.php

Gramps

Incidently, you do not need DWCS5 to use the Widget Browser and try Spry Menu Bar 2. The example above uses the SpryMenuBar ver 1.6.1

Wappler, the only real Dreamweaver alternative.

Report · Jan 06, 2011

"Please have a look here at the SpryMenuBar using images and no text."

Hi Gramps,

Using image replacement like that is not really the same as using

images. Aside from the lag when the images are changed (you could use

sprites as a single background image would not flicker or lag), if the

image does not come in there is no ALT attribute to take its place. Spry

seems to be copying some features from more mature menus and widgets as

it evolves, so perhaps in another version or 2 it will offer full image

support. Until then, I wouldn't take the chance from both a usability

and an accessibility perspective.

The only thing right about it is the price

--

Al Sparber - PVII

http://www.projectseven.com

Dreamweaver Menus | Galleries | Widgets

http://www.projectseven.com/go/hgm

The Ultimate Web 2.0 Carousel

Report · Jan 06, 2011

Thank you Al,

Using sprites is good advice, but I did not want to spend too much time on the example.Already I had to create the images.

Gramps

Wappler, the only real Dreamweaver alternative.

Report · Jan 06, 2011

"Using sprites is good advice, but I did not want to spend too much time

on the example.Already I had to create the images."

That's why for some people, a commercial solution - especially one that

comes with unlimited email and telephone support - is often a sound

business decision.

--

Al Sparber - PVII

http://www.projectseven.com

Dreamweaver Menus | Galleries | Widgets

http://www.projectseven.com/go/hgm

The Ultimate Web 2.0 Carousel

Report · Jan 06, 2011

You've got the top menu done, Gramps. Looks nice.

OP wants unique images for sub-menus too. Hopefully they can build off your code example.

@OP,

I hope you've sent your client an additional bill for the added time required to code her "custom menu."

Cheers,

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 06, 2011

Thank you Nancy,

That is my hope that the OP will be able to build on my example as I did not want to spend too much time on the example.

Gramps

Wappler, the only real Dreamweaver alternative.

Report · Jan 06, 2011

thanks gramps for your work... so please tell me what I should do to use this menu.... should I just copy the code and paste it into dreamweaver or is there other programs I need? Did you make CSS code as well? I downloaded Spry menubar 2 but I can't figure out how to get it into Dreamweaver so I can use it. and do I have to change all my webpages to a .php extension?

Report · Jan 06, 2011

OK Gramps... I found your CSS code as well... I see how it works... I will just create the images for hover and current.. easy enough to do with our friend photoshop... and I should be able to create the same thing with the submenu.... by the way.. is their anyway to that I can have just the images without the white background for the sub menu?

Report · Jan 06, 2011

by the way.. is their anyway to that I can have just the images without the white background for the sub menu?

I think you will find that this only shows in IE. The way to stop that is by adding the following style to myStyles.css

@media screen, projection {
     ul.MenuBarHorizontal li.MenuBarItemIE      {
          background: transparent;
     }
}

Gramps

Wappler, the only real Dreamweaver alternative.

Report · Jan 06, 2011

This is the source code for each of the pages (index.php etc) and is only meant to be an example. The .php extension can be changed to .html or similar without any consequences.

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<link href="css/myStyles.css" rel="stylesheet">
</head>

<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a id="mnuHome" href="index.html"></a></li>
  <li><a id="mnuArt" href="art.html"></a></li>
  <li><a id="mnuLinks" href="links.html"></a></li>

  <li><a id="mnuBlog" href="blog.html"></a></li>
  <li><a id="mnuContact" href="contact.html"></a></li>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="js/myScripts.js" type="text/javascript"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

This code can be copied and pasted in into your DW document with an extension of .html or similar. I have already renamed the links to reflect the change in extension to .html

SpryMenuBarHorizontal.css is the original Spry file; no changes have been made to this file

I have created a new overriding style sheet named myStyles.css and placed it in a sub-folder called css. The code for this file is

/* CSS Document */
ul.MenuBarHorizontal img {
     border: none;
}
ul.MenuBarHorizontal a, ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
     background: transparent;
}
ul.MenuBarHorizontal a {
     height: 20px;
}
ul.MenuBarHorizontal a#mnuHome {
     background: url(images/home.jpg) no-repeat center center;
}
ul.MenuBarHorizontal a#mnuArt {
     background: url(images/art.jpg) no-repeat center center;
}
ul.MenuBarHorizontal a#mnuLinks {
     background: url(images/links.jpg) no-repeat center center;
}
ul.MenuBarHorizontal a#mnuBlog {
     background: url(images/blog.jpg) no-repeat center center;
}
ul.MenuBarHorizontal a#mnuContact {
     background: url(images/contact.jpg) no-repeat center center;
}
ul.MenuBarHorizontal a#mnuHome.MenuBarItemHover {
     background: url(images/home_hover.jpg) no-repeat center center;
}
ul.MenuBarHorizontal a#mnuArt.MenuBarItemHover {
     background: url(images/art_hover.jpg) no-repeat center center;
}
ul.MenuBarHorizontal a#mnuLinks.MenuBarItemHover {
     background: url(images/links_hover.jpg) no-repeat center center;
}
ul.MenuBarHorizontal a#mnuBlog.MenuBarItemHover {
     background: url(images/blog_hover.jpg) no-repeat center center;
}
ul.MenuBarHorizontal a#mnuContact.MenuBarItemHover {
     background: url(images/contact_hover.jpg) no-repeat center center;
}
ul.MenuBarHorizontal li.activeMenuItem a {
     cursor: none;
}
ul.MenuBarHorizontal li.activeMenuItem a#mnuHome {
     background: url(images/home_current.jpg) no-repeat center center;
}
ul.MenuBarHorizontal li.activeMenuItem a#mnuArt {
     background: url(images/art_current.jpg) no-repeat center center;
}
ul.MenuBarHorizontal li.activeMenuItem a#mnuLinks {
     background: url(images/links_current.jpg) no-repeat center center;
}
ul.MenuBarHorizontal li.activeMenuItem a#mnuBlog {
     background: url(images/blog_current.jpg) no-repeat center center;
}
ul.MenuBarHorizontal li.activeMenuItem a#mnuContact {
     background: url(images/contact_current.jpg) no-repeat center center;
}

Just copy and paste this code into a file called myStyles.css and save the file in the css sub-directory.

SpryMenuBar.js is the original Spry file

SpryDOMUtils.js needs to be placed in the SpryAssets folder. If you do not have this file you can copy and paste the contents into Dreamweaver and save the file as SpryDOMUtils.js in the SpryAssets sub-folder. The code can be found here http://labs.adobe.com/technologies/spry/includes/SpryDOMUtils.js

Lastly I have a JS file called myScripts.js as follows

// JavaScript Document
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
     var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
     if(a.href == window.location){
          Spry.Utils.addClassName(node,"activeMenuItem");
     }
});
}
Spry.Utils.addLoadListener(InitPage);

Copy and paste this code in DW and save the file as myScripts.js in a js sub-folder.

That is it.

If the above is too much then please download the RAR-file of the complete site wich is found here http://pleysier.com.au/jim/jim.rar

Gramps

PS If you are having a problem with the submenu items, please let me know.

Wappler, the only real Dreamweaver alternative.

Report · Jan 06, 2011

"

[ | art.html]
[ | links.html]
"

Obviously, I'm not going to get through to you, so perhaps other folks
will see this and chime in. You cannot have empty

elements. That is an accessibility mortal sin.

Unbelievable.

-- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel

Report · Jan 06, 2011

Al, please have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fpleysier.com.au%2Fjim%2Findex.php

This is a very pleasing result don't you think?

Gramps

Wappler, the only real Dreamweaver alternative.

Report · Jan 06, 2011

thanks gramps... and this was to prove to Al that your code was good stuff?

I am going to try your solution... I know there is a little lag time... but I

think it will work.. I appreciate your effort on my behalf... thanks Jim

Report · Jan 06, 2011

Valid code is not the issue. The issue is accessibility. This is not an

argument or a debate but a simple statement of fact that a web

developer, especially one doling out advice, should be aware of. You

cannot serve an empty anchor tag. There must be either text or an image

inside of it, otherwise, the visually handicapped, amongst others, will

never see a bloody thing

If you want to use image replacement, there are proper ways to do it -

but your method is not even close.

Here is an accessible method:

http://www.branded07.com/projects/branded07/accessible-navigation/

It not only works for the blind, but also when the visitor has disabled

image downloading or has a very slow connection. With your menu, those

poor souls get a completely blank page.

Based on the snarky attitude of the original poster, I'm offering this

advice reluctantly.

As for our menu system... images work because they are real, embedded

images with proper ALT attributes.

--

Al Sparber - PVII

http://www.projectseven.com

Dreamweaver Menus | Galleries | Widgets

Report · Jan 06, 2011

Report · Jan 06, 2011

The following statement was found in http://www.w3.org/TR/html4/struct/links.html

User agents should be able to find anchors created by empty A elements

There are plenty of other instances of <a href="#"></a> on the Internet. It just makes me wonder where I can find support for your statement

You cannot serve an empty anchor tag. There must be either text or an image inside of it, otherwise, the visually handicapped, amongst others, will never see a bloody thing.

In your example the title attribute is the important factor that allows accessibility as in

    <li><a href="#" title="home" id="gn-home"><span></span>Home</a></li>
    <li><a href="#" title="home" id="gn-about"><span></span>About</a></li>

    <li><a href="#" title="home" id="gn-contact"><span></span>Contact</a></li>

But if you use title="home" a little too often, I guess it may become confusing for the visually handicapped who incidentally cannot see the text within the element. So if they cannot see it, why have it there?

What this discussion has highlighted is to be wary of accessibility problems and I thank you for that.

Gramps

Wappler, the only real Dreamweaver alternative.

Report · Jan 06, 2011

That a link should contain text or an image with an ALT attribute is

very fundamental.

Should never be used for a navigation link.

Screen readers, for example, recite a link as "link" followed by the

text inside the tag or, if it's an image, the reader recites "Graphic

link" followed by the Alt text.

Gosh I miss the days of the old Dreamweaver newsgroup

--

Al Sparber - PVII

http://www.projectseven.com

Dreamweaver Menus | Galleries | Widgets