Thread Rating:
  • 10 Vote(s) - 3.4 Average
  • 1
  • 2
  • 3
  • 4
  • 5
JavaScript Dropdown Menus Explained
#53
(11-22-2010, 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:
Code:
<a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a>

Replace with:
Code:
<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.
Reply


Messages In This Thread
RE: JavaScript Dropdown Menus Explained - lucasbytegenius - 05-04-2011, 06:54 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)