PDA

View Full Version : add 3 level dropdown to this 2 level menu



peculyar
09-08-2008, 08:45 AM
1) Script Title: two level to three level dropdown?

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem: how can i edit this to make it a three level dropdown?
And how can i bring this menu on top to overlap a flash in my webpage?

Pls help. Urgent. Thanks!:p

Nile
09-08-2008, 12:02 PM
Take a look at this, it may work better in your case:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/
To get the menu over the flash, try using z-index, as seen in the code below, a red box is over a blue box:

<style type="text/css">
#div1 {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
left: 200px;
top: 100px;
}
#div2 {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
left: 210px;
top: 120px;
}
</style>
<div id="div1"></div>
<div id="div2"></div>

If we want to get that blue box over the red, just put in some z-index:


<style type="text/css">
#div1 {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
left: 200px;
top: 100px;
z-index: 1;
}
#div2 {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
left: 210px;
top: 120px;
}
</style>
<div id="div1"></div>
<div id="div2"></div>

peculyar
09-09-2008, 03:29 AM
Hi Nile, thanks for the alternative solution.

I've check out http://www.dynamicdrive.com/style/cs...rizontal_blue/ before but it doesn't fit the navigation menu for my case.
I have round corners for the tabs and i'm using two separate image for a single tab just like http://www.dynamicdrive.com/dynamici...roptabmenu.htm

Is there no way to add a third level to that?

Please advice.

Also i tried to highlight the selected tab when it's on a particular page.
I added class="selected" to
<li class="selected"><a href="index.html" title="Home" rel="dropmenu1_c"><span class="selected">About<br />Us</span></a></li>

It was highlighted when i first click on the tab, but upon rollover again, the tab was back to the original image(w/o highlight).

peculyar
09-10-2008, 02:06 AM
Hi, any help?? Thanks

Nile
09-10-2008, 02:52 AM
What do you mean:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/
Doesn't work, I've tested it in FF 3, Safari 3, IE 7, and Chrome.

peculyar
09-10-2008, 03:18 AM
I've check out http://www.dynamicdrive.com/style/cs...rizontal_blue/ before but it doesn't fit the navigation menu for my case.
I have round corners for the tabs and i'm using two separate image for a single tab just like http://www.dynamicdrive.com/dynamici...roptabmenu.htm



It doesn't work for me as i have rounded corners as the image exactly like http://www.dynamicdrive.com/dynamici...roptabmenu.htm

Is there any way to add a third level dropdown to this?

peculyar
09-15-2008, 07:45 AM
no one knows how??