Skip to main content
S
schenzay
Participating Frequently
January 4, 2011
Question

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

  • January 4, 2011
  • 2 replies
  • 27067 views

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

    This topic has been closed for replies.

    2 replies

    D
    DMXzone_com-XjTFVK
    Participant
    January 5, 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

    S
    schenzayAuthor
    Participating Frequently
    January 5, 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...

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    January 7, 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 */

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

    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 id="MenuBar1" class="MenuBarHorizontal">
           
           <li><a href="index.html"><img src="images/home.jpg"></a></li>
           
          <li><a class="MenuBarItemSubmenu" href="#"><img src="images/art.jpg"></a>
                
                   <ul>
                        <li><a href="expressionist.html"><img src="images/expressionistart.jpg"></a></li>
                       
                        <li><a href="art.html"><img src="images/abstractart.jpg"></a></li>
                       
                        <li><a href="representational.html"><img src="images/representationalart.jpg"></a></li>
                 </ul>
            </li>
           
          <li><a href="links.html"><img src="images/links.jpg"></a></li>
           
         <li><a href="blog.html"><img src="images/blog.jpg"></a></li>
         
          <li><a href="contact.html"><img src="images/contact.jpg"></a></li>
    </ul>
    Ok thanks
    please advise...
    JIm


    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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 4, 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><img src="image1.jpg"></li>

         <li><img src="image2.jpg"></li>

         <li><img src="image3.jpg"> <ul>

              <li><img src="sub-image1.jpg</li>

              <li><img src="sub-image2.jpg</li>

              <li><img src="sub-image3.jpg</li> </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
    S
    schenzayAuthor
    Participating Frequently
    January 5, 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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices