CSS Sprites and PHP using dynamic menu highlighting not working with loop function
On this site: http://jumpthru.net/newsite/vision/
I am using CSS sprites for my navigation with PHP el开发者_C百科se statements to show the active state for the current page. All of the pages are working properly except for the page that contains the loop / blog postings ( http://jumpthru.net/newsite/commentary/)
Do I need to call the php differently for this page?
The PHP :
<?php
if ( is_page('vision') ) { $current1 = 'visionside a'; }
elseif ( is_page('team') ) { $current2 = 'teamside a'; }
elseif ( is_page('commentary') ) { $current3 = 'blogside a'; }
elseif ( is_page('organizations') ) { $current4 = 'orgside a'; }
?>
The CSS:
#sidebarnav ul#sidenav li.<?php echo $current1; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png) 0px -106px !important;
}
#sidebarnav ul#sidenav li.<?php echo $current2; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png) 0px -106px !important;
}
#sidebarnav ul#sidenav li.<?php echo $current3; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png) 0px -106px !important;
}
#sidebarnav ul#sidenav li.<?php echo $current4; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png) 0px -106px !important;
}
Any help would be greatly appreciated!
I have a solution that is a bit different than what you are looking for, but is a much better solution to what you are doing.
PHP:
<?php
if ( is_page('vision') )
$page = 'vision';
elseif ( is_page('team') )
$page = 'team';
elseif ( is_page('commentary') )
$page = 'blog';
elseif ( is_page('organizations') )
$page = 'org';
?>
<body id="page-<?php echo $page; ?>">
...
Note about above PHP: If you had a get_page_id() function, you could simplify this a lot more. by simply having <body id="page-<?php get_page_id(); ?>">
HTML:
<ul id="sidenav">
<li class="visionside"><a href="#">...</a></li>
<li class="teamside"><a href="#">...</a></li>
<li class="blogside"><a href="#">...</a></li>
<li class="orgside"><a href="#">...</a></li>
</ul>
CSS:
body#page-vision #sidenav li.visionside a,
#sidenav li.visionside a:hover {
...
}
Note about above CSS: There are two lines listed above that you can style together - the current state, and the hover state. This will make the current state display when you hover over the nav, regardless of which nav is the "current" nav.
Seeing that you're interested in using CSS Sprites, I would definitely recommend that you read up on this article.
加载中,请稍侯......
精彩评论