Mobile theme navigation links [#1678128]

Does primary and secondary navigation links needs to be transformed into a select list to ease the selection ?

There are a bunch of discussion around the web concerning responsive menu,
for example : http://bradfrostweb.com/blog/web/responsive-nav-patterns/
also on d.o : http://drupal.org/node/1416414

So for now I'm for turning the navigation links into a select list (grouping the primary/secondary to a unique select list)
I've found a nice and easy usable Jquery plugin that does easily the job : https://github.com/mattkersley/Responsive-Menu
demo here : http://mattkersley.com/demos/responsive_menu/

And start bringing it to Kickstart v2: https://code.drupalcommerce.org/131

If this solution seems to be the nicest one, we will need to white-list the library before merging it into kickstart.

Comment	File	Size	Author
#6	Navigation menu	22.44 KB	GuGuss
#1	1.png	22.2 KB	Cookiz
#1	2.png	45.66 KB	Cookiz

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Cookiz CreditAttribution: Cookiz commented 10 July 2012 at 15:45

File	Size
2.png	45.66 KB
1.png	22.2 KB

Comment #2

GuGuss CreditAttribution: GuGuss commented 18 July 2012 at 13:31

Assigned:

Unassigned

» Cookiz

Comment #3

Cookiz CreditAttribution: Cookiz commented 30 July 2012 at 15:52

Already merge, main menu become a select list.

Comment #4

Cookiz CreditAttribution: Cookiz commented 30 July 2012 at 15:55

Assigned:	Cookiz	» GuGuss
Status:	Active	» Needs work

We now need to decide which solution we will take and freeze it.
For me select list on small device is good, we didn't need to care about design because devices take care of that.
But Jake has choosen something else for the menu (that sounds also good for me)

Comment #5

MrPaulDriver CreditAttribution: MrPaulDriver commented 7 August 2012 at 09:37

The method defined by Filament Group works very well - see http://filamentgroup.com/lab/responsive_design_approach_for_navigation/

Lullabot have recently used something similar for Leo Laporte's new site at www.techguylabs.com which is obviously built with Drupal.

Such a fix, made available as a module would be fantastic.

Comment #6

GuGuss CreditAttribution: GuGuss commented 7 August 2012 at 10:36

Assigned:

GuGuss

» Cookiz

File	Size
Navigation menu	22.44 KB

After some reading and testing, I definitely prefer what's been done for Omega Kickstart (see the attached screenshot).

@Cookiz: Can you attach the same behavior to the kickstart theme.

Comment #7

MrPaulDriver CreditAttribution: MrPaulDriver commented 7 August 2012 at 11:34

Yes that looks good.

A good turnkey solution for Omega themed sites would be most welcome.

Comment #8

Cookiz CreditAttribution: Cookiz commented 16 August 2012 at 23:35

Status:

Needs work

» Needs review

Comment #9

bojanz CreditAttribution: bojanz commented 17 August 2012 at 09:18

Since we've made commerce_kickstart_theme into a subtheme of omega_kickstart, can we remove some of these?

libraries[selectnav.js][type] = "libraries"
libraries[selectnav.js][download][type] = "git"
libraries[selectnav.js][download][url] = "https://github.com/lukaszfiszer/selectnav.js.git"
libraries[responsive_menu][type] = "libraries"
libraries[responsive_menu][download][type] = "git"
libraries[responsive_menu][download][url] = "https://github.com/mattkersley/Responsive-Menu.git"

EDIT: Confirmed with Cookiz that responsive_menu can most likely be removed. Needs confirmation.