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.

 

[Abdulaziz]

It's not the same, read the first post to see why the Quick Navigation Menu is different and unique. It's not the same as Thread List Display (e.g. there is not <select> in the Quick Navigation Menu, Also it does not load only when it's called) and that's the trick.

I know it is not a <select>. and it could be loaded when needed using AJAX.

 

[Ahmed]

You got a point.

 

[Grover]

Explanations like in the first posting clearly shows how much bright thought is put into the UI/UX of xenForo. I am a big, I say BIG promoter when it comes to the importance of User Interfaces. The majority of my suggestions in the past (and especially now since vB4.0 was released, because that UI is...well...) concerning vBulletin were aimed at improving the enduser UI/UX experience. I am so glad to find out that the development team behind xenForo puts so much thought and effort in the UI/UX of this product. What a much, much needed breath of fresh air!

 

[Reeve of Shinra]

Very nice but would never have seen it if someone didn't point it out.

 

[Grover]

Very nice but would never have seen it if someone didn't point it out.

That's the only negative thought about it, I had as well in the beginning. That maybe the little arrow alone is not clear enough. But, once you know it, you will never forget it, huh? So, it's not an issue for me.

 

[Floris]

When I did a short 7 minute talk at an Amsterdam University last summer I tried to explain with words how important the user experience and user interface is, and how HTML5/CSS3 is going to help push this forward to a web where logical interaction together with still beautiful design creates an experience for the end-user that builds on their mood while browsing the site. I wish I was able to use XenForo's features as an example, such as the site navigation popup. Back in the day these would be a block in the top right, polluting the content of the page. No way, except for a link to a new page, to hide it. These days we can offer it at various positions through the same page, within the design and layout, without polluting the content, and actually complimenting it by having made (during research and development) a decision that makes it a fun experience to explore what the inviting popup arrow does to get to that content. Learning the user that there's more to the site if they're looking for more.

 

[Floris]

That's the only negative thought about it, I had as well in the beginning. That maybe the little arrow alone is not clear enough. But, once you know it, you will never forget it, huh? So, it's not an issue for me.

But it is in the bread crumb, you "read" the layout as:

I see I can go Home > Forum ... and on the right there's an arrow, there's more? ...

 

[ManagerJosh]

That's the only negative thought about it, I had as well in the beginning. That maybe the little arrow alone is not clear enough. But, once you know it, you will never forget it, huh? So, it's not an issue for me.

I feel it's pretty clear. I found it on my first day here at on xenForo.

 

[Tigratrus]

Is there any ability to use separate templates for the Quick Nav Menu depending on what forum or group of forums you are in? Or a way to build some logic into it to provide different choices in the custom section of the Quick Nav depending on where you are?

There are many sites (we're one) that have functionally different parts of the forum system, and it would be more helpful to show what would amount to context sensitive resources/links.

I should mention that we killed the vB jump menu on our site and never looked back, this looks much more useful! As seems to be SOP here at XF.

 

[Mike]

It's a template and it knows what forum you're in (to select/scroll to it), so you can add logic based on that.

 

[DRE]

I'm pretty sure no one uses this on my site because they don't even know it's there.

How do I put the text 'Forum Menu' right next to the Quick Navigation Menu like on www.ign.com/boards ?

 

[Morgain]

How can I put a link to open it somewhere on a page?
XF Page?
In the sidebar?
Navbar?

I'm REALLY playing with Navigation here?

 

[Digital Doctor]

I'm pretty sure no one uses this on my site because they don't even know it's there.

Definitely.

How do I put the text 'Forum Menu' right next to the Quick Navigation Menu like on www.ign.com/boards ?

looks great !

 

[DRE]

Definitely.

looks great !

I know right! How do I do that? Except I'd just rename mine Quick Navigation Menu

 

[Paul B]

Well the simplest solution is to create an image and update the .breadcrumb .jumpMenuTrigger CSS.

A very simple change.

 

[Shelley]

I know right! How do I do that? Except I'd just rename mine Quick Navigation Menu

As paul said you could do this via extra.css by doing it through imagery. I've done an example and added an image to the spritesheet changed the trigger coordinates and adjusted the css. You can see the crude/quick example. It actually looks better with the height set at 20px and a margin of 2px.

.breadcrumb .jumpMenuTrigger {
    background: url("@imagePath/xenforo/xenforo-ui-sprite.png") no-repeat scroll 6px -56px #000000;
    border-radius: 4px 4px 4px 4px;
    height: 22px;
    margin: 1px;
    width: 115px;
}

you could even add some hover decor

.breadcrumb .jumpMenuTrigger:hover {
opacity: 0.6;
}

 

[DRE]

As paul said you could do this via extra.css by doing it through imagery. I've done an example and added an image to the spritesheet changed the trigger coordinates and adjusted the css. You can see the crude/quick example. It actually looks better with the height set at 20px and a margin of 2px.

.breadcrumb .jumpMenuTrigger {
    background: url("@imagePath/xenforo/xenforo-ui-sprite.png") no-repeat scroll 6px -56px #000000;
    border-radius: 4px 4px 4px 4px;
    height: 22px;
    margin: 1px;
    width: 115px;
}

you could even add some hover decor

.breadcrumb .jumpMenuTrigger:hover {
opacity: 0.6;
}

View attachment 22516 View attachment 22517

That looks REALLY good on your site.

So I went to http://cooltext.com and made a plain button one.

and replaced your url with my button but it comes up blank.

i'll figure this stuff out later lol thanks anyway.

 

[Shelley]

That looks REALLY good on your site.

So I went to http://cooltext.com and made a plain button one.

and replaced your url with my button but it comes up blank.

i'll figure this stuff out later lol thanks anyway.

It might just be easier and do what I did. Re-size the xenforo-ui-sprite.png because your going to need to have space for the text then add in the appropriate css styling in extra and finally adjust the coordinates to match your spritesheet and the location where you added the the new trigger image because chances are this will differ for each person as they'll add the new trigger image at a different location within the spritesheet. Alternatively, there's no reason why you can't use an indivdual image if this doesn't workout for you.

It's really a 2 minute job. I would have uploaded my spritesheet if I didn't already replace, re-arrange and add additional imagery onto it but it's specifically catered for my style and wouldn't work with other styles without people adjusting coordinates and even then the colouring wouldn't match other styles.

 

[DRE]

It might just be easier and do what I did. Re-size the xenforo-ui-sprite.png because your going to need to have space for the text then add in the appropriate css styling in extra and finally adjust the coordinates to match your spritesheet and the location where you added the the new trigger image because chances are this will differ for each person as they'll add the new trigger image at a different location within the spritesheet. Alternatively, there's no reason why you can't use an indivdual image if this doesn't workout for you.

It's really a 2 minute job. I would have uploaded my spritesheet if I didn't already replace, re-arrange and add additional imagery onto it but it's specifically catered for my style and wouldn't work with other styles without people adjusting coordinates and even then the colouring wouldn't match other styles.

I knew that about the spritesheet trigger coordinates, I just don't really mess with sprites thats why I had replaced your link with my own image. So what I understand is that the xenforo-ui-sprite.png is only the quick navigation menu itself and the text, did you add the text in the breadcrumb template?

 

[Shelley]

I knew that about the spritesheet trigger coordinates, I just don't really mess with sprites thats why I had replaced your link with my own image. So what I understand is that the xenforo-ui-sprite.png is only the quick navigation menu itself and the text, did you add the text in the breadcrumb template?

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