PDA

View Full Version : Modifying DD script - Drop Down Tabs (5 styles)



Ch3vr0n
01-18-2009, 12:17 AM
Hy there,

I'm planning on using the Drop Down Tabs (5 styles) script on my site for menu's. Horizontally its working just perfect. However i'm ran into an issue about an hour ago. (style 4)

I also need this menu VERTICALLY. On the demo page it has the 4 tabs home, css codes, partners & tools next to each other. What i'm after is something like this implemented in <table>

<table>
<tr>
<td>
*home
*css codes>
*partners>
*tools>
</td>
</tr>
</table>

mouseover behaviour stays the same.

OR this script modified into 1 tab version that i can call on each time like this (wich i would like better)

<table>
<tr>
<td>
*home
</td>
</tr>
<tr>
<td>
*css codes
</td>
</tr>
</table>

Can anyone help me if you know what i mean ? Its rather important as i cannot find a script with a similar layout & behaviour that pleases me. There are a couple vertical ones on dd but none to my liking.

having the menu appear on another row of horizontal tabs is a no-go for my site layout. I cant completely redesign the layout as a 2nd row of tabs would not only make accessing the 1st tabline more difficult, it would only just be ugly to see.

I have tried giving the <div id> in the "html for menu tabs" a unique id but it just wont work.

I can supply the page source code, but would rather not as i would have to clean out a lot of stuff.

ddadmin
01-19-2009, 09:09 AM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

I'm a little confused. Is your issue that you need to get the menu to work vertically, or is that in addition to the original issue mentioned in your first sentence? It might help to rephrase your question.

Ch3vr0n
01-20-2009, 09:58 PM
http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

it concerns this script. its the other version of the one u linked

currently i have it working in the default way, that is horizontal. But next to that, i also need it to work vertically (a new menu).

when i create new tabs in the vertical menu. The parent tabs appear, however the childlinks do not. Even though they have been correctly added.

to see it in action : http://www.soliweb.be/home.php

i can provide the source code, or you can just view it from within the browser :)

ddadmin
01-21-2009, 06:05 AM
I see, so you actually need both a horizontal and vertical menu on the same page? It's relatively easy to modify Drop Down Tabs so the sub menus are positioned to the right of the main item (vertical menu), but having both orientations supported is more tricky.

Your best bet IMO is just to use Drop Down Tabs for the horizontal orientation, and for the vertical one, use a generic menu script such as AnyLink CSS Menu (http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm), which can apply a drop down menu to any anchor on the link, dropping to its right if desired as well.

Ch3vr0n
01-21-2009, 04:54 PM
the submenus in the vertical menu don't HAVE to be dropped down, if they can be shown to the right, thats just as fine.

Using a different menu script isnt really an option, i checked the link you gave me, but i dont really like the looks of it, nor does it really match the other one.

If you can help me modify the vertical menu that options are shown to the right, i would appreciate it very much. Note, the top menu submenus have to stay to be dropped down.

Ch3vr0n
01-25-2009, 06:33 AM
bumpetie bump. ddadmin got some idea's ?

Ch3vr0n
02-14-2009, 01:14 AM
bump again. Still need that script modified

ddadmin
02-14-2009, 06:41 PM
Sorry for the delay. With regards to:


the submenus in the vertical menu don't HAVE to be dropped down, if they can be shown to the right, thats just as fine.

That's what I meant actually, that getting the menu to either drop down or drop to the right depending on the main menu bar's orientation would be tricky. Anyhow, I had some time, so I've added a basic version of this for you. Firstly, use the modified .js file in place of the original. Then, for the menu bar where you wish the drop down menus to drop to the right, insert a rev="lr" attribute inside the menu item(s), ie:


<div id="glowmenu" class="glowingtabs">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS Library" rel="dropmenu1_d" rev="lr"><span>CSS Codes</span></a></li>
<li><a href="http://www.dynamicdrive.com/resources/" title="Partners" rel="dropmenu2_d" rev="lr"><span>Partners</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Webmaster Tools"><span>Tools</span></a></li>
</ul>
</div>
<br style="clear: left;" />
<br class="IEonlybr" />

Ch3vr0n
02-14-2009, 08:51 PM
Let me see if i understand you correctly.

With the modified script, the submenues will default to be shown on the right ? Is this correct ?
If i add ' rev="lr" ' the submenues will drop down ? Is this correct aswell ?

The looks of the main tabs & submenues stay the same ?

ddadmin
02-14-2009, 09:04 PM
It's the other way around actually. By default the sub menus will still drop down relative to the anchor link, except if the anchor link contains rev="lr" (short of "left right"), which causes that sub menu to drop to the right of the anchor instead.

Ch3vr0n
02-14-2009, 09:49 PM
tried it immediately, yet it still doesnt work atm. Below is the code used.



<td valign="top">
<div id="menulinks" class="glowingtabs">
<ul>
<li><a href="#" title="Info" rel="informatie"><span>Informatie</span></a></li>
<li><a href="#" title="Uw Account" rel="account" rev="lr" target="iframe" ><span>Uw Account</span></a></li>
</ul>
</div>
<!-- 1st vertical menu -->
<div id="account" class="dropmenudiv_d">
<ul>
<li><a href="paginas/login/client" target="iframe">Klant Login</a></li>
<li><a href="paginas/login/siteadmin" target="iframe">Site Admin</a></li>
</ul>
</div>
</td>

ddadmin
02-15-2009, 03:25 AM
You haven't initialized the 2nd, vertical instance of the menu on your page. Add the below to the end of your page:


<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("menulinks", "auto")
</script>

Ch3vr0n
02-15-2009, 06:22 PM
still not working, i've tried adding both syntax lines in the same block as it is now, as in 2 seperate blocks.

ddadmin
02-16-2009, 04:34 AM
The HTML for one of your drop down menus in the 2nd menu is missing. One of your main menu link references the following drop down menu in red:


<li><a href="" title="Info" rel="informatie"><span>Informatie</span></a></li><br />

However, no drop down DIV with id="informatie" exists. Either define that menu, or simply remove the rel attribute from the above.

Ch3vr0n
02-16-2009, 09:21 PM
nice its working. Some more questions though.

* Is it possible to have the submenu looks be the way they are like in the vertical dropdown ?

* i also added a dropdown to the horizontal menu "server" but its looks are like the vertical menu and not the same like the ones under "webhosting" and "domeinnamen". Kinda messes up the submenus.

Thanks already though for modifying the script :)

ddadmin
02-17-2009, 07:41 PM
Some of your drop down DIVs look differently from the rest since they have the UL element added to them. For example:


<div id="account" class="dropmenudiv_d">
<ul>
<li><a href="paginas/login/client" target="iframe">Klant Login</a></li>
<li><a href="paginas/login/siteadmin" target="iframe">Site Admin</a></li>
</ul>
</div>

This versus your "normal" drop down DIVs' HTML, which look like:


<!-- 2nd dropdown menu -->
<div id="domeinen" class="dropmenudiv_d">

<a href="paginas/domeinen/controle.php" target="iframe">Is uw domein nog vrij ?</a>
<a href="paginas/domeinen/mogelijkheden" target="iframe">Mogelijke domein extensies</a>
</div>

In other words, just a HTML issue. :)

Ch3vr0n
02-17-2009, 08:53 PM
sweet, nice that is was somethin so simple to fix. Stuff like that is easily overlooked :D

Thanks a lot for modifying the script. Now its exactly as i wanted.

Though optional a last question remains. Does the vertical menu work on the right side to with subs to the left ? :p