The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 5 of 5

Thread: Flexible contextual navigation

  1. #1

    Flexible contextual navigation

    Hello all,

    I've been struggling with this for a week and cannot seem to figure out how to do it (or find the answer I've been looking for).

    So I'm trying to build a flexible contextual navigation menu that can accept at least 2 tiers (nav and subnav).

    Essentially, I want to build a semantic html navigation list:

    HTML Code:
    <ul id="nav">
        <li>Item One</li>
        <li>Item Two</li>
        <li>
            Item Three
            <ul>
                <li>Item Three Sub 1</li>
                <li>Item Three Sub 2</li>
            </ul>
        </li>
        <li>Item Four</li>
       </li>
            Item Five
            <ul>
                <li>Item Five Sub 1</li>
                <li>Item Five Sub 2</li>
            </ul>
        </li>
    </ul>
    Note: I've got this menu setup so that if you are not in a directory, when you rollover an item, if it has a submenu, it will display. But I also want to be able to display the submenu if you're on a page that's a child of that particular directory.

    Here's how I'm building it in PHP:

    PHP Code:
    $tierOne['Item One'] = "/itemone.php";
    $tierOne['Item Two'] = "/itemtwo.php";
    $tierOne['Item Three'] = "/itemthree/index.php";
    $tierOne['Item Four'] = "/itemfour.php";
    $tierOne['Item Five'] = "/itemfive/index.php";

    $tierTwo['Item Three']['Item Three Sub 1'] = "/itemthree/sub1.php";
    $tierTwo['Item Three']['Item Three Sub 2'] = "/itemthree/sub2.php";

    $tierTwo['Item Five']['Item Three Sub 1'] = "/itemfive/sub1.php";
    $tierTwo['Item Five']['Item Three Sub 2'] = "/itemfive/sub2.php";

    $htmlMenu '<ul>'// start the tier one nav

    foreach($tierOne as $key => $value) {
        if(
    $_SERVER['PHP_SELF'] == $value) { //if the current page url is equal to the url of the array index value, then give the list item a class of 'activePage' (for styling, etc)
            
    $activeClass ' class="activePage"';
        }
        else {
            
    $activeClass "";
        }
        
    $htmlMenu .= "<li><a href=\"$value\">$key2</a>"
        
    if(isset($key[$tierTwo])) { // if a tier one item has sub array
            
    $htmlMenu .= "<ul>"// start the tier two nav (here's where my problem is. how can i figure out which active directory i'm in so i can give the subnav ul a class of 'active' so i can make that subnav display whenever i'm in a directory that has pages??
            
    foreach($tierTwo as $key2 => $value2) {
                
    $htmlMenu .= "<li><a href=\"$value2\">$key2</a></li>"
            
    }
            
    $htmlMenu .= "</ul></li>" // end the tier two nav and close off the tier one item
        
    }
        else {
            
    $htmlMenu .= "</li>"// otherwise close the tier one item
        
    }
    }

    $htmlMenu .= "</ul>"// end the tier one nav 
    Might not be the most elegant solution. But I'm getting closer. So the bottom line is. I want the navigation to be contextual -- that is to know which page and directory its in so it can give ONLY second tier <ul> a class (so that i can keep it displayed).

    Any ideas? Thanks!

  2. #2
    *gentle bump*

    Anyone?

  3. #3
    try:
    PHP Code:
    <?php
        $nav 
    = array();
        
        
    // Tier 1
        
    $nav['Item One'][0] = '/itemone.php';
        
    $nav['Item Two'][0] = '/itemtwo.php';
        
    $nav['Item Three'][0] = '/itemthree/index.php';
        
    $nav['Item Four'][0] = '/itemfour.php';
        
    $nav['Item Five'][0] = '/itemfive/index.php';
        
        
    // Tier 2
        
    $nav['Item Three'][1] = array('Item Three Sub 1' => '/itemthree/sub1.php''Item Three Sub 2' => '/itemthree/sub2.php');
        
    $nav['Item Five'][1] = array('Item Three Sub 1' => '/itemfive/sub1.php''Item Three Sub 2' =>  '/itemfive/sub2.php');
    ?>
    then your formatting might look something like:
    PHP Code:
    <ul>
    <?php while (list($key$value) = each($nav)) : ?>
        <li>
            <a href="<?php echo $value[0]; ?>"><?php echo $key ?></a>
            <?php if ( is_array($value[1]) ) : // check for Tier 2 ?>
            <ul>
                <?php while (list($skey$svalue) = each($value[1])) : // loop through Tier 2 ?>
                <li><a href="<?php echo $svalue?>"><?php echo $skey?></a></li>
                <?php endwhile; ?>
            </ul>
            <?php endif; ?>
        </li>
    <?php endwhile; ?>
    </ul>
    Let us live so that when we come to die even the undertaker will be sorry. - Mark Twain
    Don't PM me your CSS, xHTML, JS or PHP questions. I will not reply to ANY IE6 questions.

  4. #4
    Here is my go at it. I use recursive functions so I could nest sub sections down as deep as I need.
    PHP Code:
    <h1>Uber nestable menu!</h1>
    <?php
    $tierOne 
    = array(
        
    'Item One' => '/itemone.php',
        
    'Item Two' => '/itemtwo.php',
        
    'Item Three' => '/itemfour.php',
        
    'Item Four' => '/itemfour.php',
        
    'Item Five' => '/itemfive/index.php'
    );

    $tierTwo = array(
        
    'Item Three' => array(
            
    'Item Three Sub 1' => '/itemthree/sub1.php',
            
    'Item Three Sub 2' => '/itemthree/sub2.php'
        
    ),
        
    'Item Five' => array(
            
    'Item Three Sub 1' => '/itemfive/sub1.php',
            
    'Item Three Sub 2' => '/itemfive/sub2.php',
            
    'ubernest' => array(
                
    'crazy?' => array(
                    
    'i know' => '/someUrl'
                
    )
            )
        )
    );

    function 
    item($url$name) {
        if(
    $_SERVER['PHP_SELF'] == $url) { //if the current page url is equal to the url of the array index value, then give the list item a class of 'activePage' (for styling, etc)
            
    $class ' class="activePage"';
        }
        
    $return '<li' . @$class '>';
        if(
    is_string($url)) {
            
    $return .= '<a href="' $url '">' $name '</a>';
        } elseif(
    is_array($url)) {
            if(
    is_string($name)) {
                
    $return .= $name;
            }
            
    $return .= makeMenu($url);
        }
        return 
    $return '</li>';
    }

    function 
    makeMenu($menu) {
        
    $return '<ul>';
        foreach(
    $menu as $item => $url) {
            
    $return .= item($url$item);
        }
        return 
    $return '</ul>';
    }

    echo 
    makeMenu(array('tierOne' => $tierOne'tierTwo' => $tierTwo));
    show_source(__FILE__);
    ?>
    Also I uploaded an example. http://ninjawebspace.com/ajcates/dump/flexableMenu.php
    Last edited by ajcates; September 29th, 2009 at 12:31 AM.

  5. #5
    This is awesome guys. These are definitely more elegant solutions to generating the nav. But the issue I'm really having is figuring out if I'm in a second tier nav's subdirectory (ie. /secondtier/index.php or /secondtier/page1.php, etc). And if I am, then DISPLAY the second tier menu instead of making it pop out on rollover.

    Does that make sense?

    Quote Originally Posted by ajcates View Post
    Here is my go at it. I use recursive functions so I could nest sub sections down as deep as I need.
    PHP Code:
    <h1>Uber nestable menu!</h1>
    <?php
    $tierOne 
    = array(
        
    'Item One' => '/itemone.php',
        
    'Item Two' => '/itemtwo.php',
        
    'Item Three' => '/itemfour.php',
        
    'Item Four' => '/itemfour.php',
        
    'Item Five' => '/itemfive/index.php'
    );

    $tierTwo = array(
        
    'Item Three' => array(
            
    'Item Three Sub 1' => '/itemthree/sub1.php',
            
    'Item Three Sub 2' => '/itemthree/sub2.php'
        
    ),
        
    'Item Five' => array(
            
    'Item Three Sub 1' => '/itemfive/sub1.php',
            
    'Item Three Sub 2' => '/itemfive/sub2.php',
            
    'ubernest' => array(
                
    'crazy?' => array(
                    
    'i know' => '/someUrl'
                
    )
            )
        )
    );

    function 
    item($url$name) {
        if(
    $_SERVER['PHP_SELF'] == $url) { //if the current page url is equal to the url of the array index value, then give the list item a class of 'activePage' (for styling, etc)
            
    $class ' class="activePage"';
        }
        
    $return '<li' . @$class '>';
        if(
    is_string($url)) {
            
    $return .= '<a href="' $url '">' $name '</a>';
        } elseif(
    is_array($url)) {
            if(
    is_string($name)) {
                
    $return .= $name;
            }
            
    $return .= makeMenu($url);
        }
        return 
    $return '</li>';
    }

    function 
    makeMenu($menu) {
        
    $return '<ul>';
        foreach(
    $menu as $item => $url) {
            
    $return .= item($url$item);
        }
        return 
    $return '</ul>';
    }

    echo 
    makeMenu(array('tierOne' => $tierOne'tierTwo' => $tierTwo));
    show_source(__FILE__);
    ?>
    Also I uploaded an example. http://ninjawebspace.com/ajcates/dump/flexableMenu.php

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012