I have used wp_nav_menu on one previous custom theme and it worked great, but it was a simpler menu than I face now. I have the following XHTML/Javascript menu:
<!-- Navigation -->
<div id='div_wrapper' class='clearfix'>
<div id='navigation'>
<ul id='main_menu' >
<li id='mm_home' class='mega'>
<h2><a href='index.php' title='A good place to learn about AARO'>Home<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<p class='shout'>A rich history <br />and bright future!</p>
<ul>
<li><a href='history.php'>History</a></li>
<li><a href='pledge.php'>Pledge</a></li>
<li><a href='board.php'>Meet the Board</a></li>
<!-- <li><a href='new_members.php'>Welcome New Members</a></li> -->
<li><a href='contact.php'>Contact Info</a></li>
</ul>
</div>
</div>
</li>
<li id='mm_services' class="mega">
<h2><a href='landing_benefits.php' title='Get Industry influence, cost savings, insurance, advertising, training and events with AARO'>Benefits of Membership<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href="landing_benefits.php">Benefits of Membership</a></h3>
<p class='shout'>The power of a group!</p>
<ul>
<li><a class='bottom' href='join.php'>Become a Member</a></li>
</ul>
<h3>Features</h3>
<p class='shout'>Membership is packed with value!</p>
<ul>
<li><a href='benefits_detailed.php'>See all the Benefits</a></li>
</ul>
</div>
</div>
</li>
<li id='mm_insurance' class='mega'>
<h2><a href='insurance.php' title='AARO members get savings on group, commercial, home, auto and more insurance coverages.'>Insurance<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href="insurance.php#group_health">Group Benefit Plans</a></h3>
<p class='shout'>Cost savings on your insurance!</p>
<h3><a href="insurance.php#garage">Garage Specific Insurance</a></h3>
<p class='shout'>Servicing customized garage insurance needs!</p>
<h3><a href="insurance.php#home_auto">Home & Auto</a></h3>
<p class='shout'>We cover your home and auto <br />
insurance including motorbikes </p>
</div>
</div>
</li>
<li id='mm_training' class='mega'>
<h2><a href='training.php' title='AAROs renowned automotive training'>Training<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href='training.php'>Training Overview</a></h3>
<p class='shout'>Keep you skills sharp with accredited courses</p>
<ul
<li><a href='training_locations.php'>Technical Courses</a></li
<li>ODP Card Training</li>
<li>Emissions Training</li>
<li>Hybrid Training</li>
<li>Diesel Training</li>-->
</ul>
</div>
</div>
</li >
<li id='mm_marketplace' class='mega'>
<h2><a href='classifieds.php' title='Leverage AARO advertising with classifieds, banner ads and traffic to your site.'>Marketplace<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href="classifieds.php">Classifieds</a></h3>
<p class='shout'>Buy and sell goods and services
in one of Ontario's largest auto communities!</p>
<p class='shout'>Buy and sell goods and services
in one of Ontario's largest auto communities!</p>
<h3><a href="#group_benefit_plans">Aaro Classifieds</a></h3>
<p class='shout'>Many free and enhanced classified options for AARO members!</p>
<ul>
<li><a href='#equipment_for_sale'>Equipment For Sale</a></li>
<li><a href='#advertise_real_estate'>Advertise Real Estate for Sale</a></li>
<li><a href='#advertise_services'>Advertise Your Services</a></li>
<li><a href='#want_to_buy'>Want To Buy</a></li>
<li><a class='bottom' href='#co-marketing_opportunities'>Co-marketing Opportunities</a></li>
</ul>
</div>
<div class='right_sub_col'>
<h3><a href="#group_benefit_plans">Advertising</a></h3>
<p class='shout'>Your services and products reaching a wider market</p>
<ul>
<li><a href='#banner_ads'>Banner Ads</a></li>
<li><a href='#earn_with_advertising'>Sell Advertising and Earn</a></li>
<li><a href='#request_a_media_kit'>Request a Media Kit</a></li>
<li><a href='#improve_traffic'>Improve Traffic to Your Website</a></li>
</ul>
</div>
</div>
</li
<li id='mm_events' class='mega'>
<h2><a href='events.php' title='AARO provides enriching opportunities to our members, while supporting charities and worthy causes.'>Events<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href="events.php">Events Overview</a></h3>
<p class='shout'>Keeping our Auto community engaged and giving back!</p>
<ul>
<!-- <li><a href='#events.php'>No current events</a></li> -->
<li><a href='events.php#Oktoberfest'>Oktoberfest Cruise</a></li>
<li><a href='events.php#christmas_party'>Rocking Christmas Party</a></li>
<li><a href='#odp_card_training'>Member Events</a></li> -->
</ul>
</div>
</div>
</li>
</ul>
</div>
</div> <!-- end div_wrapper --><!-- End Navigation -->
- Is wp_nav_menu the correct tool to use for this menu?
- You can see that although many things in the menu are standardized, but there are custom tweaks to each of the menus.
- I use javascript to manage the display and handling of the mega menu so the extra div-itus is a result of how the javascript works with it
- You can see a in-progress version of the theme that I am developing at <a href=“http://test.liviam.ca/history-2/pledge/” rel=“nofollow”>http://test.liviam.ca/history-2/pledge/</a>. The menu that you see is from the static site and still links to the pages on the static site, but you and test out the menu and look at it with view source or firebug…
- Can you give me some suggestions/examples of the best way to handle this type of menu?
- I am very new to theme development and worpress but am very experienced with php; both procedurally and OOP so a detailed description is not required, rather just if I can practically do this with wp_nav_menu or if there is another method I should use?
Your help is very appreciated.
Regards,
Steve