Skip navigation
Currently Being Moderated

How to add a drop-down menu to a rollover image?

Dec 7, 2012 10:21 PM

Hi,

 

I guess my title says it all... I was wondering how to add a drop-down menu to a rollover image? I know that there's the sprymenu, but I need to have my own rollover images.

 

Thanks,

Kazem

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 8, 2012 6:48 AM   in reply to Mohammad Kazem

    Do you mean to say you want to use your own custom image as a rollover image in Spry menu?

     

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 8, 2012 8:35 AM   in reply to Mohammad Kazem

    There are some Spry menu samples here with various options you can configure. Take a look at it: http://adobe.github.com/Spry/samples/menubar/MenuBarSample.html

     

    By the way, Adobe will no longer officially support development and upkeep of Spry: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framew ork-availability.html

     

    It will however be available on Git. Just thought I should let you know so if it is not too late for you, you could consider other menu options.

     

    jQuery is the way ahead. Take a look at some beautiful menu (tutorials, demos & downloads) here: http://www.freshdesignweb.com/jquery-menu.html

     

    -ST

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 8, 2012 9:14 AM   in reply to Mohammad Kazem

    Frankly, ANY link can offer a drop down.

     

    Take a look at this turorial.

     

    That will get you your dropdown menu. So you have that.

     

    Now, on your top menu (or any level where you want to have an image instead of text do this:

    (I am copying the HTML structure in the tutorial here):

     

    <nav>

              <ul>

                        <li><a href="#">Home</a></li>

                        <li><a href="#">Tutorials</a>

                                  <ul>

                                            <li><a href="#">Photoshop</a></li>

                                            <li><a href="#">Illustrator</a></li>

                                            <li><a href="#">Web Design</a></li>

                                  </ul>

                        </li>

                        <li><a href="#">Articles</a>

                                  <ul>

                                            <li><a href="#">Web Design</a></li>

                                            <li><a href="#">User Experience</a></li>

                                  </ul>

                        </li>

                        <li><a href="#">Inspiration</a></li>

              </ul>

    </nav>

     

    Now, let's pretend you want an image instead of the word "Articles." You'll want the image to be sized appropriately, and if you look at the CSS, you'll see it's 112 pixels wide by 52 high. If your image is approximately those dimensions, you're all set.

     

    So instead of "articles" you insert your image.

     

    Done.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points