Navigation Function

[JustinK101]

I am writing a navigation function which takes in two parameters. The first parm is the tab that should be selected. The second parm is the sub-navigation item that should be selected. I am wondering what the best and cleanest way to do this is?

 

Here is the raw HTML structure of the navigation

 

                               <div id="navigation">
				<div id="maintabs">
					<a class="selected" href="#"><span>Home</span></a>
					<a href="#"><span>Reports</span></a>
					<a href="#"><span>Administration</span></a>
					<a href="#"><span>Log Out</span></a>
				</div>
				<div id="subnav">
					<a href="#" class="selected">Sub Nav Item #1 For Home</a>
					<a href="#">Sub Nav Item #2 For Home</a>
					<a href="#">Sub Nav Item #3 For Home</a>
					<a href="#">Sub Nav Item #4 For Home</a>
				</div>
			</div>

 

So basically I need to look at the tab and then change the class to `selected` for that tab in maintabs. Secondly I need to look at the tab to figure which sub navigation items to load for that tab. Lastly, I need to look at the selected sub navigation item and change the class to `selected` for that sub navigation item.

 

The only thing I can think of doing is a messy large if() else() block with a lot of redundant data.

[Jeremysr]

Put the menu items in an associative array where the keys are the URL's, and the values are the text of the link. Then loop through the array, printing out each menu item.

 

$main_menu = array(
    'home.php' => 'Home',
    'reports.php' => 'Reports',
    'admin.php' => 'Administration',
    'logout.php' => 'Log Out'
);

foreach ($main_menu as $url => $text) {
    if ($text == $selected) {
        $class = 'class="selected"';
    } else {
        $class = '';
    }

    echo "<a $class href='$url'><span>$text</span></a>";
}

[n3ightjay]

I would use ternary "ifs"

 

<div id="navigation">
<div id="maintabs">
	<a href="#"<?=($tabParam == "home"?" selected":"");?>><span>Home</span></a>
	<a href="#"<?=($tabParam == "reports"?" selected":"");?>><span>Reports</span></a>
	<a href="#"<?=($tabParam == "administration"?" selected":"");?>><span>Administration</span></a>
	<a href="#"<?=($tabParam == "logOut"?" selected":"");?>><span>Log Out</span></a>
</div>
<div id="subnav">
	<a href="#"<?=($tabSubNav == "subNav1"?" selected":"");?>>Sub Nav Item #1 For Home</a>
	<a href="#"<?=($tabSubNav == "subNav2"?" selected":"");?>>Sub Nav Item #2 For Home</a>
	<a href="#"<?=($tabSubNav == "subNav3"?" selected":"");?>>Sub Nav Item #3 For Home</a>
	<a href="#"<?=($tabSubNav == "subNav4"?" selected":"");?>>Sub Nav Item #4 For Home</a>
</div>
</div>

[JustinK101]

Here is what I have thus far, and I haven't even done the selected the `selected` subnavigation item. This is a freaken nightmare. There has to be a better way to do this?

 

public function load($tab, $subnav) {
		echo '<div id="navigation">
				<div id="maintabs">';

		if($tab == 0) {
			echo '<a class="selected" href="#"><span>Dashboard</span></a>
				  <a href="#"><span>Reports</span></a>
				  <a href="#"><span>Administration</span></a>
				  <a href="#"><span>Log Out</span></a>
				  </div>
				  	<div id="subnav">
						<a href="#">Sub Nav Item #1 Dashboard</a>
						<a href="#">Sub Nav Item #2 Dashboard</a>
						<a href="#">Sub Nav Item #3 Dashboard</a>
						<a href="#">Sub Nav Item #4 Dashboard</a>
					</div>';
		} else if($tab == 1) {
			echo '<a href="#"><span>Dashboard</span></a>
				  <a class="selected" href="#"><span>Reports</span></a>
				  <a href="#"><span>Administration</span></a>
				  <a href="#"><span>Log Out</span></a>
				  </div>	
				  	<div id="subnav">
						<a href="#">Sub Nav Item #1 Reports</a>
						<a href="#">Sub Nav Item #2 Reports</a>
						<a href="#">Sub Nav Item #3 Reports</a>
						<a href="#">Sub Nav Item #4 Reports</a>
						<a href="#">Sub Nav Item #5 Reports</a>
						<a href="#">Sub Nav Item #6 Reports</a>
						<a href="#">Sub Nav Item #7 Reports</a>
						<a href="#">Sub Nav Item #8 Reports</a>
						<a href="#">Sub Nav Item #9 Reports</a>
					</div>';
		} else if($tab == 2) {
			echo '<a href="#"><span>Dashboard</span></a>
				  <a href="#"><span>Reports</span></a>
				  <a class="selected" href="#"><span>Administration</span></a>
				  <a href="#"><span>Log Out</span></a>
				  </div>	
				  	<div id="subnav">
						<a href="#">Sub Nav Item #1 Administration</a>
						<a href="#">Sub Nav Item #2 Administration</a>
						<a href="#">Sub Nav Item #3 Administration</a>
					</div>';
		} else if($tab == 3) {
			echo '<a href="#"><span>Dashboard</span></a>
				  <a href="#"><span>Reports</span></a>
				  <a href="#"><span>Administration</span></a>
				  <a class="selected" href="#"><span>Log Out</span></a>
				  </div>';
		}

		echo '</div>';
	}

[n3ightjay]

look up

[JustinK101]

I would use ternary "ifs"

 

<div id="navigation">
<div id="maintabs">
	<a href="#"<?=($tabParam == "home"?" selected":"");?>><span>Home</span></a>
	<a href="#"<?=($tabParam == "reports"?" selected":"");?>><span>Reports</span></a>
	<a href="#"<?=($tabParam == "administration"?" selected":"");?>><span>Administration</span></a>
	<a href="#"<?=($tabParam == "logOut"?" selected":"");?>><span>Log Out</span></a>
</div>
<div id="subnav">
	<a href="#"<?=($tabSubNav == "subNav1"?" selected":"");?>>Sub Nav Item #1 For Home</a>
	<a href="#"<?=($tabSubNav == "subNav2"?" selected":"");?>>Sub Nav Item #2 For Home</a>
	<a href="#"<?=($tabSubNav == "subNav3"?" selected":"");?>>Sub Nav Item #3 For Home</a>
	<a href="#"<?=($tabSubNav == "subNav4"?" selected":"");?>>Sub Nav Item #4 For Home</a>
</div>
</div>

 

How does that work? Where is the class= and what does the : do?

[n3ightjay]

sorry missed class= ....

<?=($tabParam == "home"?" class=selected":"");?>

 

ternary == if block inline (kinda)

 

if($tabParam == "home"){
  echo "class=selected";
}else{
  echo "";
}

 

http://www.phpbbstyles.com/viewtopic.php?t=5544

[JustinK101]

OK I like Jeremysr methods thus far. Here is what I have, but how do I then deal with the sub-navigation items? I think I need a double dimension array, with the first dimension being th tabs, and the second dimension being sub-navigation items.

 

$main_tabs = array(
    					'controller.php?request=home' => 'Home',
    					'controller.php?request=reports' => 'Reports',
    					'controller.php?request=administration' => 'Administration',
    					'controller.php?request=preferences' => 'Preferences',
    					'controller.php?request=logout' => 'Log Out'
				 );

	foreach ($main_tabs as $url => $label) {
		if ($label == $tab_selected) {
			$class = 'class="selected"';
		} else {
			$class = '';
		}

		echo "<a $class href='$url'><span>$label</span></a>";
	}

[JustinK101]

OK I made another array holding all the sub-navigation nonsense. Now how do I loop through it like I did for the tabs array?

 

$sub_navigations = array(array(
					   		'controller.php?request=dashboard_2' => 'Sub Nav Item #1 Dashboard',
					   		'controller.php?request=dashboard_3' => 'Sub Nav Item #2 Dashboard',
					   		'controller.php?request=dashboard_4' => 'Sub Nav Item #3 Dashboard',
					   		'controller.php?request=dashboard_5' => 'Sub Nav Item #4 Dashboard',
					   		'controller.php?request=dashboard_6' => 'Sub Nav Item #5 Dashboard'
					  	 ) array (
					   		'controller.php?request=reports_2' => 'Sub Nav Item #1 Reports',
					   		'controller.php?request=reports_3' => 'Sub Nav Item #2 Reports',
					   		'controller.php?request=reports_4' => 'Sub Nav Item #3 Reports',
					   		'controller.php?request=reports_5' => 'Sub Nav Item #4 Reports',
					   		'controller.php?request=reports_6' => 'Sub Nav Item #5 Reports',
					   		'controller.php?request=reports_7' => 'Sub Nav Item #6 Reports',
					   		'controller.php?request=reports_8' => 'Sub Nav Item #7 Reports',
					   		'controller.php?request=reports_9' => 'Sub Nav Item #8 Reports',
					   		'controller.php?request=reports_10' => 'Sub Nav Item #9 Reports'
					   	) array (
					   		'controller.php?request=administration_2' => 'Sub Nav Item #1 Administration',
					   		'controller.php?request=administration_3' => 'Sub Nav Item #2 Administration',
					   		'controller.php?request=administration_4' => 'Sub Nav Item #3 Administration',
					   		'controller.php?request=administration_5' => 'Sub Nav Item #4 Administration',
					   		'controller.php?request=administration_6' => 'Sub Nav Item #5 Administration'
					   	) array (
					   		'controller.php?request=preferences_2' => 'Sub Nav Item #1 Preferences',
					   		'controller.php?request=preferences_3' => 'Sub Nav Item #2 Preferences',
					   		'controller.php?request=preferences_4' => 'Sub Nav Item #3 Preferences',
					   		'controller.php?request=preferences_5' => 'Sub Nav Item #4 Preferences',
					   		'controller.php?request=preferences_6' => 'Sub Nav Item #5 Preferences'
					   	) array (
                                                        )
					   );

[Jeremysr]

I would make an array of submenu arrays like this:

 

$sub_menus = array(
    'Home' => array(
        'home_subnav1.php' => 'Home subnav item 1',
        'home_subnav2.php' => 'Home subnav item 2',
        'home_subnav3.php' => 'Home subnav item 3'
    ),

    'Reports' => array(
        'reports_subnav1.php' => 'Reports subnav item 1',
        'reports_subnav2.php' => 'Reports subnav item 2',
        'reports_subnav3.php' => 'Reports subnav item 3'
    ),

    ...
);

 

Then you can print the subnav the same way as the main menu:

 

foreach ($sub_menus[$selected] as $url => $text) { // $selected is the main menu item that is selected, for example 'Home'
    if ($text == $subnav_selected) {
        $class = 'class="selected"';
    } else {
        $class = '';
    }

    echo "<a $class href='$url'>$text</a>";
}

[JustinK101]

Jeremysr,

 

Genius. That worked great. Thank you so much!!!