Tuesday, July 6, 2010

Dynamic Menu Highlighting


if you use the Pages sidebar widget (that comes with wordpress) to display your menu, it already has a CSS class current_page_item, which you can use to achieve the same effect. You can access it like this in your CSS:
.widget_pages li.current_page_item a{
background-image:url(images/activelink.gif);
}

<ul id="menu"> 
<!-- To show "current" on the home page -->
<li<?php if (is_home())
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>">Home</a>
</li>
<!-- To show "current" on the Archive Page (a listing of all months and categories),
individual posts, but NOT individual posts in category 10 -->
<li<?php if (is_page('Archive') || is_single() && !in_category('10'))
{
echo " id=\"current\""; }?>>
<a href="<?php bloginfo('url') ?>/archive">Archive</a> </li>
<!-- To show "current" on any posts in category 10, called Design -->
<li<?php if (is_category('Design') || in_category('10') && !is_single())
{ echo " id=\"current\""; }?>>
<a href="<?php bloginfo('url') ?>/category/design">Design</a> </li>
<!-- To show "current" on the About Page -->
<li<?php if (is_page('About'))
{
echo " id=\"current\""; }?>>
<a href="<?php bloginfo('url') ?>/about">About</a>
</li> </ul>
#current
{
background-color: #336699;
}

No comments:

Post a Comment