[eluser]NateL[/eluser]
In creating a navigation menu, we usually have a class called "selected", which sets that navigation menu appart from other items, letting users know they're on that page.
What's a good way of setting a class to a list item, dynamically?
My current method is all done in the view - but I feel like I should be doing this a bit more efficiently. Any suggestions?
Code: <?php $page = $this->uri->segment(2); ?> //First segment is /admin/
<ul id="menu">
<li <?php if ($page == ''){ echo 'class="selected"'; } ?>><a href="/admin">Dashboard</a></li>
<li <?php if ($page == 'users'){ echo 'class="selected"'; } ?>><a href="/admin/users">Users</a></li>
......
</ul><!--end menu-->
[eluser]Myles Wakeham[/eluser]
Since its really a user interface issue, and not something that the back-end server will have that much to deal with, have you tried using jQuery or some front-end code facilities to do this? I've been using a Tab menu style that uses CSS and list items with a simple "selected" property to show the last one selected, and it works well. But I know there are better ways in the jQuery UI library, or plug-ins for this sort of thing...
Myles
[eluser]NateL[/eluser]
Hadn't considered that - but I will now.
Thanks 
[eluser]Eric Barnes[/eluser]
I created a build_link helper for this:
Code: /**
* Build Link Helper
*
* Usuage
* <?php build_link(site_url('categories'), lang('lang_cats'), 'categories'); ?>
*
* @param string - Link Url
* @param string - Title
* @param string - Name must back uri segment
* @param string - Class
*
* @return string
*/
function build_link($link = '', $title = '', $name = '', $class = '', $echo = TRUE)
{
$CI =& get_instance();
$page = $this->CI->uri->segment(2);
if ($page == strtolower($name))
{
$att['class'] = 'active';
}
$link = '<a href="'.$link.'" title="'.$title.'" class="'.$class.'">'.$title.'</a>';
if ($echo)
{
echo $link;
}
else
{
return $link;
}
}
[eluser]Unknown[/eluser]
Hi there,
I was recently faced with a similar problem, and ended up using something similar to what Chris Coyier taught here.
In my view:
Code: <body id="<?php echo $this->uri->segment(2); ?>">
<nav id="mainNav">
<ul>
<li id="nav-myShelf"><?php echo anchor('shelf/mine', 'My Shelf'); ?></li>
<li id="nav-collection"><?php echo anchor('shelf/collection', 'Library Collection'); ?></li>
<li id="nav-addBook"><?php echo anchor('shelf/addBook', 'Add book'); ?></li>
</ul>
</nav>
//...
In the CSS:
Code: #mine #nav-myShelf a,
#collection #nav-collection a,
#addBook #nav-addBook a{
background: #e3e3e3;
}
So what happens is: The body gets a dynamically generated id, and each menu item gets a unique id, too. With CSS, you then target the body id and the menu item id.
Hope this helps!
- Erik
[eluser]maxo[/eluser]
Sneaky way I did it:
Code: <div id="nav">
<?php
$seg = $this->uri->segment(1) . "/";
$stuff['/'] = ""; $stuff['link1/'] = ""; $stuff['link2/'] = "";
$stuff[$seg] = array('class' => 'selected');
?>
<ul>
<li><?php echo anchor('/', "Home page", $stuff['/']); ?></li>
<li><?php echo anchor('link1', "Link 1", $stuff['link1/']); ?></li>
<li><?php echo anchor('link2', "Link 2", $stuff['link2/']); ?></li>
</ul>
But I believe Ruby-on-rails can do this automagically. It would be awesome if there was an easier way with CodeIgniter (I especially hate having to define the array indexes as = "", just avoiding that above would be nice if anyone can think of a way...)
[eluser]Exeneva[/eluser]
[quote author="Eric Barnes" date="1276746962"]I created a build_link helper for this:
Code: /**
* Build Link Helper
*
* Usuage
* <?php build_link(site_url('categories'), lang('lang_cats'), 'categories'); ?>
*
* @param string - Link Url
* @param string - Title
* @param string - Name must back uri segment
* @param string - Class
*
* @return string
*/
function build_link($link = '', $title = '', $name = '', $class = '', $echo = TRUE)
{
$CI =& get_instance();
$page = $this->CI->uri->segment(2);
if ($page == strtolower($name))
{
$att['class'] = 'active';
}
$link = '<a href="'.$link.'" title="'.$title.'" class="'.$class.'">'.$title.'</a>';
if ($echo)
{
echo $link;
}
else
{
return $link;
}
}
[/quote]
I hate to revive an old thread, but I'm quite intrigued by this solution.
Since it's a helper, would it have to be added to the CI core as an extension? I'm a little confused as to where this is implemented.
[eluser]Samus[/eluser]
[quote author="Exeneva" date="1334442350"][quote author="Eric Barnes" date="1276746962"]I created a build_link helper for this:
Code: /**
* Build Link Helper
*
* Usuage
* <?php build_link(site_url('categories'), lang('lang_cats'), 'categories'); ?>
*
* @param string - Link Url
* @param string - Title
* @param string - Name must back uri segment
* @param string - Class
*
* @return string
*/
function build_link($link = '', $title = '', $name = '', $class = '', $echo = TRUE)
{
$CI =& get_instance();
$page = $this->CI->uri->segment(2);
if ($page == strtolower($name))
{
$att['class'] = 'active';
}
$link = '<a href="'.$link.'" title="'.$title.'" class="'.$class.'">'.$title.'</a>';
if ($echo)
{
echo $link;
}
else
{
return $link;
}
}
[/quote]
I hate to revive an old thread, but I'm quite intrigued by this solution.
Since it's a helper, would it have to be added to the CI core as an extension? I'm a little confused as to where this is implemented.[/quote]
Just drop it in your application/helper folder, give it a file name of buildlink_helper and simply load it as you would any other helper.
[eluser]Exeneva[/eluser]
Ah, that seems really easy then.
|
