css image drop down menu

  • buzzby
  • Novice
  • Novice
  • buzzby
  • Posts: 25

Post 3+ Months Ago

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
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • buzzby
  • Novice
  • Novice
  • buzzby
  • Posts: 25

Post 3+ Months Ago

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
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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>
  • buzzby
  • Novice
  • Novice
  • buzzby
  • Posts: 25

Post 3+ Months Ago

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
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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>
  19. <body>
  20. <div id="menu">
  21.     <ul id="item1">
  22.         <li class="top"> &nbsp; </li>
  23.         <li class="item"><a href="#">menu item 1menu item</a></li>
  24.         <li class="item"><a href="#">menu item 2</a></li>
  25.         <li class="item"><a href="#">menu item 3</a></li></ul>
  26.     <ul id="item2">
  27.         <li class="top"> &nbsp; </li>
  28.         <li class="item"><a href="#">menu item 1</a></li>
  29.         <li class="item"><a href="#">menu item 2</a></li>
  30.         <li class="item"><a href="#">menu item 3</a></li></ul></div>
  31. </body>
  32. </html>
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

A ul is an unordered list marker - the li classes are list items.
  • maresrjm
  • Born
  • Born
  • maresrjm
  • Posts: 1

Post 3+ Months Ago

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

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 61 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
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.