Modern Dropdown Menus

  • templastorm
  • Graduate
  • Graduate
  • templastorm
  • Posts: 173
  • Loc: Chicago

Post 3+ Months Ago

Hey Guys,


I have been out of the design scene for a bit and now I am back and I am trying to create a dropdown menu. This dropdown menu will be for a navigation bar and I am looking for some sort of javascript code that I can use to make my images that are linked have sub categories. I have searched throughout ozzu and beyond and all I can find are either flash script, scripts that cost money, or drop down menus that are hard coded. Anyone know of the best way to create a dropdown menu for the intermediate developer?

Thanks!

Templa
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

You don't actually need javascript for that, drop down menus can be created with CSS, like follows:
*Please note: This is coded out of my head so it might need some tweaking.

HTML Code: [ Select ]
<div id='menu'>
 <ul>
  <li><a href='#'>Home</a></li>
  <li>Services
   <ul>
    <li><a href='#'>Design</a></li>
    <li><a href='#'>Development</a></li>
   </ul>
  </li>
  <li><a href='#'>Contact</a></li>
 </ul>
</div>
  1. <div id='menu'>
  2.  <ul>
  3.   <li><a href='#'>Home</a></li>
  4.   <li>Services
  5.    <ul>
  6.     <li><a href='#'>Design</a></li>
  7.     <li><a href='#'>Development</a></li>
  8.    </ul>
  9.   </li>
  10.   <li><a href='#'>Contact</a></li>
  11.  </ul>
  12. </div>


CSS Code: [ Select ]
div#menu{
width:980px;
height:20px;
}
div#menu ul li{
list-style-type:none;
width:50px;
height:20px;
float:left;
position:relative;
}
div#menu ul li a{
display:block;
width:50px;
height:12px;
padding:8px 0px 0px 0px;
text-align:center;
}
div#menu ul li ul{
display:none;
position:absolute;
top:20px;
}
div#menu ul li:hover ul{
display:block;
}
div#menu ul li ul li{
float:none;
}
  1. div#menu{
  2. width:980px;
  3. height:20px;
  4. }
  5. div#menu ul li{
  6. list-style-type:none;
  7. width:50px;
  8. height:20px;
  9. float:left;
  10. position:relative;
  11. }
  12. div#menu ul li a{
  13. display:block;
  14. width:50px;
  15. height:12px;
  16. padding:8px 0px 0px 0px;
  17. text-align:center;
  18. }
  19. div#menu ul li ul{
  20. display:none;
  21. position:absolute;
  22. top:20px;
  23. }
  24. div#menu ul li:hover ul{
  25. display:block;
  26. }
  27. div#menu ul li ul li{
  28. float:none;
  29. }
  • templastorm
  • Graduate
  • Graduate
  • templastorm
  • Posts: 173
  • Loc: Chicago

Post 3+ Months Ago

Thanks for your help. Everything is going well although I am having some minor issues with my rollover navigation merged with the dropdown.

Is there I can make the main links rollover images and the dropdown links images as well. How much of the code will change if this is the case?

I tried doctoring it up and adding my own code but now the images are all squished together....
  • templastorm
  • Graduate
  • Graduate
  • templastorm
  • Posts: 173
  • Loc: Chicago

Post 3+ Months Ago

is there any way to keep the dropdown menus up for longer so they fade out? my dropdowns are pretty tricky to click on atm
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

This won't happen with CSS alone unfortunately. For this you'd need some javascript (jQuery preferably) ... This will change your code a bit though, would you like help with this?
  • templastorm
  • Graduate
  • Graduate
  • templastorm
  • Posts: 173
  • Loc: Chicago

Post 3+ Months Ago

I figured out a way to combat the tricky links. But looking in IE, my navigation with the dropdown menus is COMPLETELY destroyed. Any help you may be able to offer will be tremendously appreciated!
  • Howdy_McGee
  • Novice
  • Novice
  • Howdy_McGee
  • Posts: 16

Post 3+ Months Ago

Though, isn't it more "fluid" if there's javascript present?

Post Information

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

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