0

I am fairly new to using PHP, before this navigation the extent of my PHP use was simple includes.

I have written a navigation.php file that generates links for a navigation dynamically using variables pulled from an array inside variables.php

The overall goal is to add/subtract links, subnavs, sub-subnavs, sub-sub-subnavs only by editing variables.php

The method I am using to generate the HTML structure feels clunky to me, it works just fine but I feel like there is a simpler way of doing this...

Also, I require additional styling for any LI that has a subnav present (an arrow to indicate a subnav is present). I would like to generate that dynamically.

That said my questions are:

  1. Is there a simpler way of doing this?
  2. Is there a way to generate my 's dynamically based on whether there is a sub-nav present?

Each page has the following code, it changes depending on the page.

<?php $title = 'Home'; ?>

My variables.php :

<!-- NAVIGATION ARRAY -->

<?php
$nav_mini = array(
    'Home' => 'index.php',
    'About' => 'about.php',
    'Services' => 'services.php'
    );
?>

<?php
$nav_main = array(
    'Home' => 'index.php',
    'About' => 'about.php',
    'Services' => 'services.php',
    'Portfolio' => 'contact.php',
    'Clients' => 'about.php',
    'Gallery' => 'services.php',
    'News' => 'services.php',
    'Contact Us' => 'contact.php'
    );
?>

<?php // SUB NAV ARRAYS

$nav_sub_about = array(
    'Our Team' => 'about.php'
    );

$nav_sub_michael = array(
    'Michael' => 'index.php',
    'Aaron' => 'about.php',
    'Kenny' => 'about.php',
    'David' => 'about.php'
    );

$nav_sub_services = array(
    'Get Found' => 'about.php'
    );

?>

Navigation PHP File main-nav.php

    <?php 

        foreach ( $nav_main as $key => $value ) {

            echo "<li><a ";
                echo "class='"; // STARTS CLASS=
                if ( $title == $key) { 
                echo "active "; }// ADDS ACTIVE CLASS TO LINK OF CURRENT PAGE
            echo "' "; // END QUOTES FOR CLASS="


            echo "href='$value'>$key";

                if ( $key == "About") { // STARTS IF SEQUENCE FOR SUBNAV ARROWS
                    echo "<span class='arrow'> +</span>";}
                elseif ( $key == "Services") {
                    echo "<span class='arrow'> +</span>";}

            echo "</a>\n";  // END ANCHOR TAG FOR MAIN NAV LINKS



//----------------------------------------------------------------------------------------------------------//
// PLEASE START SUB-NAVS HERE ------------------------------------------------------------------------------//
// AT THIS POINT A NEW <LI> IS GENERATED FROM THE FIRST FOREACH, IF THE BELOW IS TRUE IT POPULATES A SUBNAV //      


        if ( $key == "About"){  // START SUBNAV FOR ABOUT
            echo "<ul class='main-sub-nav'>"; // THIS LINE WAS ADDED TO START THE <UL> FOR THE SUBNAV, IT ENDS ON LINE 14

            foreach ( $nav_sub_about as $key => $value ) {
                echo "<li><a href='$value'>$key";

                    if ( $key == "Our Team") { // STARTS IF SEQUENCE FOR SUBNAV ARROWS
                    echo "<span class='arrow'> +</span>";}

                echo "</a>\n"; // ENDS ANCHOR TAG FROM SUBNAV LI

                    // SUB-SUB-NAV STARTS HERE
                        if ( $key == 'Our Team') {
                        echo "<ul class='main-sub-sub-nav'>"; // THIS STARTS THE UL FOR SUB-SUB-NAV

                            foreach ($nav_sub_michael as $key => $value ) {
                        echo "<li><a href='$value'>$key</a></li>\n";
                    }
                    echo "</ul>"; // THIS ENDS THE SUB-SUB-NAV UL STARTED ON LINE 34
                echo "</li>";}// THIS IS THE END IF <LI> FROM THE SECOND FOREACH ON LINE 35

        }

        echo "</ul>"; // THIS WAS ADDED TO END THE SUBNAV <UL> STARTED ON LINE 11
        echo "</li>";} // THIS IS THE END OF THE <LI> FROM THE FIRST FOREACH ECHO FROM LINE 8

//----------------------------------------------------------------------------------------------------------//
// AT THIS POINT A NEW <LI> IS GENERATED FROM THE FIRST FOREACH, IF THE BELOW IS TRUE IT POPULATES A SUBNAV //

            if ( $key == "Services"){
                echo "<ul class='main-sub-nav'>"; // THIS LINE WAS ADDED TO START THE <UL> FOR THE SUBNAV, IT ENDS ON LINE 14

                foreach ( $nav_sub_services as $key => $value ) {
                    echo "<li><a href='$value'>$key</a></li>\n";}
                echo "</ul>"; // THIS WAS ADDED TO END THE SUBNAV <UL> STARTED ON LINE 11
                echo "</li>";} // THIS IS THE END OF THE <LI> FROM THE FIRST FOREACH ECHO FROM LINE 8



        } // THIS BRACKET ENDS THE ENTIRE SET OF PHP.  ITS PAIR IS ON LINE 19

?>

The overall goal is to add/subtract links, subnavs, sub-subnavs, sub-sub-subnavs only by editing variables.php

Here is a live example of this nav structure working... http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/

GhitaB
  • 3,275
  • 3
  • 33
  • 62
Michael
  • 7,016
  • 2
  • 28
  • 41
  • At a glance I am wondering why you dont just use a multidimensional array or beak out of php to write the html. And to answer your question - yes, and yes. – Kai Qing Feb 14 '13 at 17:57
  • I tried a multi-dimensional array but I couldn't get it to work, even after looking at some other code. No doubt due to a lack of knowledge on my part. – Michael Feb 14 '13 at 18:02

2 Answers2

0

What you're doing is almost spot on but you're making yourself write around your own code Instead allow it to be generic, so write a function, that can call itself if it needs to, to do this:

$menu_items = array(
    'Home' => 'index.php'
    'About' => array('about.php', 
         array('Our Team'=>'ourteam.php'),
     etc
    );
?>
  • Start with <ul>
  • Loop through the given array
  • Add <li>
  • If is_string() it's one item append <a href>
  • If is_array() there are sub items,
    • add the <a href>
    • send the second element to this function and append the html it returns
  • close </li>
  • close </ul>
  • return it

One function handles all elements whether they are main or sub and calling it once completes your list no matter how many sub lists you have.

Now, for your mini menu just pick out the elements from the main array by their key (Home, About, Services) before creating the html with the one function

Popnoodles
  • 28,090
  • 2
  • 45
  • 53
  • This makes sense. Can you provide an example of what that function might look like, or a link to somewhere that could step me through it? Thanks! – Michael Feb 14 '13 at 18:14
0

A much cleaner solution is to build the navigation using multidimensional arrays and then iterate through them. If the value of an array is another array, then you know it has a sub menu.

Community
  • 1
  • 1
Ben
  • 60,438
  • 111
  • 314
  • 488