MyBB Community Forums

Full Version: Dropdown List
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
On my forum, I have a navbar. Here is the code at the moment:

<table class="tnav" border="0" cellspacing="0" cellpadding="0" align="center">
<tr align="center">
<td class="navbar"><a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a></td>
<td class="navbar"><a href="{$mybb->settings['bburl']}/portal.php">Home</a></td>
<td class="navbar"><a href="{$mybb->settings['bburl']}/index.php">Forums</a></td>
<td class="navbar"><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></td><td class="navbar"><a href="search.php?action=getnew">{$lang->welcome_newposts}</a></td>
<td class="navbar"><a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a></td>
<td class="navbar"><a href="$settings[bburl]/search.php">{$lang->toplinks_search}</a></td>
</tr>
</table>

I would like to add a drop-down list when I mouse over "Home" with Help, Links, and anything else.
You can try the solution here:
http://community.mybb.com/thread-81500.html

Or find one here and customize your self:
http://www.dynamicdrive.com/search/searc...zoom_and=1

You'll of course need to upload any java script files to your server and direct it there.
You can use the built in JavaScript although that won't be on hover, that would require a click:

<table class="tnav" border="0" cellspacing="0" cellpadding="0" align="center">
<tr align="center">
<td class="navbar"><a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a></td>
<td class="navbar"><a href="{$mybb->settings['bburl']}/portal.php" id="home_menu">Home</a>
<div id="home_menu_popup" class="popup_menu" style="display: none;">
	<div class="popup_item_container"><a href="misc.php?action=help" class="popup_item">Help</a></div>
	<div class="popup_item_container"><a href="#" class="popup_item">Links</a></div>
	<div class="popup_item_container"><a href="#" class="popup_item">Other</a></div>
	<div class="popup_item_container"><a href="#" class="popup_item">Other</a></div>
	<div class="popup_item_container"><a href="#" class="popup_item">Other</a></div>
</div>
<script type="text/javascript">
// <!--
	if(use_xmlhttprequest == "1")
	{
		new PopupMenu("home_menu");
	}
// -->
</script>
</td>
<td class="navbar"><a href="{$mybb->settings['bburl']}/index.php">Forums</a></td>
<td class="navbar"><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></td><td class="navbar"><a href="search.php?action=getnew">{$lang->welcome_newposts}</a></td>
<td class="navbar"><a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a></td>
<td class="navbar"><a href="$settings[bburl]/search.php">{$lang->toplinks_search}</a></td>
</tr>
</table>

Otherwise the best method is to use CSS, Google for "CSS dropdown menu".