JavaScript Dropdown Menus Explained

[Alan S.]

You can use the inbuilt MyBB JavaScript to create your own dropdown menus very easily.

<a href="somepage.php" id="example_menu">Some Page</a>
<div id="example_menu_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container"><a href="somepage.php" class="popup_item">Some Page</a></div>
<div class="popup_item_container"><a href="anotherpage1.php" class="popup_item">Another Page 1</a></div>
<div class="popup_item_container"><a href="anotherpage2.php" class="popup_item">Another Page 2</a></div>
</div>
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
new PopupMenu("example_menu");
}
// -->
</script>

Red: This is the menu ID, they must all be identical within the menu and unique to that menu. You can't have the same ID for different menus.
Blue: This is the link address for users with JavaScript disabled in their browser.
Dark blue: The main link text.
Green: The menu links.
Orange: The menu items text.

The following example will give you a dropdown menu for Private Messages:

In header_welcomeblock_member, find:

<a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a>

Replace with:

<a href="{$mybb->settings['bburl']}/private.php" id="pm_menu">{$lang->welcome_pms}</a> 
<div id="pm_menu_popup" class="popup_menu" style="display: none;">
	<div class="popup_item_container"><a href="private.php?action=send" class="popup_item">Compose</a></div>
	<div class="popup_item_container"><a href="private.php?fid=1" class="popup_item">Inbox</a></div>
	<div class="popup_item_container"><a href="private.php?fid=2" class="popup_item">Sent Items</a></div>
	<div class="popup_item_container"><a href="private.php?fid=3" class="popup_item">Drafts</a></div>
	<div class="popup_item_container"><a href="private.php?fid=4" class="popup_item">Trash Can</a></div>
</div>
<script type="text/javascript">
// <!--
	if(use_xmlhttprequest == "1")
	{
		new PopupMenu("pm_menu");
	}
// -->
</script>

[~Rs]

thanks bro, nice coding

[AXVIS]

This user has been denied support.

Is there any demo of this?

[Alan S.]

It's the same JavaScript that the Edit button uses, no need for a demo really.

[One-Two]

Thank you for this useful tutorial.
Damn, that's really cool.

Thanks again!

[BreadTM]

AJS, what if i wanted to create a dropdown of things don't necessarily go together. Your example is that if that don't have javascript enabled, they just get sent to the private.php page, or they have javascript and see the dropdown with all the messaging options.
I want to create a dropdown that will have the admincp, modcp, usercp, and logout contained in it. How would i go about editing the code for those without javascript? I already know how to code it to include those links, so you don't need to help me with that part.

[Alan S.]

I want to create a dropdown that will have the admincp, modcp, usercp, and logout contained in it. How would i go about editing the code for those without javascript? I already know how to code it to include those links, so you don't need to help me with that part.

I'm not really sure what you're asking...

[BreadTM]

I want to create a dropdown that will have the admincp, modcp, usercp, and logout contained in it. How would i go about editing the code for those without javascript? I already know how to code it to include those links, so you don't need to help me with that part.

I'm not really sure what you're asking...

in your example if the person didn't have javascript enabled, instead of a dropdown menu they just got directed to private.php, right?
well what if the dropdown menu i'm creating doesn't have an equivalent of private.php[ ie, there is no page where the links to the admin, mod, and user cps are listed like your example of inbox, sent, drafts, etc.]

i'll try to explain better.
this is what want to do...

<a href="{$mybb->settings['bburl']}/???.php" id="ucp_menu">Options</a>
<div id="ucp_menu_popup" class="popup_menu" style="display: none;">
    <div class="popup_item_container">{$admincplink}</div>
    <div class="popup_item_container">{$modcplink}</div>
    <div class="popup_item_container"><a href="usercp link goes here" class="popup_item">User CP</a></div>
    <div class="popup_item_container"><a href="logout link here" class="popup_item">Logout</a></div>
</div>
<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("ucp_menu");
    }
// -->
</script>

as you can see, i created the dropdown menu with the all the cp links and the logout link, BUT if someone doesn't have javascript enabled i don't exactly know a work around to display them differently since the code will only direct them ???.php[private.php in your example.]

edit: i was able to find a work around, sorta. it works for now.

[adbrad]

On your forum where the user name is in the posts you have certain options listed there what would the code for that be.

[Alan S.]

edit: i was able to find a work around, sorta. it works for now.

Care to share? I'd be interested to see what you've done.

On your forum where the user name is in the posts you have certain options listed there what would the code for that be.

There's a plugin for that on the mods site.