TUTORIAL MENU BLOCK

http://www.palantir.net/blog/better-know-module-menu-block-part-i

http://palantir.net/blog/better-know-module-menu-block-part-ii

INTRODUCCION

Drupal 7.0 is out! And while we managed to get all the critical bugs fixed before it was
released, there's still a handful of major bugs that we weren't able to fix. One of those
bugs affects Drupal's menus: Custom menus never receive an active trail. Oops.

Custom menus in Drupal 7.0

So if you are using a menu you created yourself with the "Add menu" link on the Menu
administration page (admin/structure/menu), that menu won't work properly in Drupal
7.0. If you visit any of the top-level pages in that menu, none of them will expand to
show you their child links. This is really bad.

There's also a several related symptoms of this bug. Did you just enable the Contact
module and create a link to it underneath another item in your Main menu? Well, it
won't ever be in the active trail because the Contact-module-provided "Contact" link
that is hiding in the Navigation menu will only ever be the active trail. And if you want
to provide two different paths to the same item in two different menus? That, too,
won't fly under Drupal 7.0.

Fortunately, Menu block module version 7.x-2.0 was released this week with a work-
around for this bug. So if you want to ensure your menus work properly under Drupal
7.0, make sure you download the new version of Menu block.

Open source solutions come from many, many people

I'm just trying to get the word out about this bug as its not particularly easy to
understand or diagnose. And, while I've spent a few hours trying to fix this problem,
there were many others that deserve mention.

Our own Bec White was the first to diagnose this bug after Greg Leroux first spotted it.
With code from Bec, Matt Farina, and Commerce Guys' Damien Tournoud, I managed
to craft (or more accurately, hack) a work-around for this bug: #1017122 and
#1017142.

And, yes, I am working with others on a proper patch for Drupal core. Hopefully, the fix
will be incorporated into Drupal 7.1. In the meantime, I hope you'll discover how
awesomely flexible the Menu block module is and keep it around even after the core
bug is fixed.

Its important to share your ideas, code and problems in an Open Source community.
Because that's how things get done.

PARTE 1

The Menu Block module is a little-known module, but has actually been around since
June 2008 and is our solution to the limitations in Drupal's built-in site navigation.

What you get (and don't get) out of the box

There's one thing that always bugs me about Drupal when I start designing a site's IA.
Drupal gives you only two ways to organize your site's links:

1. A list of Primary links and a list of Secondary links added by the theme. Navigate
to admin/build/themes, click on the "Configure" link and you'll see checkboxes
for these links. These links are almost always styled by the theme as
horizontally-aligned links. Here's how they look in the Austin theme:

2. A block with a tree (a nested unordered list) containing the entire menu of links.
Navigate to admin/build/blocks and you'll see a block for each menu on your
site. Core's default styling for these blocks is utilitarian:
But for anything but a very basic website, these options are too limiting. Let's
look at the theme's primary and secondary links first.

The problem with the primary and secondary links is pretty glaring: You can't
navigate to any menu items deeper then the two levels deep.

If you have more then two levels of navigation, you simply can't use the
theme's primary and secondary links feature. FAIL. So you are forced to look at
core's menu tree blocks.

So, what's my beef with core's

menu tree blocks? Well, lemme first say something nice about them. :-) Having
access to the entire navigational tree is very nice and the way in which they
expand and collapse as you navigate the site is intuitive. +1!

My complaint with them is that they are "all or nothing." You either get the
entire menu tree or you're SOL. If you have a large menu tree, you end up with
a tree that becomes increasingly difficult to use as you traverse the site. For
example, links near the bottom of the tree become lost under the fold, forcing
users to scroll down just to see their current location in the hierarchy.

A simple request.
Back in 2008 at the start of a project, we were given a simple wireframe
document that included fairly standard primary and secondary links listed along
the top of the page and also a list of tertiary links along the side. The sidebar
navigation links were designed to expand as you navigate to deeper levels. The
client wanted to support up to 5 levels deep of navigation. Since we knew
Drupal core didn't support this, we looked to contrib

There were several modules that did something almost what we wanted. But
none were quite right. And all of them had horrible administrative interfaces;
either giant lists of blocks immediately appeared on the Admin Blocks page or
there were configuration pages with giant grids of checkboxes. ick.

Finally, I rolled our own solution: Menu Block. By the way, you can see all the
modules that were deprecated by Menu Block on its project page.

Using Menu Block

When you first install the Menu Block module, you will probably notice
absolutely nothing. There are no new blocks listed on the Admin Blocks page
and no configurable settings. But if you look again at the Admin Blocks page,
you'll see next to the custom block's "Add block" tab: another tab labeled "Add
menu block". This is a key feature of Menu block; you can create an unlimited
number of menu blocks each with its own specific configuration. Once you click
on the "Add menu block", you'll see quite a few configurable options to
play with:
I've highlighted the three most important options to make it easier to start to
learn Menu Block's configuration. Note the green numbers in the above
screenshot.

1. You'll first want to pick the menu you want to use for this block. Those
of you with the Book module enabled will see that all of your books are
listed in addition to all of your standard menus.
2. Next you'll want to select the starting level for this menu tree. Core's
menu tree blocks always start with the 1st level (primary) links. With
Menu Block, you can choose any starting level. (If you are wondering,
Drupal core limits menu depth at 9 levels by default.)
 3. Then you'll want to decide if you want limit the maximum depth this
tree will expand to. Note, that this depth is relative to the starting level.
So if you starting level is "2nd level" and you choose "2" as the
maximum depth, you'll get a block that shows levels 2-3 of the tree.
Choosing "1" as the maximum depth, will allow you to show a single
level of your menu tree.

In total there are eight different settings to configure. Since all of these options
can be combined, this gives you a crazy amount configuration control. In part
two, I'll provide some examples of some more advanced features.

In the meantime, happy clicking!

PARTE 2

In Menu Block (Part I), I talked about its basic options. In this part, I'll be going into the
crazy non-obvious options:

The "options" toggle in menu_block for Drupal 7

So with the three basic options of Menu block you can create some very flexible
navigation systems that expand and collapse as users navigate your site. Quick review:

1. Pick the menu. (Don't pick a specific "parent item"; that's a common mistake in
configuring.)
2. Pick the starting level.

3. Pick how deep you want this block's tree to go.

Drop-down menus and mega menus

The mega menus on Chicago Public Media

Yes, there are modules that create drop-down menus for you automatically. But if you
have a custom design that needs to be implemented, often you just need the markup
and you can provide the CSS and JavaScript yourself. With the "Expand all children of
this tree" option checked and the "Maximum depth" set to 2 or 3, you can create a
variety of different styles. The recently-launched site for Chicago Public Media uses
menu_block, a theme hook suggestion for menu_link, custom CSS and JavaScript to
create its basic mega menu navigation.

On the University of Chicago Law School website, the design required that "Landing
pages" (those pages in the primary links) have multiple columns of links with 2 levels
deep. And the site admins needed to be able to pick which column a particular group
of links would appear in. First we created a Menu block with the standard "Starting
level: 2nd level; Maximum depth: 3; Expand all children: yes" options (you'll see why I
needed 3 depth levels to show just the secondary and tertiary links in a moment.) And
behind the scenes, this required a unique menu structure that's not obvious. What you
can't see is that each column has a hidden parent menu item called "Column 1",
"Column 2", etc. The site administrators can editorially choose which column a
particular secondary link will appear in by choosing the appropriate column parent
menu link. All that was needed was some CSS (to hide the menu links in the menu
block's tree) and a theme_breadcrumb override function (to remove the bogus
"Column X" links) to finish off the effect.
The secondary and tertiary links on University of Chicago Law School

One more thing to note in the above image (I couldn't cram in any more text into the
image) is that the large white "Prospective Students" text is actually the title of the
menu block. By default, if the menu block is configured to start with the 2nd level or
lower, the block title will be the parent menu item of the requested tree. Since we
were requesting the secondary links on down in the above block, the block title was
the parent menu item from the primary links, e.g. "Prospective Students".

Block titles as links

The 4th and 5th level links on University of Chicago Law School

The fourth and fifth level links on the University of Chicago Law School site were yet
another menu block block, er "Menu block" block. (Sometimes I think I should have
given the module a different name.) Although a block with much simpler configuration:
"Starting level: 4th level; Depth: unlimited; Block title as link: yes". The "Block title as
link" option allows us to provide a link back to the parent page; in other words, if we
are on a page for a 4th or 5th level menu link, the block title will a link back to the
parent of the tree (i.e. the 3rd level link, in this case.)
The confusing "Parent item" chooser

For the people who screw up their block configurations because of this feature and for
the beginning users who are confused by this, let me apologize; but it was a heavily
requested feature. In the Drupal 7 version of Menu block (thanks to its Form
API/JavaScript states and its built-in JQuery UI), I've been able to hide this feature from
the "Basic" configuration with a new Basic/Advanced Options toggle at the top of the
block configuration form.

To help you understand this option, let me first explain a subtle difference between a
Menu block starting on the 1st level versus starting on the 2nd (or lower) level. If I have
a Menu block configured to start on the 1st level, it will always show it contents (this is
identical to the way Menu module's blocks work.) However, menu blocks that are
configured to start with the second level or deeper only appear if the active page is
located in that part of the tree. For example, if we are on page at the 3rd, 4th or 5th (or
deeper) level of a menu tree, a block configured to show the 3rd and 4th levels only
will display that part of the tree; but if we are on a 1st level menu item, that block will
not be displayed since the 1st level link is not deep enough to know which 3rd level
links to show (each 2nd level link has its own set of 3rd level links after all.)

So the "Parent item" chooser is an advanced option that you probably won't want to
use. But it allows you to pick a specific parent item so that only displays links from
descendants of that parent item (the child menu tree of that item). By picking a parent
item, you have changed the meaning of "1st level", "2nd level" links; the 1st level links
for that block will be the children of Parent item and 2nd level links will be the
grandchildren of the Parent item. Except for this important difference, the menu block
will behave like any other menu block. So, note if you choose a specific parent item
(like the "News" menu link) and have it start with the 1st level links, that block will
always appear and will contain the Parent item as the block title with the tree showing
the children links. Got it?

What else?

Well, that just leaves the "Sort menu tree by the active menu item's trail" option and
the "Make the starting level follow the active menu item". Hopefully, the description of
each option hints as to its functionality, but in order to really understand those two
options, you're just going to have to download the module and play with the
configuration; watch carefully how the menu tree changes as you navigate within links
in the block. As you'll discover, the "Sort menu tree by the active menu item's trail" is
useful for navigational trees with lots of links in a single level; e.g. if you click on the
last link of the last link, the active path will be sorted to the top of the displayed menu
tree. And the "Make the starting level follow the active menu item" makes it easy for
users to drill down into the menu tree.

Have fun!