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

Recommended Answers

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?

Jump to Post

Okay, and what have you tried?

Jump to Post

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?

Jump to Post

All 10 Replies

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?

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 '';
    }
    ?>

Okay, and what have you tried?

i have no idea on what i have to try

Member Avatar

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?

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

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));
}
Member Avatar

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.

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

Member Avatar

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.