Rendering HTML for a navigation menu using a class

Question

Below I have implemented a class that will generate HTML to build the structure for a navigation menu.

define('BASE_URL', 'http://localhost/site');

class Navigation
{
    private $doc;
    private $xpath;
    private $rootNode;

    /**
     * Initialize navigation.
     */
    public function __construct($menu)
    {
        $this->doc = new DOMDocument();
        $this->doc->appendChild($this->buildMenu($menu));
        $this->xpath = new DOMXpath($this->doc);
    }

    /**
     * Un-mark selected menu item.
     */
    public function deselect()
    {
        $liNodeList = $this->xpath->query("//li[contains(@class, 'selected')]");
        if ($liNodeList->length) {
            $liNode = $liNodeList->item(0);
            $classAttr = explode(' ', $liNode->getAttribute('class'));
            $key = array_search('selected', $classAttr);
            unset($classAttr[$key]);    
            $liNode->setAttribute('class', implode(' ', $classAttr));
        }
    }

    /**
     * Mark first occurrence of menu item containing link with URI as selected.
     * @param   $uri    string
     */
    public function select($uri)
    {
        $liNodeList = $this->xpath->query("//li[a[contains(@href, '" . $uri . "')]]");
        if ($liNodeList->length) {
            $liNode = $liNodeList->item(0);
            $classAttr = explode(' ', $liNode->getAttribute('class'));
            $classAttr[] = 'selected';
            $liNode->setAttribute('class', trim(implode(' ', $classAttr)));
        }
    }

    /**
     * Build menu.
     * @param   $menu   array
     * @param   $depth  int
     */
    private function buildMenu($menu, $depth = 0) 
    {
        $divNode = $this->createNav();
        $ulNode = $this->doc->createElement('ul');
        // set first nav as root
        if (!$depth) {
            $divNode->setAttribute('id', 'primary-nav');
            $this->rootNode = $divNode;
        }
        // add menu items
        foreach ($menu as $index => $menuItem) {
            $ulNode->appendChild($this->buildMenuItem($menuItem, $depth, $index));
        }
        $divNode->appendChild($ulNode);

        return $divNode;
    }

    /**
     * Build menu.
     * @param   $menu   array
     * @param   $depth  int
     * @param   $index  int
     */
    private function buildMenuItem($menuItem, $depth, $index) 
    {   
        $liNode = $this->doc->createElement('li');
        $aNode = $this->doc->createElement('a');
        // add class attribute
        $classAttr = array();   
        if (isset($menuItem['class'])) {
            $classAttr[] = $menuItem['class'];  
        }
        if (strpos($_SERVER['REQUEST_URI'], $menuItem['url']) !== false) {
            $classAttr[] = 'selected';
        }
        if ($classAttr) {
            $liNode->setAttribute('class', implode(' ', $classAttr));
        }
        // add target attribute
        if (isset($menuItem['target'])) {
            $liNode->setAttribute('target', $menuItem['target']);
        }
        // set absolute URL
        if (strpos($menuItem['url'], 'http') === false) {
            $menuItem['url'] = BASE_URL . '/' . $menuItem['url'];
        }
        $aNode->setAttribute('href', $menuItem['url']);
        // add link
        $aNode->nodeValue = $menuItem['text'];
        $liNode->appendChild($aNode);
        // add menu items       
        if (isset($menuItem['menu'])) {
            $liNode->appendChild($this->buildMenu($menuItem['menu'], $depth + 1));
        }

        return $liNode;
    }

    /**
     * Get menu.
     */
    public function getMenu()
    {
        return $this->doc->saveHTML();
    }

    /**
     * Create nav element that will wrap list.
     */
    private function createNav()
    {
        $divNode = $this->doc->createElement('div');
        $divNode->setAttribute('class', 'nav');
        return $divNode;
    }

    /**
     * Check if node element is nav element i.e. has 'nav' class name
     * @param   $node   DOMElement
     */
    private function isNav(DOMElement $node)
    {
        return array_search('nav', explode(' ', $node->getAttribute('class'))) !== false;
    }
}

This is how it would be used:

$menu = array(
    array(
        "text" => "Nav Item 1", 
        "url" => "page1.php"
    ),
    array(
        "text"  => "Nav Item 2", 
        "url"   => "page2.php", 
        "menu"  => array(
            array(
                "text" => "Nav Item 2.1", 
                "url" => "#", 
                "menu" => array(
                    array(
                        "text"  => "Nav Item 2.1.1",
                        "url"   => "http://www.google.com",
                        "target" => "_blank"
                    ),
                    array(
                        "text"  => "Nav Item 2.1.2",
                        "url"   => "page2-1-2.php",
                        "class" => "page2-1-2"
                    )
                ),
            ),
            array(
                "text" => "Nav Item 2.2", 
                "url" => "page2-2.php"
            )
        ),
        "class" => "nav-item-2"
    )
);

$nav = new Navigation($menu);

$nav->select('page2-1-2.php');

echo $nav->getMenu();

This will generate:

<div class="nav" id="primary-nav">
  <ul>
    <li><a href="http://localhost/site/page1.php">Nav Item 1</a></li>
    <li class="nav-item-2">
      <a href="http://localhost/site/page2.php">Nav Item 2</a>
      <div class="nav">
        <ul>
          <li>
            <a href="http://localhost/site/#">Nav Item 2.1</a>
            <div class="nav">
              <ul>
                <li target="_blank"><a href="http://www.google.com">Nav Item 2.1.1</a></li>
                <li class="page2-1-2"><a href="http://localhost/site/page2-1-2.php">Nav Item 2.1.2</a></li>
              </ul>
            </div>
          </li>
          <li><a href="http://localhost/site/page2-2.php">Nav Item 2.2</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

I am aware of Pear HTML_Menu but I wanted to create my own implementation. Initially, I was building the HTML using string concatenation, but I felt it had some limitations. So I switched to building the HTML using a tree structure which gives me more control on manipulating elements.

Anyways, any suggestions on how to improve this?

cFreed · Accepted Answer · 2016-01-22 00:22:44Z

Cosmetics

You have a typo in the comment preceding the buildMenuItem() function: "Build menu" should be "Build menu item".

Technical improvement

In your isNav() function, since you don't need to get the corresponding key you'd better using in_array() instead of array_search():

return in_array('nav', explode(' ', $node->getAttribute('class')));

It makes the code simpler, and causes less internal work.

On the other hand, you can get rid of double wrapping the menu (or its childs) by <div><ul>...</ul></div>: <ul> is enough, and can gather id of the primary level and class when defined.

Strategy

Here is the most important change I'd suggest, based on the idea that you can simplify your source $menu structure to gain readability (in the structure itself and in the code of the Navigation class), and maintainability about the different modifiers you could add further.

Currently the structure looks like this:

$meta_menu = [
  [
    'text' => <item text>
    'url' => <url>
    'hide' => TRUE
    'class' => <class>
    'target' => <target>
    'menu' => [
      [
        // ... child item(s)
      ],
    ],
  ],
];

I propose to change it to this:

$meta_menu = [
  <item text> => [
    <url> => [
      // ... child item(s)
    ],
    '#hide'   => TRUE|FALSE (default)
    '#target' => <target>
    '#class'  => <class>
  ],
];
// with <url> => NULL if there is no child

This way, the structure uses less nesting levels, taking advantage of the fact that the two main members text and url become keys (for the item, or for its childs). It is more compact, and easy to populate when defining a menu.
So your example of $menu becomes:

$menu = [
  'Nav Item 1' => [
    '#hide' => FALSE,
    'page1.php' => NULL,
  ],
  'Nav Item 2' => [
    '#class' => 'nav-item-2',
    'page2.php' => [
      'Nav Item 2.1' => [
        '#' => [
          'Nav Item 2.1.1' => [
            '#target' => '_blank',
            'http://www.google.com' => NULL,
          ],
          'Nav Item 2.1.2' => [
            '#class' => 'page2-1-2',
            'page2-1-2.php' => NULL,
          ],
        ],
      ],
      'Nav Item 2.2' => [
        'page2-2.php' => NULL,
      ],
    ],
  ],
];

And the Navigation class code:

define('BASE_URL', 'http://localhost/site');

class Navigation
{
  private $doc;
  private $xpath;
  private $rootNode;

  /**
   * Initialize navigation.
   */
  public function __construct($menu) {
    $this->doc = new DOMDocument();
    $this->doc->appendChild($this->buildMenu($menu));
    $this->xpath = new DOMXpath($this->doc);
  }

  /**
   * Un-mark selected menu item.
   */
  public function deselect() {
    $liNodeList = $this->xpath->query("//li[contains(@class, 'selected')]");
    if ($liNodeList->length) {
        $liNode = $liNodeList->item(0);
        $classAttr = explode(' ', $liNode->getAttribute('class'));
        $key = array_search('selected', $classAttr);
        unset($classAttr[$key]);    
        $liNode->setAttribute('class', implode(' ', $classAttr));
    }
  }

  /**
   * Mark first occurrence of menu item containing link with URI as selected.
   * @param   $uri    string
   */
  public function select($uri) {
    $liNodeList = $this->xpath->query("//li[a[contains(@href, '" . $uri . "')]]");
    if ($liNodeList->length) {
        $liNode = $liNodeList->item(0);
        $classAttr = explode(' ', $liNode->getAttribute('class'));
        $classAttr[] = 'selected';
        $liNode->setAttribute('class', trim(implode(' ', $classAttr)));
    }
  }

  /**
   * Build menu.
   * @param   $menu   array
   * @param   $depth  int
   */
  private function buildMenu($menu, $depth = 0) {
    $ulNode = $this->doc->createElement('ul');
    $ulNode->setAttribute('class', 'nav');
    // set first nav as root
    if (!$depth) {
        $ulNode->setAttribute('id', 'primary-nav');
        $this->rootNode = $ulNode;
    }
    // add menu items
    foreach ($menu as $itemText => $item) {
      if (empty($item['#hide'])) {
        $ulNode->appendChild($this->buildMenuItem($itemText, $item, $depth));
      }   
    }
    return $ulNode;
  }

  /**
   * Build menu item.
   * @param   $menu   array
   * @param   $depth  int
   * @param   $index  int
   */
  private function buildMenuItem($itemText, $item, $depth) {
    // prepare item structure
    $liNode = $this->doc->createElement('li');
    $aNode = $this->doc->createElement('a');

    // iterate item properties
    foreach ($item as $key => $value) {
      switch ($key) {
        case '#hide':
          break;
        case '#class':
          $classAttr[] = $value;  
          break;
        case '#target':
          $liNode->setAttribute('target', $value);
          break;
        default:
          $url = $key;
          $childMenu = $value;
      }
    }

    // finalize item
    if (strpos($_SERVER['REQUEST_URI'], $url) !== false) {
      $classAttr[] = 'selected';
    }
    if (@$classAttr) {
      $liNode->setAttribute('class', implode(' ', $classAttr));
    }
    if (strpos($url, 'http') === false) {
        $url = BASE_URL . '/' . $url;
    }
    $aNode->setAttribute('href', $url);
    $aNode->nodeValue = $itemText;
    $liNode->appendChild($aNode);

    // add child items, if any     
    if ($childMenu) {
      $liNode->appendChild($this->buildMenu($childMenu, $depth + 1));
    }

    return $liNode;
  }

  /**
   * Get menu.
   */
  public function getMenu() {
    return $this->doc->saveHTML();
  }

  /**
   * Check if node element is nav element i.e. has 'nav' class name
   * @param   $node   DOMElement
   */
  private function isNav(DOMElement $node)
  {
    return in_array('nav', explode(' ', $node->getAttribute('class')));
  }
}

You may notice that I dropped the createNav() function, now using only <ul> it seems so simple to create it inside of buildMenu().

What is also notabloy changed is the main part of buildChildMenu(), where a foreach() is needed to iterate properties of the new structure, which are then processed through a switch().

Finally I used the (unloved, but IMO perfectly right here) error suppressor flag in if (@$classAttr), so avoiding to have to initialize an empty $classAttr = [];.

_NOTE: I didn't even checked anything in the deselect() and select() functions.

Ah, how I love this site as I always get useful feedback. In particular, the new structure does make things easier and shorter. Thanks! — Mikey
– Mikey, Commented Jan 23, 2016 at 2:15
@Mikey Glad to help. I must say that we, answerers, also learn much: not only when reviewing but also from other answers like Paul's one here. All that makes things better for everybody! — cFreed
– cFreed, Commented Jan 23, 2016 at 8:22

Community · Accepted Answer · 2020-06-10 13:24:26Z

This is very good code.

Re-usability

BASE_URL and $_SERVER['REQUEST_URI'] should be passed into the constructor as parameters.

I would suggest that this class should focus on building the <ul> and <li> part of the navigation and leave any container wrapping to the caller. HTML5 provides the nav element. This may be appropriate for the caller to use. The method createNav is misleading it should either create a <nav> or it should be renamed to createContainer.

Sometimes just the top level or two of a menu is desired. Having the depth to traverse the menu and build as a parameter could be good.

Style

You have the current depth, but you don't add it to the output. The CSS for styling might be easier if you add the current depth to the <li> items?

Variables and Properties

One variable name was a little confusing. $depth has a few different meanings. It could mean the current depth or be a limitation on how deep to traverse down the menu.

$this->rootNode can probably be removed?

The following could be made protected in case you want to extend this class?

private $doc;
private $xpath;

I greatly appreciate your kind words. And you're so right about leaving the container wrapping out. It cuts down on a lot things. Thanks! — Mikey
– Mikey, Commented Jan 23, 2016 at 2:19

Stack Exchange Network

Rendering HTML for a navigation menu using a class

2 Answers 2

Re-usability

Style

Variables and Properties

You must log in to answer this question.

Hot Network Questions

Rendering HTML for a navigation menu using a class

2 Answers 2

Re-usability

Style

Variables and Properties

You must log in to answer this question.

Related

Hot Network Questions