Edit the (automatic) HTML layout of nav menus

Question

I registered my menu in functions.php, called it from header.php and set it all up in the Appearances > Menus backend. The problem is, I need to manually insert a div surrounding <ul class="sub-menu"> ... </ul> where my drop-down menu is.

There is no way around it like adding the div's class to the ul etc., as in order for it's drop-down functionality to work it must be inserted in that way, so that my code can be:

<div class="dropdown">
    <ul class="sub-menu">
        <li>
        <a href="#">Menu Item</a>
        </li>
    </ul>
</div>

Is there any easy way to get that <div class="dropdown"> and </div> part in easily? Or would the only way be by writing a script?

Thank you!

Answer 1

Update: The question was actually how to wrap the submenus, not the whole menu. Here are 2 options:

using jQuery:

<script type="text/javascript">

// run this before the script that sets up the dropdowns:
jQuery(document.ready(function($){
    $('.sub-menu').wrap('<div class="dropdown"></div>');
})

</script>

using PHP 5.3+ (slightly more complex option, but thought i'd post it):

<?php
$dom = DOMDocument::loadHTML(wp_nav_menu(array(
    'menu' => 'main', // change this to your theme location
    'echo' => false,
)));

// Find all uls
$uls = $dom->getElementsByTagName('ul');

// Find & wrap each sub menu
foreach ($uls AS $ul) 
{
    if ($ul->getAttribute('class') == 'sub-menu')
    {
        // create the dropdown wrapper div
        $wrapper = $dom->createElement('div');
        $wrapper->setAttribute('class', 'dropdown');

        // Replace ul with this wrapper div
        $ul->parentNode->replaceChild($wrapper, $ul);

        // Append this ul to wrapper div
        $wrapper->appendChild($ul);
    }
}
echo $dom->saveHTML($dom->getElementsByTagName('div')->item(0));

?>

// OLD ANSWER:

Check out the container_class option of wp_nav_menu(): http://codex.wordpress.org/Function_Reference/wp_nav_menu

Your menu's ul will automatically be wrapped in a div; you can set the class of the div using that option:

<?php
wp_nav_menu(array(
    'theme_location' => 'my_location', // change this to your theme location
    'container_class' => 'dropdown',
));
?>

Answer 2

I don't know if I'm missing something, but for what I understand what you need is as simple as the following:

<div class="dropdown">
<div class="whatever">
<?php
wp_nav_menu(array(
'theme_location' => 'my_location', // change this to your theme location
'container_class' => 'dropdown',
));
?>
</div>
</div>

but then again, not sure if I'm understanding your question