multiple click points on tabs & menu items?

Margie

New Member
Hi,

I am a software developer creating a web application that has varios tabs and pulldowns. For example, I have tabs at the top of my page and a menu bar down the left side (both created using <li> and <a href tags). On the tabs and menu bar items I would like the user to be able to have multiple click locations that do different things. For example, right now when you click on a tab it takes you to a new page. I would like there to be a little red "x" in the top right of the tab that the user could click on to "close" the tab. I have the ability to implement the "close" operation, but I don't understand the right approach for visually creating the tab with the multiple click points.

I have played around with trying to put addition <ul> lists inside of the tab , but have not been successful in getting this laid out such that it looks nice. Can anyone advise me on the best approach? Do I need to create some sort of imange that contains my various click points and then use an image map? If so, can someone advise me on the simplest tool to use to create those images.

I can't seem to find web sites that even have this, so perhaps I am trying to do something that is not feasible?

Thanks for your advice,

Margie
 

cmjvulavala

New Member
Create the actual title for the tab in one <li> and the close button in a separate <li> then use classes/ids to style them to appear as if they were one tab.

Basically you have a title tab <li class="tab_title">Application 1</li>
then a second list item which is styled to appear as the end of a tab <li class="tab_close">X</li> See the file ive attatched if you dont understand... basically you style one <li> as the left of the tab and the other <li> as the right of the tab. Then you do some javascript magic and get it to do the close button stuff :D
 

Attachments

  • tab setup.jpg
    tab setup.jpg
    2.8 KB · Views: 20
Top