Drop down menus

Discussion in 'HTML' started by Desmond, Apr 19, 2007.

  1. Desmond

    Desmond Guest

    Hi. I've been playing with drop down menus. They are working fine,
    but I would like to use an image map to activate the drop down menu
    with apossibility to merging the 2 together.

    I want to replace the Fruit Vegitabl menu with the image map Mozart
    Brahms above

    http://www.des-otoole.co.uk/Menu/Menu.htm

    Any Ideas please.

    Desmond.
    Desmond, Apr 19, 2007
    #1
    1. Advertising

  2. "Desmond" <> wrote in message
    news:...
    > Hi. I've been playing with drop down menus. They are working fine,
    > but I would like to use an image map to activate the drop down menu
    > with apossibility to merging the 2 together.
    >
    > I want to replace the Fruit Vegitabl menu with the image map Mozart
    > Brahms above
    >
    > http://www.des-otoole.co.uk/Menu/Menu.htm
    >



    The best thing to do is break up your image into pieces. Then basically
    instead of text for the link you'll use an image.

    <ul id="nav">
    <li><a href="#">Fruit</a>
    <ul>
    <li><a href="#">Apples</a></li>
    <li><a href="#">Pears</a></li>
    <li><a href="#">Bananas</a></li>
    <li><a href="1.php">Grapes</a></li>
    </ul>
    </li>
    <li><a href="#">Vegitables</a>
    <ul>
    <li><a href="#">Potatoes</a></li>
    <li><a href="#">Carrot</a></li>
    <li><a href="#">Swede</a></li>
    <li><a href="#">Parsnip</a></li>
    <li><a href="2.php">Onion</a></li>
    </ul>
    </li>
    </ul>so in that code you have the li fuit.. but you would not use the text
    Fruit but <img src="Mozart.gif">.<ul id="nav">
    <li><a href="#"><img src="Mozart.gif"/></a>
    <ul>
    <li><a href="#">Apples</a></li>
    <li><a href="#">Pears</a></li>
    <li><a href="#">Bananas</a></li>
    <li><a href="1.php">Grapes</a></li>
    </ul>
    </li>
    <li><a href="#"><img src="Brahms.gif"/>.</a>
    <ul>
    <li><a href="#">Potatoes</a></li>
    <li><a href="#">Carrot</a></li>
    <li><a href="#">Swede</a></li>
    <li><a href="#">Parsnip</a></li>
    <li><a href="2.php">Onion</a></li>
    </ul>
    </li>
    </ul>If you want to add some dynamic feedback you would then use css to
    change the image on things such as active, hover, etc...Jon
    Jon Slaughter, Apr 19, 2007
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    742
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,001
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    458
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    253
  5. Replies:
    3
    Views:
    275
Loading...

Share This Page