Category Menu

Getting there but have extra /li and /ul tags (commented in my results). This is a Zurb Foundation 6 menu by the way. 

I guess the UL is inserted wherever a depth zero is... yet we put in the first / outer UL tags? Something like that. I've used a category menu before but it was basically snippets from the forum. I'm not sure if this all breaks with anything above 1 child or another situation I'm not thinking of either.

I know it's very basic for most of you. Any thoughts or tips welcomed.

						<ul class="dropdown menu" data-dropdown-menu>
							<?php foreach ($menu_catsRecords as $categoryRecord): ?>
									// If the category is depth zero and has children, put an opening li and a linked name. No closing li yet.
									<?php if($categoryRecord['_hasChild'] && $categoryRecord['depth'] == '0'): ?> 
										<?php echo $categoryRecord['_listItemStart'] ?>							
											<a href="#"><?php echo $categoryRecord['name'] ?></a>
							   // else if the category does not have children and is depth is greater than zero, put a linked name with opening and closing li
										<?php elseif(!$categoryRecord['_hasChild'] && $categoryRecord['depth'] > '0'): ?>
											<?php echo $categoryRecord['_listItemStart'] ?>
												<a href="#"><?php echo $categoryRecord['name'] ?></a>
												<?php echo $categoryRecord['_listItemEnd'] ?>
							   //also if the category is the last child in this current loop, that means we need an extra closing li for this depth zero
												<?php if($categoryRecord['_isLastChild']): ?>
													<?php echo $categoryRecord['_listItemEnd'] ?>
												<?php endif; ?>
								// otherwise, opening and closing li around a linked name should cover everything else
										<?php else: ?>
											<?php echo $categoryRecord['_listItemStart'] ?>	
												<a href="#"><?php echo $categoryRecord['name'] ?></a>
											<?php echo $categoryRecord['_listItemEnd'] ?>
									<?php endif; ?>
							<?php endforeach; ?>
						</ul>

I'm getting this. However, there are also a lot of blank lines I removed to display here. Unnecessary looping, I assume.

<ul class="dropdown menu" data-dropdown-menu>
	<li>
		<a href="#">Breakfast</a>
			<ul menu>
				<li> <a href="#">Pancakes, Waffles, & French Toast $9</a>
				</li>
				<li> <a href="#">Specialty Breakfast Dishes</a>
				</li>
				<li> <a href="#">Platters</a>
				</li>
				<li> <a href="#">Breakfast Combo Platters</a>
				</li>
				<li> <a href="#">Benedicts</a>
				</li>
				<li> <a href="#">Omelettes or Pita Wraps</a>
				</li>
				<li> <a href="#">Breakfast Sides</a>
				</li>
				<li> <a href="#">Breakfast Sammies</a>
				</li>
				<li> <a href="#">Soups and Salads</a>
				</li>
			</ul>
	</li>
// I believe these next 3 tags are unnecessary and my current issue.

	</li>
</ul>
</li>

<li>
	<a href="#">Bites Before You Sip & Bite</a>
</li>
<li>
	<a href="#">Sandwiches, Wraps & Subs</a>
</li>
<li>
	<a href="#">Guy Fieri's Favorite Crab Cakes</a>
</li>
<li>
	<a href="#">Entrees</a>
</li>
<li>
	<a href="#">Burgers</a>
</li>
<li>
	<a href="#">Sides</a>
</li>
<li>
	<a href="#">Georgio & Niko's Junior Menu</a>
</li>
<li>
	<a href="#">Sips</a>
</li>
<li>
	<a href="#">Cocktails</a>
</li>
<li>
	<a href="#">Beer on Draft</a>
</li>
<li>
	<a href="#">Wine on Tap</a>
</li>
</ul>

I removed else statements and I don't know how this works but it does. It seems to me I would have to detect a lastchild in depth 2 to add the closing _listItemEnd tag for that branch's depth zero. I have a _listItemStart without a listItemEnd.

I moved some categories around and it doesn't break. Obviously this won't work on a menu with more than a depth of 2. Maybe you can help me with that to future proof this with unlimited depths / sub categories?

Am I getting lucky here and somehow a mistake happens to work? I don't get why this works. I troubleshooted and just came up with it logically.  

						<ul class="dropdown menu" data-dropdown-menu>
							<?php foreach ($menu_catsRecords as $categoryRecord): ?>
									<?php // If the category is depth zero and has children, put an opening li and a linked name. No closing li yet.?>
									<?php if($categoryRecord['_hasChild'] && $categoryRecord['depth'] == '0'): ?>
										<?php echo $categoryRecord['_listItemStart'] ?>
											<a href="#"><?php echo $categoryRecord['name'] ?></a>
									<?php endif; ?>
							    <?php // if the category does not have children and is greater than depth zero, not last, must be depth 2, put a linked name with opening and closing li ?>
										<?php if(!$categoryRecord['_hasChild'] && $categoryRecord['depth'] > '0' && !$categoryRecord['_isLastChild']): ?>
											<?php echo $categoryRecord['_listItemStart'] ?>
												<a href="#"><?php echo $categoryRecord['name'] ?></a>
											<?php echo $categoryRecord['_listItemEnd'] ?>
										<?php endif; ?>
							    <?php //if the category is the last child in this current loop, greater than depth zero, that means we need an extra closing li for this branch's depth zero EDIT: removed it ?>
											<?php if($categoryRecord['_isLastChild'] && $categoryRecord['depth'] > '0'): ?>
												<?php echo $categoryRecord['_listItemStart'] ?>
													<a href="#"><?php echo $categoryRecord['name'] ?></a>
												<?php echo $categoryRecord['_listItemEnd'] ?>							
											<?php endif; ?>
								  <?php // otherwise, opening and closing li around a linked name should cover everything else ?>
										<?php if(!$categoryRecord['_hasChild'] && $categoryRecord['depth'] == '0'): ?>
											<?php echo $categoryRecord['_listItemStart'] ?>
												<a href="#"><?php echo $categoryRecord['name'] ?></a>
											<?php echo $categoryRecord['_listItemEnd'] ?>
									<?php endif; ?>
							<?php endforeach; ?>
						</ul>

Hey rez,

The behaviour you're describing (nesting <ul> outside of the <a></a>) is - I believe - supposed to be the default category menu behaviour. It looks like that might be what you're recreated in your latest "working" attempt. I would suggest trying the code generator again and checking to see if/how the default output is different from your custom example. If the default output isn't getting what you want, then there might be a different issue at play.

In any case, if you want to customize the nesting in a category menu, I'd recommend inserting the tags (li, ul, etc.) themselves, rather than using the _listItemStart and _listItemEnd values, since these are generated in accordance with the default behaviour and won't be much help otherwise. This is, however, a much more complex method, and a bit beyond what I'd be able to demonstrate on the forum.

Let me know how it goes trying the default output, or if you have any other questions.

Thanks!

I see what I was doing wrong with the default code now that you have told me this.