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
    New 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
    BenPleysier
    Community Expert
    January 5, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Nancy OShea
    Nancy OShea
    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