d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > How To Go About Coding A Drop Down Menu?
Add Reply New Topic New Poll
Views: 1212Replies: 5Track Topic
Member
Posts: 25,132
Joined: Sep 22 2007
Gold: 0.00
#1
May 17 2012 07:01am
how to go about coding a drop down menu from an image map?
Member
Posts: 31,806
Joined: Jan 22 2008
Gold: 2,235.56
#2
May 18 2012 06:40am
got an example of what you want?
Member
Posts: 25,132
Joined: Sep 22 2007
Gold: 0.00
#3
May 21 2012 02:07am
Quote (TiMasse @ May 18 2012 12:40pm)
got an example of what you want?


yeah sure :

http://www.homeserve.com/

similar to their banner
Member
Posts: 22,605
Joined: Sep 23 2007
Gold: 1.01
Warn: 40%
#4
May 21 2012 03:09am
They don't use an image map, it's just using some lists and formatting them with css.

html:
Code
<ul style="menu">
 <li>
   <a href="#">Menu1</a>
   <ul>
     <li><a href="xx">Menu1 A</a></li>
     <li><a href="xx">Menu1 B</a></li>
   </ul>
 </li>
 <li>
   <a href="#">Menu2</a>
   <ul>
     <li><a href="xx">Menu2 A</a></li>
     <li><a href="xx">Menu2 B</a></li>
   </ul>
 </li>
</ul>


css:
Code
ul.menu {list-style-type: none; margin: 0; padding: 0}
ul.menu li {margin: 0}
ul.menu li a {display: block; float: left}
ul.menu li ul {list-style-type: none; position: absolute; margin: 0; display: none}
ul.menu li:hover ul {display: block}
ul.menu li ul li {float: none}


This post was edited by tcl on May 21 2012 03:10am
Member
Posts: 25,132
Joined: Sep 22 2007
Gold: 0.00
#5
Jun 8 2012 04:59am
Quote (tcl @ May 21 2012 09:09am)
They don't use an image map, it's just using some lists and formatting them with css.

html:
Code
<ul style="menu">
 <li>
   <a href="#">Menu1</a>
   <ul>
     <li><a href="xx">Menu1 A</a></li>
     <li><a href="xx">Menu1 B</a></li>
   </ul>
 </li>
 <li>
   <a href="#">Menu2</a>
   <ul>
     <li><a href="xx">Menu2 A</a></li>
     <li><a href="xx">Menu2 B</a></li>
   </ul>
 </li>
</ul>


css:
Code
ul.menu {list-style-type: none; margin: 0; padding: 0}
ul.menu li {margin: 0}
ul.menu li a {display: block; float: left}
ul.menu li ul {list-style-type: none; position: absolute; margin: 0; display: none}
ul.menu li:hover ul {display: block}
ul.menu li ul li {float: none}


how would i go about formatting something similar in CSS myself?
Member
Posts: 2,736
Joined: Nov 28 2009
Gold: 34.00
#6
Jun 8 2012 09:45am
Quote (JP99 @ 8 Jun 2012 11:59)
how would i go about formatting something similar in CSS myself?


Your example uses Javascript, you know that, right?

Although, when you're pro like me, you don't need Javascript to make things wonderful.
http://jsfiddle.net/2kBRg/ (even works in IE7, amazing.)

This post was edited by eagl3s1ght on Jun 8 2012 10:07am
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll

© 2003-2026 d2jsp  Contact