MyBB Community Forums

Hey guys another tutorial here for you.

How to create a jquery driven dropdown menu. (couldnt find a guide for this so sorry if there is.)

Step 1: add this to you header template or something along these lines

<ul id="menu">
	<li><a href="#">Parent 01</a></li>
	<li><a href="#" class="selected">Parent 02 > </a>
		<ul>
			<li><a href="#">Item 01</a></li>
			<li><a href="#" class="selected">Item 02</a></li>
			<li><a href="#">Item 03</a></li>
		</ul>
		<div class="clear"></div>
	</li>
	<li><a href="#">Parent 03 > </a>
	<ul>
		<li><a href="#">Item 04</a></li>
		<li><a href="#">Item 05</a></li>
		<li><a href="#">Item 06</a></li>
		<li><a href="#">Item 07</a></li>
	</ul>			
		<div class="clear"></div>
	</li>
	<li><a href="#">Parent 04</a></li>
</ul>

Replace Parent with the menu item name and url and Item with the submenu name and link.

Once this is done you will need to edit your global.css (we will presume you know how to do this.)

Step 2: Add this to the bottom of your global CSS

/* remove the list style */
#menu {
	margin:0; 
	padding:0; 
	list-style:none;
}	

#menu li {
	float:left; 
	display:block; 
	width:100px; 
	background:#ccc; 
	position:relative;
	z-index:500; 
	margin:0 1px;
}

/* this is the parent menu */
#menu li a {
	display:block; 
	padding:8px 5px 0 5px; 
	font-weight:700;  
	height:23px; 
	text-decoration:none; 
	color:#fff; 
	text-align:center; 
	color:#333;
}

#menu li a:hover {
	color:#fff;
}

/* submenu, it's hidden by default */
#menu ul {
	position:absolute; 
	left:0; 
	display:none; 
	margin:0 0 0 -1px; 
	padding:0; 
	list-style:none;
}

#menu ul li {
	width:100px; 
	float:left; 
	border-top:1px solid #fff;
}


#menu ul a {
	display:block;  
	height:15px;
	padding: 8px 5px; 
	color:#666;
}

#menu ul a:hover {
	text-decoration:underline;	
}

*html #menu ul {
	margin:0 0 0 -2px;
}

Ofcouse you can change the style to customize it. once the css and template edits are done you will need to do one more thing.

Step 3: Add the javascript file and jquery to your headerinclude.

Open you header include template and add these lines

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dropdownmenu.js"></script>
<script>
    jQuery.noConflict();
</script>

Make sure to download the attached file and put it in /jscripts

When done successfully it should work the same way as the menu at the top of this webpage the style is different though.

Few issues in your code and post;

1) This is not correct;

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dropdownmenu"></script>

It should be like this;

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dropdownmenu.js"></script>

Notice the ending .js extension.

2) Where are the files to download ??

(2012-05-24, 04:52 PM)Yaldaram Wrote: [ -> ]Few issues in your code and post;

1) This is not correct;

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dropdownmenu"></script>

It should be like this;

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dropdownmenu.js"></script>

Notice the ending .js extension.

2) Where are the files to download ??

lol crap. didnt even notice either of them. went through it like 3 times. updating post.

EDIT: Post updated and file attached i feel stupid now.

Rebump to ask why there's a limit on menus?

<ul id="menu">
    <li><a href="{$mybb->settings['bburl']}/usercp.php">{$lang->welcome_usercp}</a>
        <ul>
            <li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a></li>
            <li><a href="{$mybb->settings['bburl']}/search.php?action=getnew" class="selected">{$lang->welcome_newposts}</a></li>
            <li><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">Buddies</a></li>
            <li><a href="{$mybb->settings['bburl']}/usercp.php?action=profile">Profile &gt;</a></li>
            <li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></li>
        </ul>
        <div class="clear"></div>
</li>
{$modcplink}
{$admincplink}
    <li><a href="{$mybb->settings['bburl']}/private.php">Messaging</a></li>
</ul>

When I try to add More stuff to the User CP menu, it vanishes altogether from my board.

i have this on my website now and its working fine, i just need to know how i can make borders for the menu above with black and the rollover text into red, how i can do that?

and the text size is to big i want it smaller cause otherwise my members cant see the name of Call of Duty MW3.

it was just a test for my skills and i really like this tutorial

http://www.warhood.com/demo

Well, just edit it in your global.css

EDIT: Nvm, fixed it

(2012-08-10, 06:20 PM)Destroy666 Wrote: [ -> ]EDIT: Nvm, fixed it but got another problems now..

What is your problem with it?

Anyone know how to center this whole thing in the header ?

Thanks in advance.

Wolfseye

---

(2012-08-19, 04:16 PM)Wolfseye Wrote: [ -> ]Anyone know how to center this whole thing in the header ?

Anyone ?

maybe you could do this <center>menus in here </center>