The Coolest Responsive Navigation Techniques on your Joomla! Template

Mobile Menus Matter

About MeRyan Boog @hdwebpros @ryanboog /HappyDogWebProductions

hdwebpros.com 651-243-2DOG

Let’s Connect! #youreawesome

● CEO of Happy Dog Web Productions● Devoted father and husband● A proud Vikings fan● Away from Joomla! and web, I enjoy sports,

trying new restaurants and pretending to be a decent food critic, doing fun competitive things. Okay, an occasional beer too, especially on fun events like this.

● Happy St. Patty’s Day!

Why is mobile navigation important?Mobile usage has surpassed desktop usage for browsing the internet (including apps). 55% of all time spent on the internet is from a mobile device.

People (and dogs) are glued to their phones.

Start With MobileStart your wireframes and design from mobile first. Add more features if you want when the screen gets bigger.

How should you create menus for mobile devices?

Every site is different.

Make it work for your client and their target audience.

Let’s dive in!

Here are a few examples of responsive navigation

Stacked PillsPositives● Easy to read● Easy to tap● Clearly defined● Easy to implement

Negatives● Limited amount of

menu items● Can be obtrusive

and take up valuable real estate

ExampleCan be found in Bootstrap

UsageBuilt in Protostar. Part of Bootstrap.

getbootstrap.com

Bootstrap Responsive NavAdvantages● If done right clearly defined● Can hide a fair amount of menu

items nicely● Becoming more and more

universal● Can be accordion (see warning)

Disadvantages:● Either parent items can not be

clickable, or all menus forced open● Can be easy to accidentally tap an

option if scrolling● Typically requires a "bar" that

takes up some decent real estate (at least out of the box)

● The "hamburger" icon doesn't perform as well as other options yet

Example

UsageBuilt in Protostar. Part of Bootstrap.

getbootstrap.com

Select ListAdvantages: ● Uses phones native

list scroller, which some like

● Shows all levels instantly

● Easy to spot

Disadvantages:● Can be confusing● List scrollers take up

some valuable real estate

● No custom styling

Example

Usage● Use an older Yootheme template● There is a module that converts to select list

out there, fire it on media queries

Perspective Page ViewAdvantages:● Really, really cool

looking● Can be triggered from a

small icon or area● Custom content can be

inserted● Requires little JS

(lightweight)

Disadvantages● Limited menu options● Limited space to work

with

Example

UsageI went to http://tympanus.net/Development/PerspectivePageViewNavigation/

Use the JS and CSS for that menu to incorporate. Shows div in class “outer-nav”.

Off CanvasAdvantages:● Can hold a lot of menu

items● Non-Obtrusive● Can work from a fixed

position● Scrollable

Disadvantages:● Odd and obtrusive for

little menus

Example

Usage● Fully use UIKit in your theme● Nab the LESS for “off-canvas” and

incorporate the JS into your theme

Custom NavAdvantages:● Extremely customizable● No JS required (typically)● You dictate its

awesomeness

Disadvantages:● Takes a lot more

effort● Success depends on

your knowledge

Example

UsageFigure out what works, and just do it. A little effort can go a long way!

Questions?I will answer your questions.

I will not catch socks in my mouth.

Got one for later?@hdwebpros or just pull me aside

Remember, #JoomlaDayBoston #youreawesome