1
#1
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted January 30th 2011, 11:15pm
The past three examples have shown you how to add all sorts of neat features using widgets. This example is the last in the series, and it's a beauty! We're going to create a widget that moves the navbar into a pop-up, and creates a tab on the widget bar that when clicked, displays the contents of the navbar! Since it uses the same classes and functions (API) as the other tabs, it will work the same as the other tabs. This widget MUST be installed immediately after the widget from Example 5. In that way, the navbar tab will always be on the far right of the widget bar.

The script for this example is similar to the Online Stats script, but it has some additions to fix problems that arise by moving the navbar to a pop-up. Here's the script:

<script type="text/javascript">
var CopyrightNotice = 'Drop-down navbar widget script for forumotion Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';

jQuery(function() {
var y=document.getElementById('submenu');
y.style.display='none';
y.id='navbar';
y.className='module borderwrap';
jQuery(y).append(jQuery(y).find('a.mainmenu'));
jQuery(y).append(jQuery('#search_menu'));
jQuery('a.mainmenu img').remove();
y.removeChild(y.firstChild);
x=document.getElementById('widgetbar');
x.appendChild(y);
jQuery(y).before('<div class="wmenu wrt" onclick="togglemenu(this.nextSibling)">Navbar</div>');
y=document.getElementById('userlinks');
x.parentNode.insertBefore(y,x.nextSibling);
});
</script>

What this script first does is find the navbar (#submenu) and give it a new ID. This is needed because the navbar has a lot of CSS associated with it, and all its CSS is based on #submenu. By giving the navbar a new ID, we are disabling the navbar CSS. The navbar then gets the same class name as all other widgets. What happens next is a lot of manipulation to remove the parts of the navbar HTML that would cause problems when it becomes a pop-up. Most importantly, this script REQUIRES that the "Display only images in the navbar" setting in the ACP be set to NO because it displays TEXT, not IMAGES. You can modify the script to support images in the pop-up by removing the "jQuery('a.mainmenu img').remove();" line, but the pop-up will require custom CSS that is beyond the scope of this example. Finally, the script moves the navbar to the correct location, creates the tab in the widget bar, and moves the widget bar to the former location of the navbar.

Since we disabled the navbar CSS by changing its ID, we will need some CSS to support the pop-up navbar:

#navbar {right: 0px; width: 225px; text-align: center;}
#navbar a {display: block; background: #eff1f3; font-size: 13px; line-height: 20px; text-decoration: none;}
#navbar a:hover {background: #c0c0c0; color: #000000;}
#search_menu {position: static !important;}

Change the background, color, font-size, etc values to what looks best on your forum. The last rule is interesting because it puts the search pop-up inside the navbar pop-up.

Finally, if you have installed the Online Stats widget, its tab will be moved. This was discussed in Example 7. To make its pop-up display underneath the new tab location, change the right: value as described in Example 7 so the CSS rule looks like this:

#widgetbar #fo_stat {right: 125px; width: 500px;}

That's it! Enjoy your drop-down navbar!

You may be wondering why some of these features are being done in widgets, when they would be more functional if they were done elsewhere. It's called EDUCATION! I don't want people to just cut and paste the code from here into their forums. I've given you all the tools and information you need to put a chatbox and drop-down navbar on every page of a forumotion forum. If you want a fully-functional pop-up chatbox and drop-down navbar, you'll need to figure it out yourselves. But you can always ask me for advice if you get stuck...you know where to find me. :D

Have fun!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted August 9th 2011, 6:39am
Hi Dion!

Are you talking about this thing that you have in this amazing forum?

Image


I have some questions about the navbars:
1. Can this work in phbb3?
2. How is it displayed, say, one of my members received a PM? I tried it on here, I didn't see a "flashing" notification of some sort? Is there a workaround for that?
3. How do I add a separate bar (example, a bar beside 'Page Options' and User Controls', for links of specific topics in the forum? Like, a bar with a drop down of links of some thread topics.


Thanks!
φ
Posts:
Avatar
Guest
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted August 9th 2011, 11:38am
1) Can you create drop-down navigation like this board on phpBB3? Sure! It's a little more difficult than IPB2/Invision due to the structure of the phpBB3 navbar, however.

2) The PM popup notification setting is in your profile.

3) The navigation script used on this forum will not be made available. Sorry. However, as I said above, the script in this example is a great starting point to develop your own drop-down navigation system.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted August 9th 2011, 1:30pm
Thanks!! Though I was half wishing you'd share a starting point or the very simplest nav bar script for Phbb3. Tee hee! :oops:
φ
Posts:
Avatar
Guest
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted August 9th 2011, 1:39pm
The starting point is this example. Find this line:

var y=document.getElementById('submenu');

and change it to:

var y=jQuery('#page-header .navbar')[0];

That will allow the example code to access the phpBB3 navbar. You'll still need to modify a line in the example to make it compatible with phpBB3 (userlinks needs to be changed to something in the phpBB3 DOM), and the CSS would need to change slightly as well.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted August 9th 2011, 3:05pm
Thanks!
φ
Posts:
Avatar
Guest
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted August 9th 2011, 6:16pm
I have one question: how can I get the dropdown to drop down underneath the button like all the other widgets do?

http://www.wackyswebkinznewz.com/forum is my forum address so you can see.
φ
Posts: 21
Joined: August 6th 2011, 11:00pm
Location: Tennessee
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted August 9th 2011, 6:28pm
That's because you're missing a line in your CSS:

#widgetbar .wmenu.wrt {float: right; margin-right: 0px; margin-left: 10px;}
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted August 9th 2011, 6:29pm
Dion said:
That's because you're missing a line in your CSS:

#widgetbar .wmenu.wrt {float: right; margin-right: 0px; margin-left: 10px;}


Oh. Thanks so much! :)
φ
Posts: 21
Joined: August 6th 2011, 11:00pm
Location: Tennessee
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted September 11th 2011, 1:15pm
I noticed when I added this to my forum the tabs, except for Information, on the Profile pages are removed. They are added to the new navigation bar. Is there a way to keep the tabs on the Profile pages.
φ
Posts: 59
Joined: September 7th 2011, 11:00pm
Location: Texas, United States
Likes Given: 51
Likes Received: 1
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted September 11th 2011, 5:24pm
If you find this line in the script:

jQuery(y).append(jQuery('a.mainmenu'));

and change it to this:

jQuery(y).append(jQuery(y).find('a.mainmenu'));

The problem will go away. Thanks for reporting this! I'll be updating the script in the first post with this change.

Note that this topic only applies to IPB2/Invision boards.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 8: Drop-Down Navbar (IPB2/Invision)
Posted September 11th 2011, 6:01pm
Thanks Dion. I forgot to say in my post that I use Invision. This will make it look better with the profile tabs on the page not in the navigation bar.
φ
Posts: 59
Joined: September 7th 2011, 11:00pm
Location: Texas, United States
Likes Given: 51
Likes Received: 1
Topic locked
12 posts

Who is online

Users browsing this forum: No registered users and 1 guest