MyBB Community Forums

Full Version: JavaScript Dropdown Menus Explained
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7 8
(2011-03-15, 07:29 PM)jake_grant Wrote: [ -> ]in the global.css edit .popup_menu

ooh yea thank you worked freaky awesome....you are genius.thankyou brother
(2010-11-22, 11:03 PM)AJS Wrote: [ -> ]You can use the inbuilt MyBB JavaScript to create your own dropdown menus very easily.

Quote:<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>

Ok, I found part of my problem, I forgot to add class="popup_item" to the end of the menu item's href code.
However it is still displaying wrong on my theme, the colors are off:

[Image: Screenshot-Banishments-MozillaFirefox.png]

What do I have to change in global.css, in the .popup_menu lines? I presume it's somewhere in .popup_menu .popup_item_container or one of the two .popup_menu .popup_item lines.
Thank you for this explanation. Very useful.
Thanks for this!!!
i was wondering if you can do this so when you hover over it the menu will come up and you can still clik the main button
I have done this but It will not work. This is my header: welcomeblock_member
<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("usercp_menu");
    }
// -->
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("pm_menu");
    }
// -->
</script>
<span style="float:right;">
<align="right">
<a href="{$mybb->settings['bburl']}/usercp.php" id="usercp_menu">{$lang->welcome_back}</a> 
<div id="usercp_menu_popup" class="popup_menu" style="display: none;">
    <div class="popup_item_container"><a href="member.php?action=profile" class="popup_item">View Profile</a></div>
    <div class="popup_item_container"><a href="usercp.php" class="popup_item">Edit Profile</a></div>
    <div class="popup_item_container"><a href="usercp.php?action=signature" class="popup_item">Signature</a></div>
    <div class="popup_item_container"><a href="usercp.php?action=avatar" class="popup_item">Avatar</a></div>
    <div class="popup_item_container"><a href="usercp.php?action=password" class="popup_item">Password</a></div>
</div>
|
<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>

|
 <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"><strong>{$lang->welcome_logout}</strong>
</a>
|
</align>
</span>
Is there also the option that the dropdown menu is showing up of you go with the mouse over it without clicking?? So if you move the mouse over the option the popup wil show up???

Thanks!
Someone ??????????
Annyone pleace!!!

>????????
Pages: 1 2 3 4 5 6 7 8