Working with Drupal's native menu system instead of menu blocks (a remedial course)
Disclaimer: This contents of this post are probably quite obvious to most front-end Drupal developers.
I've always used menu blocks to handle the main menu in Drupal. When I switched back to the native menus today, I had to hunt around to get up to speed on how things worked by default. Here's a collection of Drupal menu facts, to help anyone else who's been doing the same thing.
First, the background. On a project I'm now working on, I had three blocks in the menu region -- main menu, secondary menu, and search. On mobile, I needed to toggle the main menu and the secondary menu when a toggle icon was clicked. To speed things along, I wanted to wrap the two menu blocks in one div. This is far more trouble than it's worth without putting them in their own region, so I turned to the normal menu system.
Fact 1: Drupal has a main menu and a secondary menu defined in its menu settings. These are what display on a fresh install of Drupal. They can be disabled in the theme settings. This one wasn't exactly a discovery -- I'm willing to bet that just about everyone who has touched the theme knows this.
Fact 2: You can define which menu is called by "main menu" and "secondary menu" in the menu settings. This is done at /admin/structure/menu/settings.
By default, Drupal calls the user menu as the secondary menu here, with the links My account, Log out, and Search. I had a separate menu that I wanted to print here, so this step was important.
Fact 3: If you take advantage of the default menu behavior, one div is already wrapped around both menus, and you can customize this as needed. Find the menu region template in your base theme and copy it down to your subtheme for editing. Here's the Omega version of region-menu.tpl.php:
<div<?php print $attributes; ?>>
<div<?php print $content_attributes; ?>>
<?php if ($main_menu || $secondary_menu): ?>
<nav class="navigation">
<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix', 'main-menu')), 'heading' => array('text' => t('Main menu'),'level' => 'h2','class' => array('element-invisible')))); ?>
<?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix', 'secondary-menu')), 'heading' => array('text' => t('Secondary menu'),'level' => 'h2','class' => array('element-invisible')))); ?>
</nav>
<?php endif; ?>
<?php print $content; ?>
</div>
</div>
Note the .navigation div. I added an only-visible-on-mobile toggle before this div that would expand/collapse it, solving my original problem.
Fact 4: You can control the classes applied to each menu ul in the menu region tpl (depending on your theme, presumably).
To add a class to the ul of the main menu, you would modify array('links', 'inline', 'clearfix', 'main-menu')) to array('links', 'inline', 'clearfix', 'main-menu', 'new class')).
This system is, like many Drupal things, pretty intuitive. I like it because it gets rid of some unnecessary block markup (of course, you could also do this with a block template, too) and gives me greater control over the markup. I'm not crazy about the lack of contextual links to edit the menu, but the menu edit screens are easy to get to, so this is hardly a dealbreaker. And it's much more convenient than preprocessing the menus to add a class to the uls.
If you need more control over your menu theming, you may want to check out Menu Attributes; while I haven't used it personally, I saw it referenced in a large number of posts while I was looking up menu options today.