jquery-ui vertical navigation menu using with themeswitcher.

Question

Hello, I would like to have a vertical navigation menu compatibbel with jQuery UI ThemeRoller. How can I define the styles for my menu? I just build menus dynamically and php code is following:

$menu = '<ul>';
foreach ($items as $val) {
    if ( 'sep' == $val['link'] )
        $menu.=$val['label'].'<br>';
    else {
      //  echo $_SERVER['SCRIPT_FILENAME']."<br>".DEF_PATH.$val['link'];

        if ($_SERVER['SCRIPT_FILENAME'] == DEF_PATH.$val['link']) {
            $menu .= '<li class="current"><a href="'.$val['link'].'"';
            $menu .= ' class="current"';
        }else
            $menu .= '<li><a href="'.$val['link'].'"';
        $menu .= ' target="'.$val['target'].'" '.'>'.$val['label']."</a></li>\n";
    }
}
$menu.="</ul>\n";
$main_menu.=$menu;

thanks Arman.

Answer 1

Try adding display:block to them (UI might have made them inline):

$menu .= '<li style="display:block;"><a href="'.$val['link'].'"';

Answer 2

jQuery UI Uses "CSS Framework", you can read about it here. Basically it uses a well defined set of classes for specific things, just use the appropriate classes include the theme/CSS you want to use and you're done :)

For a menu you probably want to start with the Interaction States classes section. For example instead of this:

<li class="current">

You would probably want ui-state-active or ui-state-highlight either replacing or in addition to current (in addition if .current has additional style rules you want), like this:

<li class="current ui-state-active">