Drop Down Menu Like Godaddy

  • SoulDesigns
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Karachi, Pakistan

Post 3+ Months Ago

Hi. Everyone,

I have been searching on the internet and I am not able to find which Menu Godaddy(dot)com is using? Anybody has an idea where I can find this menu? Also if some other menu closely resembles please let me know the resource. I need to use it in a project.

thanks :)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Honestly I don't think you need a template menu to create this. You could create it yourself. The code is fairly straight forward.


You basically make an unordered list. Inside the list items, you embed another unordered list. Inside the embedded lists' items, you embed a table with links in each cell:
HTML Code: [ Select ]
<ul> <!-- make a list -->
<li calss="drop"><a href="#">Top Level Link
<ul> <!-- embed a list -->
<li>
 
<table cellspacing="0" cellpadding="0"> <!-- embed a table -->
<tr>
<td><a href="#">Link 1</a></td>
<td><a href="#">Link 2</a></td>
</tr>
</table> <!-- close the table -->
 
</li>
</ul> <!-- close the embedded list -->
</a>
</li>
</ul> <!-- close the main list -->
 
  1. <ul> <!-- make a list -->
  2. <li calss="drop"><a href="#">Top Level Link
  3. <ul> <!-- embed a list -->
  4. <li>
  5.  
  6. <table cellspacing="0" cellpadding="0"> <!-- embed a table -->
  7. <tr>
  8. <td><a href="#">Link 1</a></td>
  9. <td><a href="#">Link 2</a></td>
  10. </tr>
  11. </table> <!-- close the table -->
  12.  
  13. </li>
  14. </ul> <!-- close the embedded list -->
  15. </a>
  16. </li>
  17. </ul> <!-- close the main list -->
  18.  


Then you use some fancy css for the hover effect:
CSS Code: [ Select ]
ul li {
list-style: none;
margin: 0 5px; /* spacing things out */
padding: 0;
display: inline; /* ie6 fix */
float: left; /* put the list in a line */
}
 
ul li.drop ul {
display: none; /* hide the embedded list */
}
 
ul li.drop:hover ul {
display: block; /* show the embedded list on hover */
position: absolute; /* put it in the right spot */
}
 
  1. ul li {
  2. list-style: none;
  3. margin: 0 5px; /* spacing things out */
  4. padding: 0;
  5. display: inline; /* ie6 fix */
  6. float: left; /* put the list in a line */
  7. }
  8.  
  9. ul li.drop ul {
  10. display: none; /* hide the embedded list */
  11. }
  12.  
  13. ul li.drop:hover ul {
  14. display: block; /* show the embedded list on hover */
  15. position: absolute; /* put it in the right spot */
  16. }
  17.  


That's about it. I haven't tested this so it might need a bit of tweaking, but this is a basic navigation menu.
  • SoulDesigns
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Karachi, Pakistan

Post 3+ Months Ago

Hi. I have tried this code and CSS and played with it ! but to no avail, it isn't working. :)
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Do you know any HTML and CSS?
  • SoulDesigns
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Karachi, Pakistan

Post 3+ Months Ago

Yes, I do. but can't make it work :)

Post Information

  • Total Posts in this topic: 5 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
 
 

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