XF 1.0 Quick Navigation Menu

Many forum systems include a forum jump menu. This is usually a popup-menu that allows you to jump directly from one area of the site to another, when normally it would require several navigational steps.

The forum jump menu tends to be implemented as a <select> element with javascript behaviour attached to it so that when you release the menu, you jump to the selected forum or site area.

However, doing it like this has a few of fairly major down-sides.

Firstly, in order to build the forum jump menu, the system needs to load theentire forum tree into memory and output it. On a board with a lot of forums, this can be quite an overhead.

Secondly, the use of a <select> means that you are not able to choose how to access the areas listed in the menu. They will be loaded into the same browser window/tab as you are currently using.

Thirdly, from a design stand-point, a <select> will expand to be as wide as the longest element in its menu, even when it is closed. This means that if you have a forum with a long name, or a particularly deeply-nested forum, your <select> may appear extremely wide, to the point of interfering with other page elements.

XenForo provides an enhanced version of the old forum jump, and in the process, gets around both of the issues described above.

Firstly, we only build the forum jump (or Quick Navigation Menu as we call it) when you need it. We don't waste time constructing the menu on every page, we wait until you ask for it.

Secondly, all of the links in our Quick Navigation Menu are actually regular <a href> links. This means that you can right-click them, middle-click them or work with them however you like in order to load the linked content the way you want it.

Thirdly, the Quick Navigation Menu is built with a standard template, so if you want to customize its contents and add links to non-XenForo areas of your site, or add-on functionality, it's as easy as a template edit.

Finally, we place the Quick Navigation Menu in an overlay that sits on top of the content. This allows us to work with a lot more screen real estate without interfering with the rest of the design.

And how do you access the Quick Navigation Menu? You just click the diminutive little gadget that sits at the right of the top and bottom breadcrumb units.

Job done.

 

[DRE]

The text is also part of the image that resides in the spritesheet.

Oh okay um. Can I use your sprite sheet please? lol

 

[Shelley]

Oh okay um. Can I use your sprite sheet please? lol

I don't mind you using my spritesheet but it may cause more problems for you. Firstly, I've modified and added different coloured icons to compliment my style and secondly I've adjusted the sizes of the rss feed icon within the spritesheet so you would have to add and fix more stuff into your extra.css. In short it wouldn't be worth it just to have the (what i think) hideous styling button in your breadcrumbs.

What I'll do when I get a few minutes is I'll grab a default spritesheet and add in the additional image for those that wish to have the ign type style breadcrumb image. Personally, i think it looks hideous I was more posting this for you to show you how easy it was without the need to edit any templates.

 

[x_Stricken_x]

Couldn't you simply modify the CSS and add text to where the image is and style it to look like a button? I can't test it since I'm not a customer, but I think that would work.

 

[DRE]

I don't mind you using my spritesheet but it may cause more problems for you. Firstly, I've modified and added different coloured icons to compliment my style and secondly I've adjusted the sizes of the rss feed icon within the spritesheet so you would have to add and fix more stuff into your extra.css. In short it wouldn't be worth it just to have the (what i think) hideous styling button in your breadcrumbs.

What I'll do when I get a few minutes is I'll grab a default spritesheet and add in the additional image for those that wish to have the ign type style breadcrumb image. Personally, i think it looks hideous I was more posting this for you to show you how easy it was without the need to edit any templates.

Yes Please!!! Hmm yes the button does look kind of hideous but its the most useful button on the site lol. I'll take it even if it's hideous. At least we're able to change the color though.

 

[Shelley]

.breadcrumb .jumpMenuTrigger {
    background: url("@imagePath/xenforo/xenforo-ui-sprite.png") no-repeat scroll 6px -52px #131313 !important;
    border-radius: 4px 4px 4px 4px;
    height: 20px;
    margin: 2px;
    width: 115px;
}
 
.breadcrumb .jumpMenuTrigger:hover {
    opacity: 0.6;
}

 

[DRE]

Looks great now! Not hideous at all! Thanks!

 

[DRE]

My members are telling me that they didn't even know it was there. I told them that it has always been there. All I did was add words next to it. It looks great. Thanks alot Shelly! This should be added to Xenforo default package.

 

[kkm323]

thanks shalley very useful tool
for those who are looking for an the arabic version for the spritsheet and psd file for other languages see the attachment

 

[Deepmartini]

Is there a way to remove the "quick navigation" entirely? I am trying to simplify my site to give it a minimal look. I deleted all of the contents in the quick_navigation_menu and quick_navigation_menu.css but the little icon still shows up and when you click on it, it tries to open (but won't cause theres nothing there). How do I get rid of that entirely? Is there a feature in the control panel for this or do I have to delete the image itself as well? I want to remove it but not break other parts of the site.

 

[steel_curtain]

Is there a way to remove the "quick navigation" entirely? I am trying to simplify my site to give it a minimal look. I deleted all of the contents in the quick_navigation_menu and quick_navigation_menu.css but the little icon still shows up and when you click on it, it tries to open (but won't cause theres nothing there). How do I get rid of that entirely? Is there a feature in the control panel for this or do I have to delete the image itself as well? I want to remove it but not break other parts of the site.

Add to extra.css

.breadcrumb .jumpMenuTrigger {
display:none;}

 

[Deepmartini]

Add to extra.css

.breadcrumb .jumpMenuTrigger {
display:none;}

Wow that worked! Thanks!!!

 

[CTXMedia]

Just added this to CycleChat - thanks for the info.

 

[Morgain]

I added the Quick Navigation link to my sidebar - which is on practically every page.
It's amazingly useful once it comes out of hiding behind its tiny icon. Together with the Recent Threads link it practically does all my navigation.

This is my code from my sidemenu template:

<img src="@imagePath/starmini.png" / >&nbsp;&nbsp;
<a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:phrase open_quick_navigation}"><b>QUICKMENU</b><!--{xen:phrase jump_to}...--></a>
&nbsp;&nbsp;<img src="@imagePath/starmini.png" / >

The brown bits are styling specific to how I have it.
- A star image each side of it which is how I emphasise the key elements of the menu.
- Bold.
- Label QUICKMENU as this fits better into a small space than Quick Navigation.

 

[Morgain]

Also added Quick Navigation as a navbar tab using code Jake Bunce provided in this post.
It's in his nodes-as-tabs addon but I don't think that line of code needs the addon.
Again I use the title QUICKMENU as it's so much shorter.

 

[JacquiiDesigns]

Certainly wish this hadn't been removed in XF 2.x!
Wow. It was a great feature and I'm looking for a way to implement it in XF 2.x
Any ideas? I'll definitely appreciate suggestions/advise on how to create such a functionality in XF 2.x
Thanks!

J.

 

[RobinHood]

I think this was slightly ahead of it's time in the current usefulness as a concentrated node menu like this on a small screen like a smartphone. But I think the repositioning it to the breadcrumb in transitioning from the vb jump menu version kind of killed it.

Part of the beauty and utility of the jump menu was that it was below the thread. So you get to the end of a thread and get presented with a new way to find new content or navigate to another section of the forum besides the 'What's New' link.