revxx14 on "Great, free idea for a mega menu plugin. Someone please make it happen."

After hours and hours of fighting with nav walkers, I thought there needed to be a better way for web developers to create mega menus. After thinking about it a bit, I've come up with this:

• Wrap second level <ul>s in <section>
• Add class mega menu and mega-menu-columns-# to parent <li>s that contain mega menus
• Add "Menu Structure" options to Menu editor
  • New Column: Can only be placed within the second level <ul>. Adds </ul><ul> where a menu item would normally appear. If placed at the beginning or end of a <ul>, it does nothing.
  • Widget: Allows the user to pick a widget to display. Also acts as a column break, as it's a <section> wrapped in </ul><ul>. If placed at the beginning of a <ul>, does not include leading </ul>. If placed at the end of a <ul>, does not include trailing <ul>. Can only be placed within the second level <ul>.
• Menu structure appears as below:

<ul>
	<li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1 mega-menu mega-menu-columns-2">
		<a href="http://www.example.com/about/">
			About Us
		</a>
		<section>
			<ul class="sub-menu">
				<li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2">
					<a href="http://www.example.com/about/company-profile/">
						Company Profile
					</a>
				</li>
				<li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3">
					<a href="http://www.example.com/about/leadership-team/">
						Leadership Team
					</a>
				</li>
				<li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4">
					<a href="http://www.example.com/about/professional-affiliations/">
						Professional Affiliations
					</a>
				</li>
			</ul>
			<ul>
				<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5">
					<a href="http://www.example.com/about/clients/">
						Clients
					</a>
				</li>
				<li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6">
					<a href="http://www.example.com/about/partnerships/">
						Partnerships
					</a>
				</li>
			</ul>
		</section>
	</li>
	<li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7 mega-menu mega-menu-columns-3">
		<a href="http://www.example.com/services/">
			Services
		</a>
		<section>
			<ul class="sub-menu">
				<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8">
					<a href="http://www.example.com/services/civil-engineering/">
						Civil Engineering
					</a>
				</li>
				<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9">
					<a href="http://www.example.com/services/land-planning/">
						Land Planning
					</a>
				</li>
				<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10">
					<a href="http://www.example.com/services/surveying/">
						Surveying
					</a>
				</li>
			</ul>
			<ul class="sub-menu">
				<li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11">
					<a href="http://www.example.com/services/information-technology/">
						Information Technology
					</a>
				</li>
				<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12">
					<a href="http://www.example.com/services/subsurface-utility-engineering/">
						Subsurface Utility Engineering
					</a>
				</li>
			</ul>
			<aside>
				<h6>Widget Title</h6>
				<p>Maecenas quis semper arcu. Quisque consequat risus nisi. Sed venenatis urna porta eros malesuada euismod. Nulla sollicitudin fringilla posuere. Nulla et tellus eu nisi sodales convallis non vel tellus.</p>
			</aside>
		</section>
	</li>
	<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13">
		<a href="http://www.example.com/projects/">
			Projects
		</a>
	</li>
	<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
		<a href="http://www.example.com/news/">
			News
		</a>
		</li>
	<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15">
		<a href="http://www.example.com/contact/">
			Contact Us
		</a>
	</li>
</ul>