MyBB Community Forums

Pages: 1 2

This has been asked a few times now so I thought I'd do a quick tutorial.

I'm not going to worry about styling the menu in this tutorial, this is purely to show you how to set the current/active state on your menu. It's up to you to make it look pretty. The following is based on the default MyBB 1.6 theme and default MyBB pages but it should be easy for anyone to use the same theory on a custom theme or custom pages.

First we need to add a few new items to the menu.

ACP >> Templates & Style >> Templates >> yourtheme >> Header Templates >> header

Find:

			<div class="menu">
				<ul>

Add after:

					<li><a href="{$mybb->settings['bburl']}/portal.php"><img src="{$theme['imgdir']}/usercp/home.gif" alt="" title="" />{$lang->toplinks_portal}</a></li>
					<li><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['imgdir']}/usercp/fsubscriptions.gif" alt="" title="" />Forums</a></li>

Now we need to add a unique ID to each list item, for each list item make the following change:

Find:

<li>

Replace with:

<li id="nav-portal">

You should now have something like this:

			<div class="menu">
				<ul>
					<li id="nav-portal"><a href="{$mybb->settings['bburl']}/portal.php"><img src="{$theme['imgdir']}/usercp/home.gif" alt="" title="" />{$lang->toplinks_portal}</a></li>
					<li id="nav-forums"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['imgdir']}/usercp/fsubscriptions.gif" alt="" title="" />Forums</a></li>
					<li id="nav-search"><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
					<li id="nav-member"><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
					<li id="nav-calendar"><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
					<li id="nav-help"><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
				</ul>
			</div>

We need to add some CSS to match the list item ID's with the body ID's we're going to add in a minute . I've just used the hover state styling from the default theme. If you're using this tutorial on anything but the default theme I recommend you copy and paste the CSS from the .menu ul a:hover, .menu ul a:active class and use that (or something similar) instead.

ACP >> Templates & Style >> Themes >> yourtheme >> global.css

Add:

#portal #nav-portal a,
#forums #nav-forums a,
#search #nav-search a,
#member #nav-member a,
#calendar #nav-calendar a,
#help #nav-help a {
	color: #4874a3; /* replace with your styling */
	text-decoration: none; /* replace with your styling */
}

Now we need to assign unique ID's to the body tags in our templates, I'm not going to go through every single one because there are a lot you could possibly want to add. But here's the general idea...

ACP >> Templates & Style >> Templates >> yourtheme >> Portal Templates >> portal

Find:

<body>

Replace with:

<body id="portal">

You should now see the current/active state on the menu when you're on the portal!

ACP >> Templates & Style >> Templates >> yourtheme >> Index Page Templates >> index

Find:

<body>

Replace with:

<body id="forums">

Hopefully by now you're starting to get the idea...?

ACP >> Templates & Style >> Templates >> yourtheme >> Search Templates >> search

Find:

<body>

Replace with:

<body id="search">

ACP >> Templates & Style >> Templates >> yourtheme >> Member List Templates >> memberlist

Find:

<body>

Replace with:

<body id="member">

If you still haven't got it, give up! Otherwise, carry on making the same changes in other templates until you have it all set up the way you like.

That's it!

Nice tips.

Now that was helpful indeed Big Grin

any screenshot?

No. There's little to show in a screenshot.

If you don't know what this does then you probably don't need or want it.

The mybb forum itself is a screenshot for you Toungue

when you are in a certain place, it changes its state

I find that this can be tedious with multiple plugins and pages. I built a jQuery function that kinda does this manually. It isn't perfect but it works.

//Add pathname to html tag
file_name = document.location.href;
file_end = (file_name.indexOf("?") == -1) ? file_name.length : file_name.indexOf("?");
file_page = file_name.substring(file_name.lastIndexOf("/")+1, file_end);
file_page = file_page.replace('.php','').replace('#','');

$('body').addClass("page_" + file_page);

if (file_page !== '') {
	$('.menu li').removeClass('active');
	$(".menu")
		.find('a[href *="' + file_page  + '.php"]')
		.parent("li")
		.addClass("active");
}

Here, you will have to make sure that your menu div or ul has the class of "menu", but this should work fine.

(2012-02-21, 09:59 PM)Audentio Wrote: [ -> ]I find that this can be tedious with multiple plugins and pages. I built a jQuery function that kinda does this manually. It isn't perfect but it works.
//Add pathname to html tag
file_name = document.location.href;
file_end = (file_name.indexOf("?") == -1) ? file_name.length : file_name.indexOf("?");
file_page = file_name.substring(file_name.lastIndexOf("/")+1, file_end);
file_page = file_page.replace('.php','').replace('#','');

$('body').addClass("page_" + file_page);

if (file_page !== '') {
	$('.menu li').removeClass('active');
	$(".menu")
		.find('a[href *="' + file_page  + '.php"]')
		.parent("li")
		.addClass("active");
}
Here, you will have to make sure that your menu div or ul has the class of "menu", but this should work fine.

I was wondering where do i add this code and in what way? Is this something that will be placed within the header template or is this something i need to manually add to the global.php file?

One last question //add pathname to html tag what exactely do you mean with this that i need to add all the individual links? Or do i just place the menu layout above this.

And sorry for the final question i think this code was written for menu's without dropdown menu's is there a way to change the code ever so slightly that it would highlight the mane menu + highlight the option in the dropdown menu.

PS i do know how to change the CSS code for this Toungue

And sorry for asking so many questions.

This goes in your headerinclude template or in an external JS file called inside the headerinclude template, and MUST be called AFTER jQuery. So you need to include that as well.

The comment there is just a description of what that section of code does. It adds the filename to the body class. For example, if you were on yoursite.com/calendar.php, the body would have a class of "page_calendar". The second part of the code basically takes the page name (in the above example it would take calendar.php and cut the .php part off leaving calendar", check to see if the .menu div contains that plus .php, and sets the parent <li> to have a class of "active". Come to think of it, I don't know what I have it require the .php, but ah well Toungue

I believe the code will do what you're asking. The code says in english to find the link in the .menu div associated with the page that you are currently are on. Find its parent list item and add the class of active to it. Although I think you would need to change .parent("li") to parents("li"), but I haven't tested it.

Good luck!

Thank you for the quick reply will try to sort it out and get it sorted. Smile

Pages: 1 2

Alan S.

Yaldaram

rzr

fachrils

Alan S.

rzr

Audentio

anori

Audentio

anori