WordPress.org

Forums

[resolved] Great, free idea for a mega menu plugin. Someone please make it happen. (3 posts)

  1. revxx14
    Member
    Posted 1 year ago #

    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>
  2. Tom
    Member
    Posted 1 year ago #

    Hi,

    Check out http://wordpress.org/plugins/megamenu/,

    it has a built in drag and drop widget editor (ala visual composer or page builder) to build the content to display in your mega menus. I also spent hours (days) battling with nav walkers, but got there in the end :)

  3. revxx14
    Member
    Posted 1 year ago #

    Thanks, I hadn't seen that before. While it's way overpowered for my purposes, I may be able to use it as a base for my own custom plugin.

Topic Closed

This topic has been closed to new replies.

About this Topic