TinyPortal

Quick Hack Dropdown
Please feel free to make changes/improvements (which will be many) and post them here.  I hope this helps out some people that are looking for this particular functionality.

Anywho…

I was researching dropdown menus like Mirage and other themes have.  I noticed people are using the ActiveLink Drop Down from DynamicDrive.com (http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm) and tried installing that on my forum.  I got it to work, but I could not find the conflict between that and my style.css file.  Every time I loaded the code, my entire portal would have incorrect display settings for just about everything.  I went to Stu Nicholls’ site (http://www.cssplay.co.uk/index), found some basic css examples (http://www.cssplay.co.uk/menus/basic_dd.html) and incorporated my own tweaked code version.  It may be a hack way to do it, but I wanted to have the basic functionality without needing to load an entirely different theme.  Nothing against the theme developers!  I just wanted to stick with what I had.  

In the index.template.php file, I took code that looks like this:


if($settings['TPortal_front_type']!='boardindex')
// Show the [forum] button.
echo ($current_action=='forum' || $context['browser']['is_ie4']) ? '<td class="maintab_active_first">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action=='forum' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=forum">'.$txt['tp-forum'].'</a>
</td>' , $current_action=='forum' ? '<td class="maintab_active_last">&nbsp;</td>' : '';



And changed it to this:


// Show the [new_tab] button.
echo ($current_action==' new_tab ' || $context['browser']['is_ie4']) ? '<td class="maintab_active_first">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action==' new_tab ' ? 'active_back' : 'back' , '">
<DIV class="drop_down">
<UL>
<A href="insert_link_here.php">LINK NAME<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<LI>
<TABLE cellpadding="0" cellspacing="0" border="0">
<TBODY>
<TR>
<TD><![endif]-->
<UL>
<LI class="sub"><A title="Placeholder" href="#">Placeholder</A></LI>
<LI class="sub"><A title="Placeholder" href="#">Placeholder</A></LI>
<LI class="sub"><A title="Placeholder" href="#">Placeholder</A></LI>
<LI class="sub"><A title="Placeholder" href="#">Placeholder</A></LI>
<LI class="sub"><A title="Placeholder" href="#">Placeholder</A></LI>
<LI class="sub"><A title="Placeholder" href="#">Placeholder</A></LI>
<LI class="sub"><A title="Placeholder" href="#">Placeholder</A></LI>
<LI class="sub"><A title="Placeholder" href="#">Placeholder</A></LI>
</UL>
<!--[if lte IE 6]>
</TD>
</TR>
</TBODY>
</TABLE>
</A>
</LI>
</UL>
</div>
</td>' , $current_action==' new_tab ' ? '<td class="maintab_active_last">&nbsp;</td>' : '';


In your styles.css file, add the following:


.drop_down DIV {
PADDING-RIGHT: 0px; POSITION: top; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; vertical-align: top
}
.drop_down UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}
.drop_down LI {
Z-INDEX: 100; FLOAT: left; POSITION: relative
}
.drop_down TABLE {
Z-INDEX: 20; LEFT: 0px; POSITION: absolute; TOP: -1px;
}
.drop_down A:link, drop_down A:visited {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 10px; font-family: tahoma, sans-serif; PADDING-BOTTOM: 0px; COLOR: #000; MARGIN-RIGHT: 1px; PADDING-TOP: 0px; TEXT-ALIGN: center; TEXT-DECORATION: none
}
.drop_down A:hover {
background: url(images/trans.gif) ;
}
.drop_down UL UL {
VISIBILITY: hidden; POSITION: absolute; HEIGHT: 0px; background: url(images/maintab_back.gif) left bottom no-repeat;
}
.drop_down UL LI:hover UL {
VISIBILITY: visible; background: url(images/maintab_back.gif) left bottom no-repeat;
}
.drop_down UL A:hover UL {
VISIBILITY: visible; background: url(images/maintab_back.gif) left bottom no-repeat;
}
.sub {
PADDING-RIGHT: 3px; DISPLAY: block; PADDING-LEFT: 3px; FONT-SIZE: 10px; font-family: tahoma, sans-serif; PADDING-BOTTOM: 6px; COLOR: #000; MARGIN-RIGHT: 2px; PADDING-TOP: 4px; TEXT-ALIGN: center; TEXT-DECORATION: none; background: #ECE9D8; border: 1px; border-bottom: solid; border-bottom-color:  #696969;
}



By the way, I had problems with the DIV tag throwing off the spacing along the tabs, so I changed another element in style.css:


.mirrortab_back, .mirrortab_active_back
{
color: #000000;
text-decoration: none;
font-size: 9px;
vertical-align: bottom;
padding: 6px 6px 2px 6px;  // this is the line I changed.
font-family: tahoma, sans-serif;
}


I KNOW there are better ways to do this, but I have been learning as I go and figured I’d simply let everyone have this and watch it change and grow for the better.  My big issue was finding most people having to settle for a specific theme in order to get the functionality, when all they really wanted was a dropdown menu on the theme of their choice.

I still have to research how to get my custom tabs that I inserted into index.template.php so that they get the actual tab borders display around them when they are selected.  Someone can either post that for me or I’ll search later.

As I said, this is a "Quick Hack" version.  Please don't flame my poor coding when all I'm trying to do is help out.  I hope this helps out some of you and I also hope some of you uber-coders can tweak it some more and share it back here.

ENJOY! ;D

Just wondering if anyone has tried this...

Well, I was editing our portal at the office and needed another dropdown on the main tab menu and this worked like a charm once more.  Since I had figured out a quick way to get it done, all I simply needed was to copy and paste the index.template.php table for the dropdown and change some links.  Can someone please tell me if I have reinvented the wheel (even if you say "Poorly, at that.") and if there is something else out there that does this.  I looked for a long time to try finding this functionality and could only find links to people mentioning you have to change your theme to one that has it built-in already.

Thanks.

Is there a link where I can see this working?

Did you look at the links in the first post that point to references for what he did?

i tried it in default theme.

it didn't work.
http://ihf.lp.pl/index.php?theme=1