How to change a class in an array?

[dante123]

Hi
i have a menu in an include php file:

      <div id="menu" > 
        <?php
    // include functions
    include_once('includes/functions.php');
    // array to hold top menu
    $top_menu_items = array(
    'index.php' => array('text' => 'Home'),
    'about.php' => array('text' => 'About'),
    'contact.php' => array('text' => 'Contact')
    );
    // call the function that draws the menu
    echo draw_menu($script_name, $top_menu_items);
    ?>
    </div>

THe problem is that i need to give to the last item in the menu a different class in this case to "Contact", how can i change his style?
Any ideas?
Thanks

[blocblue]

You could start by adding the class to the appropriate menu item array:
last-item.php => array('text' => 'Last Item', 'class' => 'last-item'),

The draw_menu function will then probably need to be modified. Can you post the code for that function and show what you've tried?

[dante123]

Thanks

    <?php
       // function to draw menu (top and left)
    function draw_menu($script, $items, $div_id) {
    // start the list for the menu
    $menu = ' <ul id="list-nav">';
    // loop through the array with menus and submenus
    foreach($items as $url => $val) {
    $text = $val['text'];
    if($script == $url) {
    // if the item in the array is the current page, highlight it
    $menu .= '<li><a style="color:#eb0089" href="#nogo"> '. $text . ' </a></li>';
    } else {
    // else display it as usual link
    $menu .= '<li><a href="' . $url . '">' . $text . '</a></li>';
    }
    }
    // end the list
    $menu .= '</ul>';
    return $menu;
    }
    // function to draw submenu below the main menu on left side
    function draw_sub_menu($script, $items) {
    // find the correct submenu items to draw
    foreach($items as $url => $val) {
    // if the current page is on the top level (index.php, book.php...)
    if($script == $url) {
    if(isset($val['submenu']) && !empty($val['submenu'])) {
    $submenu = draw_menu($script, $val['submenu']);
    return $submenu;
    } else {
    return '';
    }
    }
    // if the current page is not on the top level, examine each submenu entry
    if(isset($val['submenu']) && !empty($val['submenu'])) {
    if($script == $val['submenu']['url']) {
    $submenu = draw_menu($script, $val['submenu']);
    return $submenu;
    }
    }
    }
    // if no submenus were drawn return empty string
    return '';
    }
    ?>

[blocblue]

Okay, and what have you tried?

[dante123]

i have no idea on what i have to try

You could use CSS (last-child)?

ul#nav li:last-child {color: red; background-color: yellow;} /*this sounds horrible!!*/

I'm assuming that this is for including a background image or similar at the right side of the item in order to denote the end of the nav bar?

[dante123]

I DIDN'T KNOW THAT LI:LAST-CHILD can do it, but it works!!!
Thanks

[blocblue]

FYI - :last-child will only work in browsers that support pseudo selectors. So, the older IEs will not work.

If you wanted the updated draw_menu function, see below:

echo draw_menu('example.php', array(
    'first.php' => array('text' => 'First', 'class' => 'first'),
    'example.php' => array('text' => 'Example'),
    'last.php' => array('text' => 'Last', 'class' => 'last'),
));



function draw_menu($script, $items, $div_id = '') {
    $list_html = '<ul id="list-nav">%s</ul>';
    $list_item_html = '<li class="%s"><a %s href="%s" title="%s">%s</a></li>';
    $list_items = array();

    foreach($items as $url => $attributes) {
        $is_current = ($script == $url);
        $list_items[] = sprintf($list_item_html, 
            isset($attributes['class']) ? $attributes['class'] : '',
            $is_current ? 'style="color:#eb0089"' : '',
            $is_current ? '#nogo' : $url,
            isset($attributes['text']) ? $attributes['text'] : ' ',
            isset($attributes['text']) ? $attributes['text'] : ' '
        );
    }

    return sprintf($list_html, implode('', $list_items));
}

FYI - :last-child will only work in browsers that support pseudo selectors. So, the older IEs will not work.

This is a valid point. IE9 supports it, but not it seems IE8 and prev.

http://kimblim.dk/css-tests/selectors/

As much as most of us would like to see all IE versions before version 20(!) die overnight, it ain't gonna happen. You can use shims, but that's like using a sledgehammer to crack a nut, unless you're going to be using a lot of CSS3 stuff (it's lovely).

Script bunnying for solutions poses its own problem such as code maintenance, but that's not to denegrate blocblue's tidy solution.

[dante123]

thanks for that, i tried to change the code in order to make it work in explorer but it remains exactly as before and explorer doesn't support it

Yeah well, as I said, you can use a shim or a polyfill. A decent one here, selectivizr:

http://selectivizr.com/

As I tend to use jQuery in most projects these days, an additional bit like this doesn't make a massive difference to me. BUT, using something like jQuery and this just to do a last-item would be a bit extreme IMO.