I am implementing a site with CodeIgniter 3 and I am using the HTML helper which works fine for what I need. I have the following arrays for my UL
$links = array(
anchor(index_page(),"Home",(uri_string() == "" ? array('class' => 'active') : '')),
anchor("about-us","About Us",(uri_string() == "about-us" ? array('class' => 'active') : '')),
anchor("customers","Customers",(uri_string() == "customers" ? array('class' => 'active') : '')),
anchor("policy","Policy",(uri_string() == "policy" ? array('class' => 'active') : '')),
anchor("contact","Contact",(uri_string() == "contact" ? array('class' => 'active') : ''))
);
$attributes_normal = array(
'id' => 'main_menu'
);
So, after having those arrays I initialize my ul like this:
<?php echo ul($links, $attributes_normal); ?>
The result is as follows (about us section open for the example):
<ul id="main_menu">
<li><a href="http://mysitesurl/">Home</a></li>
<li><a href="http://mysitesurl/about-us" class="active">About Us</a></li>
<li><a href="http://mysitesurl/customers">Customers</a></li>
<li><a href="http://mysitesurl/policy">Policy</a></li>
<li><a href="http://mysitesurl/contact">Contact</a></li>
</ul>
The only question I have here, is there any way to pass the active link condition to the <li>
element. I am using Zurb Foundation 5 and by default it adds the class="active"
to the <li>
element, so I want to use the default CSS.
Not without overriding the default _list
helper function. On line 145 in the source code for HTML Helper you can see that '<li>' is hardcoded and does not accept additional arguments:
$out .= str_repeat(' ', $depth + 2).'<li>';
I would probably just set the active class using jQuery or JavaScript, but you could also opt to override the default helper functions for generating lists (see Extending Helpers).
You must create MY_html_helper.php into the application/helpers path
if ( ! function_exists('_list'))
{
/**
* Generates the list
*
* Generates an HTML ordered list from an single or multi-dimensional array.
*
* @param string
* @param mixed
* @param mixed
* @param int
* @param string
* @param string
* @return string
*/
function _list($type = 'ul', $list = array(), $attributes = '', $depth = 0, $outer = '__outer', $inner = '__inner' )
{
// If an array wasn't submitted there's nothing to do...
if ( ! is_array($list))
{
return $list;
}
// Set the indentation based on the depth
$out = str_repeat(' ', $depth)
// Write the opening list tag
.'<'.$type._stringify_attributes($attributes).">
";
// Cycle through the list elements. If an array is
// encountered we will recursively call _list()
static $_last_list_item = '';
foreach ($list as $key => $val)
{
$_last_list_item = $key;
if ( $key !== $outer && $key !== $inner) {
$out .= str_repeat(' ', $depth + 2) . '<li ' . (is_array($val) && array_key_exists($outer, $val) ? _stringify_attributes($val[$outer]) : '') . '>';
if (!is_array($val)) {
$out .= $val;
} else {
$out .= $_last_list_item . "
" . _list($type, $val, (array_key_exists($inner, $val) ? $val[$inner] : ''), $depth + 4) . str_repeat(' ', $depth + 2);
}
$out .= "</li>
";
}
}
// Set the indentation for the closing tag and apply it
return $out.str_repeat(' ', $depth).'</'.$type.">
";
}
}
Now you can use the netx configuration for ul() function
$links = array(
'Access Control' => array(
'Users' => array(
'__outer' => array(
//Here you have the config for 'User' option 'li'
'class' => 'active some-class',
'id' => 'my-unique-id'
)
),
'Roles',
'Permissions',
'__inner' => array(
//Here you have the config for inner ul (sub-menu)
'class' => 'sub-menu'
),
'__outer' => array(
//Here you have the config for 'Access Control' option 'li'
'class' => 'active'
),
),
);
__inner and __outer options don't appear into the list