Back To Website Design Forum

css image drop down menu

  • buzzby
  • Novice
  • Novice
  • No Avatar
  • Joined: Aug 15, 2008
  • Posts: 16
  • Status: Offline

Post August 26th, 2008, 1:32 am

hi there

i have been searching and searching but cannot find a decent menu drop down system. i was hoping that someone on here will either have a good start for a solution or be able to point me to the right page/tutorial so i can get this done.

i am after a dropdown menu where the menu tabs are images and the drop down is text. i have seen image dropdowns where the images are both menu and drop down attributes or where the text is both. but not image for tabs and text for the dropdowns. can anybody help me here please.

much appreciated
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 26th, 2008, 1:32 am

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post August 26th, 2008, 5:20 am

Depending on what browser set you intend to support, this should be very easy. A simple Google search will yield a ton of results. While the tutorials and demos will mostly have text as buttons, I think it's pretty plain to see how you would insert an image.

As a personal note; Drop down menus are one of the most over-abused 'features' you can put on a web page. They will have errors and problems on some browser, some where. They most often confound good information delivery.

I'd suggest you think very critically on whether or not your content requires them.
- dM
  • buzzby
  • Novice
  • Novice
  • No Avatar
  • Joined: Aug 15, 2008
  • Posts: 16
  • Status: Offline

Post August 26th, 2008, 6:11 am

well its not just a static image. when u rollover the image, the image changes (typical rollover code) as the rollover code takes place so does the drop down. i have searched but i dont get the results i want. if you know of a tute that does exactly what it says on this tin then great. please enlighten me.

cheers
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post August 26th, 2008, 6:21 am

Here's a very simplified, quickly thrown together, idea...
Code: [ Select ]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#menu ul li.item{display:none;}
#menu ul li.top{background:url(up.gif);width:100px;height:25px;}
#menu ul li.top:hover{background:url(over.gif);}
#menu ul:hover .item{display:block;}
#menu{position:absolute;}
</style>
</head>
 
<body>
<div id="menu">
    <ul id="item1">
        <li class="top"> &nbsp; </li>
        <li class="item"><a href="#">Item 1</a></li>
        <li class="item"><a href="#">Item 2</a></li>
        <li class="item"><a href="#">Item 3</a></li></ul></div>
</body>
</html>
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <style>
  8. #menu ul li.item{display:none;}
  9. #menu ul li.top{background:url(up.gif);width:100px;height:25px;}
  10. #menu ul li.top:hover{background:url(over.gif);}
  11. #menu ul:hover .item{display:block;}
  12. #menu{position:absolute;}
  13. </style>
  14. </head>
  15.  
  16. <body>
  17. <div id="menu">
  18.     <ul id="item1">
  19.         <li class="top"> &nbsp; </li>
  20.         <li class="item"><a href="#">Item 1</a></li>
  21.         <li class="item"><a href="#">Item 2</a></li>
  22.         <li class="item"><a href="#">Item 3</a></li></ul></div>
  23. </body>
  24. </html>
- dM
  • buzzby
  • Novice
  • Novice
  • No Avatar
  • Joined: Aug 15, 2008
  • Posts: 16
  • Status: Offline

Post August 26th, 2008, 6:47 am

ul id="item1"

can you explain what item1 is? ie what is the difference between 'item' and 'item1' as item1 is not listed within the <style></style> parameter. (is it a sequential thing as in item2, item3, item4 etc)
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post August 26th, 2008, 7:27 am

Here, try this markup. I think it might be what you want...

Code: [ Select ]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#menu ul#item1{position:absolute;top:0;left:0;}
#menu ul#item2{position:absolute;top:0;left:101px;}
#menu ul li.item{display:none;}
#menu ul li.item a{display:block;width:160px;height:25px;background:#CCC;}
#menu ul li.item a:hover{background:#ECECEC;}
#menu ul li.top{background:url(up.gif);width:100px;height:25px;}
#menu ul li.top:hover{background:url(over.gif);}
#menu ul:hover .item{display:block;}
#menu{position:absolute;}
</style>
</head>

<body>
<div id="menu">
    <ul id="item1">
        <li class="top"> &nbsp; </li>
        <li class="item"><a href="#">menu item 1menu item</a></li>
        <li class="item"><a href="#">menu item 2</a></li>
        <li class="item"><a href="#">menu item 3</a></li></ul>
    <ul id="item2">
        <li class="top"> &nbsp; </li>
        <li class="item"><a href="#">menu item 1</a></li>
        <li class="item"><a href="#">menu item 2</a></li>
        <li class="item"><a href="#">menu item 3</a></li></ul></div>
</body>
</html>
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <style>
  8. #menu ul#item1{position:absolute;top:0;left:0;}
  9. #menu ul#item2{position:absolute;top:0;left:101px;}
  10. #menu ul li.item{display:none;}
  11. #menu ul li.item a{display:block;width:160px;height:25px;background:#CCC;}
  12. #menu ul li.item a:hover{background:#ECECEC;}
  13. #menu ul li.top{background:url(up.gif);width:100px;height:25px;}
  14. #menu ul li.top:hover{background:url(over.gif);}
  15. #menu ul:hover .item{display:block;}
  16. #menu{position:absolute;}
  17. </style>
  18. </head>
  20. <body>
  21. <div id="menu">
  22.     <ul id="item1">
  23.         <li class="top"> &nbsp; </li>
  24.         <li class="item"><a href="#">menu item 1menu item</a></li>
  25.         <li class="item"><a href="#">menu item 2</a></li>
  26.         <li class="item"><a href="#">menu item 3</a></li></ul>
  27.     <ul id="item2">
  28.         <li class="top"> &nbsp; </li>
  29.         <li class="item"><a href="#">menu item 1</a></li>
  30.         <li class="item"><a href="#">menu item 2</a></li>
  31.         <li class="item"><a href="#">menu item 3</a></li></ul></div>
  32. </body>
  33. </html>
- dM
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post August 26th, 2008, 7:40 am

A ul is an unordered list marker - the li classes are list items.
  • maresrjm
  • Born
  • Born
  • No Avatar
  • Joined: Jan 08, 2012
  • Posts: 1
  • Status: Offline

Post January 8th, 2012, 10:18 pm

any idea how to do a drop-down menu, but it starts at the bottom and inflates upwards?

Page 1 of 1

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 129 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.