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

1. Menu Minipanels
A Drupal module for intelligently constructing mega menus.
Eric Scott Sembrat - Georgia Institute of Technology - 2013

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. Follow Along
•
These slides are available to download now!
•
http://www.ericsembrat.com
Eric Scott Sembrat - Georgia Institute of Technology - 2013

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. What are
Megamenus?
Eric Scott Sembrat - Georgia Institute of Technology - 2013

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. 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. DDMs from Hell
Eric Scott Sembrat - Georgia Institute of Technology - 2013

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

10. Amazon
Eric Scott Sembrat - Georgia Institute of Technology - 2013

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

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

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

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

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. So, how do I
create one?
Eric Scott Sembrat - Georgia Institute of Technology - 2013

17. Drupal Modules
•
•
•
•
•
•
MD Megamenu
OM Maximenu
Megamenu
Superfish
Menu Views
Giga Menu
Eric Scott Sembrat - Georgia Institute of Technology - 2013

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. Eric Scott Sembrat - Georgia Institute of Technology - 2013

20. Why, oh why, is
this module
re-inventing
Drupal’s menu
functionality?
Eric Scott Sembrat - Georgia Institute of Technology - 2013

21. Eric Scott Sembrat - Georgia Institute of Technology - 2013

22. There has got to be a
better way than this!
Eric Scott Sembrat - Georgia Institute of Technology - 2013

23. Introducing
Menu Minipanels
Eric Scott Sembrat - Georgia Institute of Technology - 2013

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. Creating a Menu
MInipanel
Eric Scott Sembrat - Georgia Institute of Technology - 2013

26. Step 1: Build Menu
Eric Scott Sembrat - Georgia Institute of Technology - 2013

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

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

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

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

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

32. Step 4: Build MM
•
•
The final step is a tedious one.
Eric Scott Sembrat - Georgia Institute of Technology - 2013

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. 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. 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. Demo
Eric Scott Sembrat - Georgia Institute of Technology - 2013

37. Questions?
Eric Scott Sembrat - Georgia Institute of Technology - 2013