[RESOLVED] Help with unordered list of parents and children with arrays

[shonuff]

OK, so here's the deal, I'm trying to create a navigation menu out of an unordered list. I've been working all day on this and I've come pretty far, probably not the most efficient way, but it works for the most part. the problem is, I want it so that when the child <ul> of a parent menu item is selected the parent still has the class of "current" and the child <ul> still has the class of "subactive".

I have tried merging the children arrays and seeing if the current directory matched the url, and then if true, mark the child as "subactive" but it didn't work like I planned. Well, not at all, really.

I'm not asking for code writing here, I just want to understand what I need to do to accomplish my goal.

If more efficient code examples are produced I won't complain though. 🙂

Like I said, I'm probably not doing this the most efficient way...

Here's my current version of the code:

$main_nav = array( //define the main navigation array
    'Home' => '/',
    'Renovations, Additions & Repairs' => '/home-renovations-additions-repairs/',
    'Custom Built Homes' => '/custom-built-homes/',
    'View Our Project Gallery' => '/project-gallery/',
    'Contact Us' => '/contact-us/'
    );
$subnav1 = array( //subnavigation array
    'About Us' => '/about-us/',
    'The Palmer Difference' => '/the-palmer-difference/',
    'Articles' => '/articles/',
    'Testimonials' => '/testimonials/'
    );
$subnav2 = array( //subnavigation array
    'Our Process' => '/the-palmer-process/',
    'Frequently Asked Questions' => '/frequently-asked-questions/',
    'Testimonials' => '/testimonials/'
    );
$subnav3 = array( //subnavigation array
    'Our Process' => '/the-palmer-process/',
    'Frequently Asked Questions' => '/frequently-asked-questions/',
    'Testimonials' => '/testimonials/',
    'Lots For Sale' => '/lots-for-sale/',
    'The Stratford Plan' => '/custom-built-homes/stratford-custom-home-plan/'
    );
$subnav4 = array( //subnavigation array
    'The Palmer Difference' => '/the-palmer-difference/',
    'Articles' => '/articles/',
    'Testimonials' => '/testimonials/'
    );
$subnav5 = array( //subnavigation array
    'Our Process' => '/the-palmer-process/',
    'Frequently Asked Questions' => '/frequently-asked-questions/',
    'Testimonials' => '/testimonials/'
    );

$url = $_SERVER['REQUEST_URI']; //root folder
$folder = dirname($_SERVER["SCRIPT_NAME"]) . "/"; //folder name

$subarrays=array_merge($subnav1,$subnav2,$subnav3,$subnav4,$subnav5);

echo "<div id=\"navcontainer\">\n";
echo "\t<ul>\n";
foreach ($main_nav as $key => $value){
    if($url == $value || $folder == $value){
        $class="class=\"subactive\"";
        $id="id=\"current\"";
    }elseif($key=="Custom Built Homes" && in_array($folder,$subarrays)){
        $class="class=\"subactive\"";
        $id="id=\"current\"";
    }else{
        $class="class=\"subhidden\"";
        $id="";
    }
	echo "\t\t<li><a href=\"$value\" title=\"$key\" $id>$key</a>\n\t\t\t<ul $class>\n";
		if(($key=="Home")){
				foreach ($subnav1 as $key => $value){
						echo "\t\t\t\t<li><a href=\"$value\" title=\"$key\">$key</a></li>\n";
				}
		echo "\t\t\t</ul>\n\t\t</li>\n";
		}
		if(($key=="Renovations, Additions &amp; Repairs")){
				foreach ($subnav2 as $key => $value){
						echo "\t\t\t\t<li><a href=\"$value\" title=\"$key\">$key</a></li>\n";
				}
		echo "\t\t\t</ul>\n\t\t</li>\n";
		}
		if (($key=="Custom Built Homes")){
				foreach ($subnav3 as $key => $value){
						echo "\t\t\t\t<li><a href=\"$value\" title=\"$key\">$key</a></li>\n";
				}
		echo "\t\t\t</ul>\n\t\t</li>\n";
		}
		if (($key=="View Our Project Gallery")){
				foreach ($subnav4 as $key => $value){
						echo "\t\t\t\t<li><a href=\"$value\" title=\"$key\">$key</a></li>\n";
				}
		echo "\t\t\t</ul>\n\t\t</li>\n";
		}
		if (($key=="Contact Us")){
				foreach ($subnav5 as $key => $value){
						echo "\t\t\t\t<li><a href=\"$value\" title=\"$key\">$key</a></li>\n";
				}
		echo "\t\t\t</ul>\n\t\t</li>\n";
		}
}
echo "\t</ul>\n";
echo "</div>\n";

Which outputs the following HTML if you were currently on the home page:

<div id="navcontainer">
	<ul>
		<li><a href="/" title="Home" id="current">Home</a>
			<ul class="subactive">
				<li><a href="/about-us/" title="About Us">About Us</a></li>
				<li><a href="/the-palmer-difference/" title="The Palmer Difference">The Palmer Difference</a></li>
				<li><a href="/articles/" title="Articles">Articles</a></li>
				<li><a href="/testimonials/" title="Testimonials">Testimonials</a></li>
			</ul>
		</li>
		<li><a href="/home-renovations-additions-repairs/" title="Renovations, Additions &amp; Repairs" >Renovations, Additions &amp; Repairs</a>

		<ul class="subhidden">
			<li><a href="/the-palmer-process/" title="Our Process">Our Process</a></li>
			<li><a href="/frequently-asked-questions/" title="Frequently Asked Questions">Frequently Asked Questions</a></li>
			<li><a href="/testimonials/" title="Testimonials">Testimonials</a></li>
		</ul>
	</li>
	<li><a href="/custom-built-homes/" title="Custom Built Homes" >Custom Built Homes</a>

		<ul class="subhidden">
			<li><a href="/the-palmer-process/" title="Our Process">Our Process</a></li>
			<li><a href="/frequently-asked-questions/" title="Frequently Asked Questions">Frequently Asked Questions</a></li>
			<li><a href="/testimonials/" title="Testimonials">Testimonials</a></li>
			<li><a href="/lots-for-sale/" title="Lots For Sale">Lots For Sale</a></li>
			<li><a href="/custom-built-homes/stratford-custom-home-plan/" title="The Stratford Plan">The Stratford Plan</a></li>

		</ul>
	</li>
	<li><a href="/project-gallery/" title="View Our Project Gallery" >View Our Project Gallery</a>
		<ul class="subhidden">
			<li><a href="/the-palmer-difference/" title="The Palmer Difference">The Palmer Difference</a></li>
			<li><a href="/articles/" title="Articles">Articles</a></li>
			<li><a href="/testimonials/" title="Testimonials">Testimonials</a></li>

		</ul>
	</li>
	<li><a href="/contact-us/" title="Contact Us" >Contact Us</a>
		<ul class="subhidden">
			<li><a href="/the-palmer-process/" title="Our Process">Our Process</a></li>
			<li><a href="/frequently-asked-questions/" title="Frequently Asked Questions">Frequently Asked Questions</a></li>
			<li><a href="/testimonials/" title="Testimonials">Testimonials</a></li>

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

Here's the relevant css style for the menu, if needed:

/* ===== begin navigation styles ===== */
#navcontainer { margin:0 0 52px 0; }
#navcontainer a { text-decoration: none; }
/* first level */
#navcontainer ul { width:745px; border-bottom:1px solid #001F4F; border-top:1px solid #0C2C5F; padding:0; margin:0; list-style:none; position:absolute; background-color:#11419D; padding:4px 0; }
#navcontainer li { float:left; display:inline; }
#navcontainer ul a, #navcontainer ul a:link, #navcontainer ul a:visited { position:relative; background-color:#11419D; color:#fff; padding:4px 10px; font-weight:bold; }
#navcontainer ul a:hover, #navcontainer ul a:focus { position:relative; background:#fff; border-bottom:1px solid #fff; border-top:3px solid #0C2C5F; color:#11419D; }
/* current link */
#navcontainer ul a#current, #navcontainer ul a#current:link, #navcontainer ul a#current:visited { position:relative; font-weight:bold; background:#fff; border-bottom:1px solid #fff; border-top:3px solid #0C2C5F; color:#11419D; }
/* second level */
#navcontainer ul ul { font-size:90%; position:absolute; top:27px; left:0; width:100%; border-top:none; background-color:#fff; }
#navcontainer ul ul li { border:none; display:inline; }
#navcontainer ul ul a, #navcontainer ul ul a:link, #navcontainer ul ul a:visited { background-color:#fff; color:#11419D; }
#navcontainer ul ul a:hover, #navcontainer ul ul a:focus { text-decoration:underline; border:none; background-color:#fff; color:#11419D; }
/* show second level on first level link hover */
#navcontainer li:hover ul { display:block; z-index:100; }
/* current link */
#navcontainer ul ul a#subcurrent, #navcontainer ul ul a#subcurrent:link, #navcontainer ul ul a#subcurrent:visited { font-weight: bold; }
#navcontainer .subhidden { display:none; }
#navcontainer .subactive { z-index:99; }
/* ===== end navigation styles ===== */

I'll keep chipping away at it. Thank you for taking the time to help!

[leatherback]

Hi,

I suggest you modify your menu array a little. Have look at this example:

$main_nav = array( //define the main navigation array
    'Home' => array(
      'path' => '/',
	  'Subitems' => array( //subnavigation array
        'About Us' => '/about-us/',
        'The Palmer Difference' => '/the-palmer-difference/',
        'Articles' => '/articles/',
        'Testimonials' => '/testimonials/'
        )
	  ),
    'Renovations, Additions & Repairs' => array(
	  'path' =>'/home-renovations-additions-repairs/'),
    'Custom Built Homes' => array(
	  'path' => '/custom-built-homes/',
	  'Subitems' => array( //subnavigation array
        'Our Process' => '/the-palmer-process/',
        'Frequently Asked Questions' => '/frequently-asked-questions/',
        'Testimonials' => '/testimonials/'
        )
	  ),
    'View Our Project Gallery' =>  array(
	  'path' =>'/project-gallery/'),
    'Contact Us' =>  array(
	  'path' =>'/contact-us/')
    );

$url = $_SERVER['REQUEST_URI']; //root folder
$folder = dirname($_SERVER["SCRIPT_NAME"]) . "/"; //folder name

$block = "<ul>";
foreach ($main_nav as $key => $value){
    {
	if($url == $value)
	  {
          $id="id=\"current\"";
	  if($folder == $value)
	    {
        $class="class=\"subactive\"";
		}
	  else
	    {
		$class='';
		}
	  }
	else
	  {
	  $id    = '';
	  }

$block .= "
      <li>
	    <a ".$id." href=\"".$value['path']."\" title=\"".$key".\">
		  ".$key."
		</a>
      </li>";

if(array_key_exists('SubItems', $values))
  {
  $block .= '<ul>';
  foreach($values as $sublabel => $sublink)
    {
	$block .= "
	  <li>
	    <a ".$class." href=\"".$sublink."\" title=\"".$sublabel".\">
		  ".$sublabel."
		</a>
      </li>";
	}
  // end the sublink block
  $subblock .= "</ul>";
  }
// end main menu level item
$block .="</li>";
}
  // end menu
  $block .="</ul>";

[shonuff]

Thanks, leatherback.

I knew a multidimensional array would be the most efficient way, I just didn't get the grasp of it, your example helped me a lot.

There were a few syntax errors, and I had to format it to fit my situation and coding style but I'm very happy that I'm at least doing this the 'right' way.

However, I'm still in the same boat as before, I need to mark the class of the currently selected parent <li> as "current" if one of it's children <ul> contains the child <li> of the page I'm on at the moment so it will stay open. For instance:

If I'm on the "home" page, the html should be:

<ul>
<li><a href="/" title="Home" id="current">Home</a>
		<ul class="subactive">
			<li><a href="/about-us/" title="About Us">About Us</a></li>
			<li><a href="/the-palmer-difference/" title="The Palmer Difference">The Palmer Difference</a></li>
			<li><a href="/articles/" title="Articles">Articles</a></li>
			<li><a href="/testimonials/" title="Testimonials">Testimonials</a></li>
		</ul>
</li>

And if I'm on one of the "Home" page's children the Home <li> will retain the id of current.

Right now, if I choose a child page of it's parent, the submenu disappears, because the containing <ul> id of the child is marked as "subhidden" because there is nothing to match the current page to the value contained in the array to mark it as "subactive". At least I don't think so?

Maybe I'm going about this wrong?

Here's the current version of the code:

$main_nav = array( //define the main navigation array
	'Home' => array(
					'path' => '/',
					'subitems' => array(
									   'About Us' => '/about-us/',
									   'The Palmer Difference' => '/the-palmer-difference/',
									   'Articles' => '/articles/',
									   'Testimonials' => '/testimonials/'
									   )
				   ),
    'Renovations, Additions & Repairs' => array(
												    'path' => '/home-renovations-additions-repairs/',
												    'subitems' => array(
												    				   'Our Process' => '/the-palmer-process/',
												    				   'Frequently Asked Questions' => '/frequently-asked-questions/',
												    				   'Testimonials' => '/testimonials/'
												    				   )
												   ),
	'Custom Built Homes' => array(
								  'path' => '/custom-built-homes/',
								  'subitems' => array(
													 'Our Process' => '/the-palmer-process/',
													 'Frequently Asked Questions' => '/frequently-asked-questions/',
													 'Testimonials' => '/testimonials/',
													 'Lots For Sale' => '/lots-for-sale/',
													 'The Stratford Plan' => '/custom-built-homes/stratford-custom-home-plan/'
        											 )
    							 ),
    'View Our Project Gallery' =>  array(
									     'path' =>'/project-gallery/',
									     'subitems' => array(
															'About Us' => '/about-us/',
															'The Palmer Difference' => '/the-palmer-difference/',
															'Articles' => '/articles/',
															'Testimonials' => '/testimonials/'
															)
									   ),
	'Contact Us' =>  array(
						   'path' => '/contact-us/',
						   'subitems' => array(
											  'About Us' => '/about-us/',
											  'The Palmer Difference' => '/the-palmer-difference/',
											  'Articles' => '/articles/',
											  'Testimonials' => '/testimonials/'
											  )
						  )
    );

$url = $_SERVER['REQUEST_URI']; //root folder
$folder = dirname($_SERVER["SCRIPT_NAME"]) . "/"; //folder name

$block .= "<div id=\"navcontainer\">\n";
$block .= "<ul>\n";
foreach ($main_nav as $key => $value){
    if($url == $value["path"] || $folder == $value["path"]){
        $class="class=\"subactive\"";
        $id="id=\"current\"";
    }else{
        $class="class=\"subhidden\"";
        $id="";
    }
	$block .= "<li><a href=\"".$value["path"]."\" title=\"$key\" $id>$key</a>";
		if(array_key_exists("subitems", $value)){
		  $block .= "\n";
		  $block .= "\t\t<ul $class>\n";
				foreach($value["subitems"] as $sublabel => $sublink){
				$block .= "\t\t\t<li><a href=\"".$sublink."\" title=\"$sublabel\">$sublabel</a></li>\n";
				}
		  // end the sublink block
		  $block .= "\t\t</ul>\n";
		}
	// end main menu level item
	$block .="</li>\n";
    }
// end menu
$block .="</ul>\n";
$block .= "</div>\n";

echo $block;

//echo "<pre>";
//print_r($main_nav);
//echo "</pre>";

All the work to determine the class of the <ul> happens here:

    if($url == $value["path"] || $folder == $value["path"]){
        $class="class=\"subactive\"";
        $id="id=\"current\"";
    }else{
        $class="class=\"subhidden\"";
        $id="";
    }

I'm wondering if there is another check I can place there to determine the current page if it's a submenu item?

Sorry for the length.

Thanks for getting me on the right path.

[shonuff]

I think I figured it out. I added an in_array check to my conditional clause. At least it seems to work.

		if($url == $value["path"] || $folder == $value["path"]){
			$class=" class=\"subactive\"";
			$id=" id=\"current\"";
		}elseif(in_array($folder, $value["subitems"])){ //seems to work?
			$class=" class=\"subactive\"";
			$id=" id=\"current\"";
		}else{
			$class=" class=\"subhidden\"";
			$id="";
		}

[shonuff]

Thanks again leatherback for the help. Now to turn this into a function for reusability. :-)

Problem resolved.

[shonuff]

Bah, it won't work on duplicate submenu items. Both main menu items with the same submenu items get the class "subactive". :mad:

[leatherback]

shonuff;10896064 wrote:

Bah, it won't work on duplicate submenu items. Both main menu items with the same submenu items get the class "subactive". :mad:

Instead of using labels to identify sections, perhaops you can use numbers?

I run my menus straight from a database, and use the label ID as section ID...

[shonuff]

Yeah, I ended up just using a database, I was trying to do something new but I'm on a deadline...