Back To Programming / Scripting / Coding Forum

Drop Down Menu Like Godaddy

  • SoulDesigns
  • Novice
  • Novice
  • User avatar
  • Joined: Sep 09, 2004
  • Posts: 28
  • Loc: Karachi, Pakistan
  • Status: Offline

Post October 7th, 2010, 8:30 am

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 7th, 2010, 8:30 am

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post October 7th, 2010, 12:49 pm

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.
Use your words like arrows to shoot toward your goal.
  • SoulDesigns
  • Novice
  • Novice
  • User avatar
  • Joined: Sep 09, 2004
  • Posts: 28
  • Loc: Karachi, Pakistan
  • Status: Offline

Post October 8th, 2010, 12:51 am

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
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post October 8th, 2010, 2:22 am

Do you know any HTML and CSS?
Use your words like arrows to shoot toward your goal.
  • SoulDesigns
  • Novice
  • Novice
  • User avatar
  • Joined: Sep 09, 2004
  • Posts: 28
  • Loc: Karachi, Pakistan
  • Status: Offline

Post October 8th, 2010, 8:21 am

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

Page 1 of 1

Post Information

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