Jump to content

Submenu with table


derok

Recommended Posts

Hi, i want to create a submenu using <table>.If we take a look, for example at the IMDB page, we will see the menu where Movies, Tv, News, etc... is.I already have a menu like that declared in my page,but what i want is something like:If i place the cursor in Movies, and then place the cursor in Top Movies, two or more items would display at the right side of Top Movies.Like:Top Movies--Avatar---------------Top Gun---------------Titanichow can i do this?thanks...

Link to comment
Share on other sites

You'll need to use javascript. When your mouse moves over the button you need to get that buttons contents. I do this by writing an attribute called "target". But it's not w3 compliant. Not sure if you mind this but it works with all browsers so I don't.

<table id="menu"><tr><td target="topmovies">Best Movies</td><td target="worstmovies">Worst Movies</td></tr></table>

The target points to a hidden div or table. Tables are more difficult to use and less flexible. But if you wan't to use tables I will use table examples.

<div class="hidden"><table id="topmovies">...</table><table id="worstmovies">...</table></div>

Write your hidden class like this-

.hidden{visibility: hidden;height: 1px;width: 1px;overflow: hidden;position: absolute;top: 0px;left: 0px;z-index: 1000;}

Then when you mouse over the cell with your mouse you should extract the table information and add it to a sub menu table.

menu = document.getElementById("menu");buttons = menu.childNodes[0];for(i = 0; i < buttons.length; i++){button = buttons[i];button.onmouseover = function(){// get target -> extract information -> add to submenu -> position submenu -> show submenu}button.onmouseout = function(){// yah}

Something like that. See if you can fill in the rest.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...