Forums

jitendra

How to create drop down menu with table, td, td.

i have to do this for this sitehttp://www.joannefabrics.com/english/products.asp

it's table based site ,navigation bar made by table.

pls help ASAP

Robskiwarrior

firstly I wouldnt use the table - I would use a UL.

Is it for the navigation? Coz you can get some good free CSS menu templates for free... here is a good tutorial.

http://www.seoconsultants.com/css/menus/tutorial/

jitendra

i know very well how to make menu with css and ul li . but this clients only needs to add a submenu. so i want to know how we can make a dropdown menu with table, tr, td and images

<table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
      <tr>
        <td><a href=\"http://www.joannefabrics.com/english/english.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image22','','http://www.joannefabrics.com/english/images/nav_home_over.jpg',1)\">

		<img src=\"products.asp_files/nav_home.jpg\" name=\"Image22\" width=\"62\" height=\"33\" border=\"0\"></a></td>
        <td><a href=\"http://www.joannefabrics.com/english/about.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image15','','http://www.joannefabrics.com/english/images/nav_about_over.jpg',1)\"><img src=\"products.asp_files/nav_about.jpg\" name=\"Image15\" width=\"73\" height=\"33\" border=\"0\"></a></td>
        <td><a href=\"http://www.joannefabrics.com/english/showroom.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image16','','http://www.joannefabrics.com/english/images/nav_showroom_over.jpg',1)\"><img src=\"products.asp_files/nav_showroom.jpg\" name=\"Image16\" width=\"86\" height=\"33\" border=\"0\"></a></td>
        <td><a href=\"http://www.joannefabrics.com/english/customer.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image17','','http://www.joannefabrics.com/english/images/nav_cusservice_over.jpg',1)\"><img src=\"products.asp_files/nav_cusservice.jpg\" name=\"Image17\" width=\"116\" height=\"33\" border=\"0\"></a></td>
        <td id=\"menu_parent\"><img src=\"products.asp_files/nav_products_on.jpg\" /></td>
        <td><a href=\"http://www.joannefabrics.com/english/media.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image19','','http://www.joannefabrics.com/english/images/nav_media_over.jpg',1)\"><img src=\"products.asp_files/nav_media.jpg\" name=\"Image19\" width=\"107\" height=\"33\" border=\"0\"></a></td>
        <td><a href=\"http://www.joannefabrics.com/english/contact.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image20','','http://www.joannefabrics.com/english/images/nav_contact_over.jpg',1)\"><img src=\"products.asp_files/nav_contact.jpg\" name=\"Image20\" width=\"93\" height=\"33\" border=\"0\"></a></td>
        <td><a href=\"http://www.joannefabrics.com/english/placeorder.asp\"><img src=\"products.asp_files/nav_placeorder.jpg\" name=\"Image21\" width=\"116\" height=\"33\" border=\"0\"></a></td>
      </tr>
    </table>

this is the code of menu. there is no sub-menu yet. i want to add a sub-menu in any link.

is there any solution with javascript or something else ?

if there is no solution then i will recreat the whole in css, ul,li

TheDoc

If you know very well how to make it with ul / li, then why wouldn't you? I see absolutely no benefit to using a table for this.

jitendra

because i don't want to recreate the menu. because it's a huge site with many pages and client just need a 1 submenu in the main menu . this is a little work for me and i don't want to waste much time on that. i need a quick solution

This is navigation
http://farm4.static.flickr.com/3532/3257456250_65b5814eb4_o.png

This is the code of navigation made by table

<table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
      <tr>
        <td><a href=\"http://www.joannefabrics.com/english/english.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image22','','http://www.joannefabrics.com/english/images/nav_home_over.jpg',1)\">

		<img src=\"http://www.joannefabrics.com/english/images/nav_home.jpg\" name=\"Image22\" width=\"62\" height=\"33\" border=\"0\"></a></td>
        <td><a href=\"http://www.joannefabrics.com/english/about.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image15','','http://www.joannefabrics.com/english/images/nav_about_over.jpg',1)\"><img src=\"http://www.joannefabrics.com/english/images/nav_about.jpg\" name=\"Image15\" width=\"73\" height=\"33\" border=\"0\"></a></td>
        <td><a href=\"http://www.joannefabrics.com/english/showroom.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image16','','http://www.joannefabrics.com/english/images/nav_showroom_over.jpg',1)\"><img src=\"http://www.joannefabrics.com/english/images/nav_showroom.jpg\" name=\"Image16\" width=\"86\" height=\"33\" border=\"0\"></a></td>
        <td><a href=\"http://www.joannefabrics.com/english/customer.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image17','','http://www.joannefabrics.com/english/images/nav_cusservice_over.jpg',1)\"><img src=\"http://www.joannefabrics.com/english/images/nav_cusservice.jpg\" name=\"Image17\" width=\"116\" height=\"33\" border=\"0\"></a></td>
        <td><img src=\"http://www.joannefabrics.com/english/images/nav_products_on.jpg\" /></td>
        <td><a href=\"http://www.joannefabrics.com/english/media.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image19','','http://www.joannefabrics.com/english/images/nav_media_over.jpg',1)\"><img src=\"http://www.joannefabrics.com/english/images/nav_media.jpg\" name=\"Image19\" width=\"107\" height=\"33\" border=\"0\"></a></td>
        <td><a href=\"http://www.joannefabrics.com/english/contact.asp\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image20','','http://www.joannefabrics.com/english/images/nav_contact_over.jpg',1)\"><img src=\"http://www.joannefabrics.com/english/images/nav_contact.jpg\" name=\"Image20\" width=\"93\" height=\"33\" border=\"0\"></a></td>
        <td><a href=\"http://www.joannefabrics.com/english/placeorder.asp\"><img src=\"http://www.joannefabrics.com/english/images/nav_placeorder.jpg\" name=\"Image21\" width=\"116\" height=\"33\" border=\"0\"></a></td>

      </tr>
    </table>

I want this . i want to show a sub-menu under products menu item anyhow except converting into any css menu
http://farm4.static.flickr.com/3490/3257451450_365eed7a9b_o.jpg

Please help ASAP

tier1ip

I am also looking to add a submenu only to an existing menu for main page at tier1ip.com. Did you ever figure out a solution to this? I'm using basic html with js.

gooflett

What I would try doing is this.

The <td> that holds the link you want to be a dropdown give it an ID or class of "dropdown"

Next add an UL inside the td tag
<td class="dropdown">
<a>Main Link</a>

<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>

</td>

/* CSS /*
.dropdown ul {display:none}
.dropdown:hover ul {display:block;}

From there on you will need to position your UL using relative positioning. Also you will need a fix for IE6 because it doesn't like :hovers except on a tags. But there are workarounds like http://www.xs4all.nl/~peterned/csshover.html

I hope this helps. If not. You could always use javascript to throw something up on hover.