Jump to content

Submenu with table


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...

Edited by derok
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.

Edited by MrFish
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...