MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > JavaScript Dropdown Menus Explained
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

groovybluedog

2011-03-07, 05:07 PM
How would it be able to do this? (Will it be easy?)

newn

2011-03-15, 05:25 PM
The best way to find out is... trying it?

How can I change the color of the menu items?

jake_grant

2011-03-15, 07:29 PM
in the global.css edit .popup_menu

newn

2011-03-15, 09:39 PM
Thanks. Great script, works like a charm. Smile

lucasbytegenius

2011-03-25, 06:27 PM
AJS you're a genius!!!! THANK YOU SO MUCH!!!! Big Grin
Added it to my forum.
I seem to be having some problems when I perform actions on my forum that use javascript, mainly with quick-replying to threads.
The post shows up in the in the quick links bar!
Here's my header_welcomeblock_member:

<div class="mainwrap">
<div class="top_bar">
	<ul>
		<li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="top_bar_lout"><span>{$lang->welcome_logout}</span></a></li>
		{$admincplink}
		{$modcplink}
		<li><a href="{$mybb->settings['bburl']}/usercp.php" class="top_bar_ucp"><span>{$lang->welcome_usercp}</span></a></li>
	</ul>
</div>
<div class="header_main"><div class="header_left"><div class="header_right">
			<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
			<div class="header_side"><div id="panel">
<div style="background: transparent url({$mybb->user['avatar']}) 0 0 no-repeat;width:68px;height:68px;float:left"></div>
				<div class="panel_wrap">
					{$lang->welcome_back}
				</div>
			</div></div>
			<div class="clear"></div>
		</div></div></div>
		<div id="navbar">
			<ul id="nav">
                                <li><a href="{$mybb->settings['bburl']}/portal.php">Portal</a></li>
                                <li><a href="http://enigmachs.com/misc.php?page=blog">Blog</a></li>
				<li><a href="{$mybb->settings['bburl']}">Forums</a></li>
                                <li><a href="{$mybb->settings['bburl']}/Forum-Gallery">Gallery</a></li>
                                <li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
				<li><a href="{$mybb->settings['bburl']}/Thread-Forum-Rules">Rules</a></li>
				<li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
				<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
			</ul>
			<div id="search">
			<form action="{$mybb->settings['bburl']}/search.php" method="post">
				<div class="search_input_wrap"><input name="keywords" class="nav_search_input" title="Enter your search keywords" type="text" /></div>
				<input value="" name="submit-search" class="nav_search_button" type="submit" />
				<input type="hidden" name="action" value="do_search" />
			</form>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</div>
<div id="container"><div class="container_wrap">
	<div class="mainwrap">
		<div class="subnav">
			<div class="float_right"><a href="{$mybb->settings['bburl']}/search.php">Advanced {$lang->toplinks_search}</a></div>
                        <a href="{$mybb->settings['bburl']}/search.php?action=getnew" id="posts"><img src="http://www.enigmachs.com/images/bullet_arrow_down.png"</img>View Posts</a> 

<div id="posts_popup" class="popup_menu" style="display: none;">

	<div class="popup_item_container"><a href="search.php?action=getnew" class="popup_item"><img src="/images/newposts.png"</img> {$lang->welcome_newposts}</a></div>

	<div class="popup_item_container"><a href="/search.php?action=getdaily" class="popup_item"><img src="/images/todaysposts.png"</img> {$lang->welcome_todaysposts}</a></div>

        <div class="popup_item_container"><a href="/search.php?action=finduser&uid={$mybb->user['uid']}" class="popup_item"><img src="/images/findposts.png"</img> Find Your Posts</a></div>
</div>

<script type="text/javascript">

// <!--

	if(use_xmlhttprequest == "1")

	{

		new PopupMenu("posts");

	}

// -->

</script> | 
<a href="{$mybb->settings['bburl']}/private.php" id="pm_menu"><img src="http://www.enigmachs.com/images/bullet_arrow_down.png"</img>{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}{$lang->profile_comments_new_inmenu_count}
<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"><img src="/images/compose.png"</img> Compose</a></div>

<div class="popup_item_container"><a href="private.php?fid=1" class="popup_item"><img src="/images/inbox.png"</img> Inbox</a></div>
<div class="popup_item_container"><a href="private.php?fid=2" class="popup_item"><img src="/images/sent.png"</img> Sent Items</a></div>

<div class="popup_item_container"><a href="private.php?fid=3" class="popup_item"><img src="/images/drafts.png"</img> Drafts</a></div>

<div class="popup_item_container"><a href="private.php?fid=4" class="popup_item"><img src="/images/trash.png"</img> Trash Can</a></div>

<div class="popup_item_container"></div>
</div>

<script type="text/javascript">

// <!--
if(use_xmlhttprequest == "1")
{

new PopupMenu("pm_menu");
}

// -->

</script>
| <a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a> | <a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}" title="{$lang->profile_comments}">{$lang->profile_comments_new_inmenu}</a> |
<a href="newpoints.php" id="newpoints"><img src="http://www.enigmachs.com/images/bullet_arrow_down.png"</img>Points</a>
<div id="newpoints_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container"><a href="newpoints.php" class="popup_item"><img src="/images/home.png"</img> Home</a></div>
<div class="popup_item_container"><a href="newpoints.php?action=donate" class="popup_item"><img src="/images/donate.png"</img> Donate</a></div>
<div class="popup_item_container"><a href="newpoints.php?action=bank" class="popup_item"><img src="/images/bank.png"</img> Bank</a></div>
<div class="popup_item_container"><a href="newpoints.php?action=shop" class="popup_item"><img src="/images/shop.png"</img> Shop</a></div>
</div>
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
new PopupMenu("newpoints");
}
// -->
</script>
</div>

And here's a pic:
[Image: 469663.png]

envira

2011-03-26, 09:09 AM
hi,
i just used your tutorial and i got some problem

First i made a menu in welcome_member

just copied the code you did for private messages and that worked fine for me.

i copied the same code and edited url's for user cp in the same template.

now i found that the private messages drop down not working,and the other one working.

can you help in fixing this

Alan S.

2011-03-26, 10:30 AM
Can you post the code you're using?

envira

2011-03-26, 12:41 PM
This is my header- welcomeblock- member template

I get the error in private messages menu

<li style="float: right;"><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"><strong>{$lang->welcome_logout}</strong></a></li>
</ul>
<div id="panel">
<span class="links">
{$modcplink}{$admincplink}
</span>
{$lang->welcome_back}<br />
<a href="{$mybb->settings['bburl']}/usercp.php" id="pm_menu"><b>My Profile</b></a> 
<div id="pm_menu_popup" class="popup_menu" style="display: none;">
    <div class="popup_item_container"><a href="usercp.php?action=profile" class="popup_item">Edit Profile</a></div>
    <div class="popup_item_container"><a href="usercp.php?action=avatar" class="popup_item">Edit Avatar</a></div>
    <div class="popup_item_container"><a href="usercp.php?action=editsig" class="popup_item">Edit Signature</a></div>
    <div class="popup_item_container"><a href="{$mybb->settings['bburl']}/usercp.php?action=socialsites" class="popup_item">Social Sites</a></div>
    <div class="popup_item_container"><a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}" class="popup_item">View Profile</a></div>
</div>
<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("pm_menu");
    }
// -->
</script>
 | <a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a> | <a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a> | <a href="{$mybb->settings['bburl']}/private.php" id="pm_menu"><b>My Mailbox</b></a> 
<div id="pm_menu2_popup" class="popup_menu2" 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_menu2");
    }
// -->
</script>
<!-- ProfileComments --> | <a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}" title="{$lang->profile_comments}">{$lang->profile_comments_new_inmenu}</a> {$lang->profile_comments_new_inmenu_count}<!-- /ProfileComments -->
<span class="links">
<a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a>{$mood_link}
</span>
</div>

Alan S.

2011-03-26, 07:55 PM
<li style="float: right;"><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"><strong>{$lang->welcome_logout}</strong></a></li>
</ul>
<div id="panel">
<span class="links">
{$modcplink}{$admincplink}
</span>
{$lang->welcome_back}<br />
<a href="{$mybb->settings['bburl']}/usercp.php" id="usercp_menu"><b>My Profile</b></a> 
<div id="usercp_menu_popup" class="popup_menu" style="display: none;">
    <div class="popup_item_container"><a href="usercp.php?action=profile" class="popup_item">Edit Profile</a></div>
    <div class="popup_item_container"><a href="usercp.php?action=avatar" class="popup_item">Edit Avatar</a></div>
    <div class="popup_item_container"><a href="usercp.php?action=editsig" class="popup_item">Edit Signature</a></div>
    <div class="popup_item_container"><a href="{$mybb->settings['bburl']}/usercp.php?action=socialsites" class="popup_item">Social Sites</a></div>
    <div class="popup_item_container"><a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}" class="popup_item">View Profile</a></div>
</div>
<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("usercp_menu");
    }
// -->
</script>
 | <a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a> | <a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a> | <a href="{$mybb->settings['bburl']}/private.php" id="pm_menu"><b>My Mailbox</b></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>
<!-- ProfileComments --> | <a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}" title="{$lang->profile_comments}">{$lang->profile_comments_new_inmenu}</a> {$lang->profile_comments_new_inmenu_count}<!-- /ProfileComments -->
<span class="links">
<a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a>{$mood_link}
</span>
</div>

envira

2011-03-26, 08:51 PM
Thanks and that is working awesome,btb how can i adjust the dropdown menu width and colors,which part of css i have to edit
Pages: 1 2 3 4 5 6 7 8
MyBB Community Forums > Resources > Tutorials > JavaScript Dropdown Menus Explained