Back To Website Design Forum

Modern Dropdown Menus

  • templastorm
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Sep 25, 2004
  • Posts: 173
  • Loc: Chicago
  • Status: Offline

Post July 6th, 2010, 11:38 am

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
Back in the game!
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 6th, 2010, 11:38 am

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post July 7th, 2010, 12:13 am

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. }
Let's leave all our *plum* where it is and go live in the jungle ...
  • templastorm
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Sep 25, 2004
  • Posts: 173
  • Loc: Chicago
  • Status: Offline

Post July 28th, 2010, 12:42 pm

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....
Back in the game!
  • templastorm
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Sep 25, 2004
  • Posts: 173
  • Loc: Chicago
  • Status: Offline

Post August 3rd, 2010, 10:26 am

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
Back in the game!
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post August 3rd, 2010, 11:55 pm

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?
Let's leave all our *plum* where it is and go live in the jungle ...
  • templastorm
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Sep 25, 2004
  • Posts: 173
  • Loc: Chicago
  • Status: Offline

Post August 11th, 2010, 3:12 pm

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!
Back in the game!
  • Howdy_McGee
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 22, 2010
  • Posts: 16
  • Status: Offline

Post August 16th, 2010, 8:29 am

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

Page 1 of 1

Post Information

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