Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

DrupalCamp Chattanooga 2013 - Menu Minipanels in Drupal 7

911 visualizaciones

Publicado el

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

Publicado en: Tecnología, Educación
  • Thanks for the slides! I enjoyed your session at Drupal Camp Chattanooga! We are looking to implement this at Chatt State.
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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

×