Your SlideShare is downloading. ×
0
Menu Minipanels

A Drupal module for intelligently constructing mega menus.

Eric Scott Sembrat - Georgia Institute of Tec...
Hello, My Name Is:
Eric Scott Sembrat
Twitter: @esembrat
Web Developer for Georgia
Institute of Technology
Graduate Studen...
Follow Along
•

These slides are available to download now!

•

http://www.ericsembrat.com

Eric Scott Sembrat - Georgia I...
Road Map
•
•
•
•
•
•

What are Mega Menus?
Mega Menus in Drupal.
Introducing: Menu Minipanels.
Usage.
Short demo.
Question...
What are
Megamenus?
Eric Scott Sembrat - Georgia Institute of Technology - 2013
Menus
•

Menus are an instrumental piece of your
website.

•

A recent trend with website menus is the
inclusion of so-cal...
Megamenus?
•

Megamenus (MM) solve issues stemming from
drop-down menu (DDM) structure.

•

Problems with DDM include:

•
...
DDMs from Hell

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Trending...
You can find examples of
MM all over the Web.

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Amazon

Eric Scott Sembrat - Georgia Institute of Technology - 2013
The White House

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Georgia State

Eric Scott Sembrat - Georgia Institute of Technology - 2013
U[sic]GA

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Georgia Tech

Eric Scott Sembrat - Georgia Institute of Technology - 2013
The Power of MMs
•

A MM uses two-dimensional drop-down panels
to group structured navigation options without
scrolling. (...
So, how do I
create one?
Eric Scott Sembrat - Georgia Institute of Technology - 2013
Drupal Modules
•
•
•
•
•
•

MD Megamenu
OM Maximenu
Megamenu
Superfish
Menu Views
Giga Menu

Eric Scott Sembrat - Georgia I...
The Issue
•

However, all of these modules make the critical
mistake of reinventing the wheel by creating
duplicate featur...
Eric Scott Sembrat - Georgia Institute of Technology - 2013
Why, oh why, is
this module
re-inventing
Drupal’s menu
functionality?

Eric Scott Sembrat - Georgia Institute of Technolog...
Eric Scott Sembrat - Georgia Institute of Technology - 2013
There has got to be a
better way than this!
Eric Scott Sembrat - Georgia Institute of Technology - 2013
Introducing
Menu Minipanels
Eric Scott Sembrat - Georgia Institute of Technology - 2013
Menu Minipanels
•

Menu Minipanels (MMP) connects the power
and flexibility of Panels, Menu, and Views.

•

Megamenus in MM...
Creating a Menu
MInipanel
Eric Scott Sembrat - Georgia Institute of Technology - 2013
Step 1: Build Menu

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Step 2: Build MM

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Step 2: Build MM

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Step 2: Build MM

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Step 3: Attach MM

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Step 3: Attach MM

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Step 4: Build MM
•
•

The final step is a tedious one.

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Adding Menu Items?
•

The one caveat to using Menu Minipanels is
that Panels do not natively allow you to show
specific men...
Suggested Modules
menu_node - Key dependency to the module
below.
menu_node_views - Views integration for menu
items.

•

...
The Adventure
•

Beyond that, building a menu in Menu
Minipanels is just like building up a panel.

•

Rather than using t...
Demo

Eric Scott Sembrat - Georgia Institute of Technology - 2013
Questions?
Eric Scott Sembrat - Georgia Institute of Technology - 2013
Upcoming SlideShare
Loading in...5
×

DrupalCamp Chattanooga 2013 - Menu Minipanels in Drupal 7

454

Published on

Building intelligent, usable, and friendly mega menus using the Panels and Views you already know in Drupal!

Published in: Technology, Education
1 Comment
2 Likes
Statistics
Notes
  • Thanks for the slides! I enjoyed your session at Drupal Camp Chattanooga! We are looking to implement this at Chatt State.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
454
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "DrupalCamp Chattanooga 2013 - Menu Minipanels in Drupal 7"

  1. 1. Menu Minipanels A Drupal module for intelligently constructing mega menus. Eric Scott Sembrat - Georgia Institute of Technology - 2013
  2. 2. Hello, My Name Is: Eric Scott Sembrat Twitter: @esembrat Web Developer for Georgia Institute of Technology Graduate Student at Georgia State University eric.sembrat@cos.gatech.edu Eric Scott Sembrat - Georgia Institute of Technology - 2013
  3. 3. Follow Along • These slides are available to download now! • http://www.ericsembrat.com Eric Scott Sembrat - Georgia Institute of Technology - 2013
  4. 4. Road Map • • • • • • What are Mega Menus? Mega Menus in Drupal. Introducing: Menu Minipanels. Usage. Short demo. Questions? Comments? Eric Scott Sembrat - Georgia Institute of Technology - 2013
  5. 5. What are Megamenus? Eric Scott Sembrat - Georgia Institute of Technology - 2013
  6. 6. Menus • Menus are an instrumental piece of your website. • A recent trend with website menus is the inclusion of so-called megamenus. Eric Scott Sembrat - Georgia Institute of Technology - 2013
  7. 7. Megamenus? • Megamenus (MM) solve issues stemming from drop-down menu (DDM) structure. • Problems with DDM include: • • • Long, unusable menus. Shortened, abbreviated menu link text. Breadth and depth of content shown. Eric Scott Sembrat - Georgia Institute of Technology - 2013
  8. 8. DDMs from Hell Eric Scott Sembrat - Georgia Institute of Technology - 2013
  9. 9. Trending... You can find examples of MM all over the Web. Eric Scott Sembrat - Georgia Institute of Technology - 2013
  10. 10. Amazon Eric Scott Sembrat - Georgia Institute of Technology - 2013
  11. 11. The White House Eric Scott Sembrat - Georgia Institute of Technology - 2013
  12. 12. Georgia State Eric Scott Sembrat - Georgia Institute of Technology - 2013
  13. 13. U[sic]GA Eric Scott Sembrat - Georgia Institute of Technology - 2013
  14. 14. Georgia Tech Eric Scott Sembrat - Georgia Institute of Technology - 2013
  15. 15. The Power of MMs • A MM uses two-dimensional drop-down panels to group structured navigation options without scrolling. (source) • • A DDM on steroids. • Gives a feature-full site-map like menu for accessibility. Allows for rich media (photos, videos) and dynamic content to reside in your menu. Eric Scott Sembrat - Georgia Institute of Technology - 2013
  16. 16. So, how do I create one? Eric Scott Sembrat - Georgia Institute of Technology - 2013
  17. 17. Drupal Modules • • • • • • MD Megamenu OM Maximenu Megamenu Superfish Menu Views Giga Menu Eric Scott Sembrat - Georgia Institute of Technology - 2013
  18. 18. The Issue • However, all of these modules make the critical mistake of reinventing the wheel by creating duplicate features to what Drupal already does. Eric Scott Sembrat - Georgia Institute of Technology - 2013
  19. 19. Eric Scott Sembrat - Georgia Institute of Technology - 2013
  20. 20. Why, oh why, is this module re-inventing Drupal’s menu functionality? Eric Scott Sembrat - Georgia Institute of Technology - 2013
  21. 21. Eric Scott Sembrat - Georgia Institute of Technology - 2013
  22. 22. There has got to be a better way than this! Eric Scott Sembrat - Georgia Institute of Technology - 2013
  23. 23. Introducing Menu Minipanels Eric Scott Sembrat - Georgia Institute of Technology - 2013
  24. 24. Menu Minipanels • Menu Minipanels (MMP) connects the power and flexibility of Panels, Menu, and Views. • Megamenus in MMP are nothing but the Panel elements you know (and love?). Eric Scott Sembrat - Georgia Institute of Technology - 2013
  25. 25. Creating a Menu MInipanel Eric Scott Sembrat - Georgia Institute of Technology - 2013
  26. 26. Step 1: Build Menu Eric Scott Sembrat - Georgia Institute of Technology - 2013
  27. 27. Step 2: Build MM Eric Scott Sembrat - Georgia Institute of Technology - 2013
  28. 28. Step 2: Build MM Eric Scott Sembrat - Georgia Institute of Technology - 2013
  29. 29. Step 2: Build MM Eric Scott Sembrat - Georgia Institute of Technology - 2013
  30. 30. Step 3: Attach MM Eric Scott Sembrat - Georgia Institute of Technology - 2013
  31. 31. Step 3: Attach MM Eric Scott Sembrat - Georgia Institute of Technology - 2013
  32. 32. Step 4: Build MM • • The final step is a tedious one. Eric Scott Sembrat - Georgia Institute of Technology - 2013
  33. 33. Adding Menu Items? • The one caveat to using Menu Minipanels is that Panels do not natively allow you to show specific menu items in a block. • • Except for showing all menu links, which isn’t optimal. Where to go for context-aware blocks of menu items? • Views! Eric Scott Sembrat - Georgia Institute of Technology - 2013
  34. 34. Suggested Modules menu_node - Key dependency to the module below. menu_node_views - Views integration for menu items. • Note: This is one of those modules that still has no “stable” release. Eric Scott Sembrat - Georgia Institute of Technology - 2013
  35. 35. The Adventure • Beyond that, building a menu in Menu Minipanels is just like building up a panel. • Rather than using the Menu Minipanels theming options, code your CSS and make sure it overwrites the Menu Minipanels defaults. • This makes the CSS re-useable across multiple websites! Eric Scott Sembrat - Georgia Institute of Technology - 2013
  36. 36. Demo Eric Scott Sembrat - Georgia Institute of Technology - 2013
  37. 37. Questions? Eric Scott Sembrat - Georgia Institute of Technology - 2013
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×