4 Replies Latest reply: Dec 8, 2012 9:14 AM by mhollis55 RSS

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

    Mohammad Kazem

      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

        • 1. Re: How to add a drop-down menu to a rollover image?
          sudarshan.t Community Member

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

           

          -ST

          • 3. Re: How to add a drop-down menu to a rollover image?
            sudarshan.t Community Member

            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-framework-availability.htm l

             

            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

            • 4. Re: How to add a drop-down menu to a rollover image?
              mhollis55 Community Member

              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.