WordPress.org

Ready to get started?Download WordPress

Forums

Help with a custom nav walker (1 post)

  1. mtwallet
    Member
    Posted 6 months ago #

    I am trying to create a custom walker that will output the following code / menu:

    <ul>
    	<li><a href="#" title="">Menu 1</a></li>
    	<li><a href="#" title="">Menu 2</a></li>
    	<li class="hasDropdown">
    		<a href="#" title="">Menu 3 - Level 1</a>
    		<div>
    			<div>
    				<h5>Description 1</h5>
    				<ul>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    				</ul>
    			</div>
    
    			<div>
    				<h5>Description 2</h5>
    				<ul>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    				</ul>
    			</div>
    
    			<div>
    				<h5>Description 3</h5>
    				<ul>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    				</ul>
    			</div>
    
    			<div>
    				<h5>Description 4</h5>
    				<ul>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    					<li><a href="#" title="">Menu 3 - Level 2</a></li>
    				</ul>
    			</div>
    		</div>
    	</li>
    	<li class="hasDropdown">
    		<a href="#" title="">Menu 4 - Level 1</a>
    		<div>
    			<div>
    				<h5>Description 1</h5>
    				<ul>
    					<li><a href="#" title="">Menu 4 - Level 2</a></li>
    					<li><a href="#" title="">Menu 4 - Level 2</a></li>
    					<li><a href="#" title="">Menu 4 - Level 2</a></li>
    					<li><a href="#" title="">Menu 4 - Level 2</a></li>
    					<li><a href="#" title="">Menu 4 - Level 2</a></li>
    				</ul>
    			</div>
    
    			<div>
    				<h5>Description 2</h5>
    				<ul>
    					<li><a href="#" title="">Menu 4 - Level 2</a></li>
    					<li><a href="#" title="">Menu 4 - Level 2</a></li>
    					<li><a href="#" title="">Menu 4 - Level 2</a></li>
    					<li><a href="#" title="">Menu 4 - Level 2</a></li>
    					<li><a href="#" title="">Menu 4 - Level 2</a></li>
    				</ul>
    			</div>
    		</div>
    	</li>
    	<li><a href="#" title="">Menu 5</a></li>
    	<li><a href="#" title="">Menu 6</a></li>
    </ul>

    I would like the code to be clean with only a single class to define where a dropdown occurs. I have read numerous articles on the walker class and have tried creating my own from the nav-menu-template but cannot seem to understand it enough to achieve what I would like.

    Please can anyone help? Many thanks in advance.

Reply

You must log in to post.

About this Topic