CSS Sprites 和 PHP 使用动态菜单突出显示不使用循环功能答案

【问题标题】：CSS Sprites and PHP using dynamic menu highlighting not working with loop functionCSS Sprites 和 PHP 使用动态菜单突出显示不使用循环功能
【发布时间】：2011-06-11 21:39:10
【问题描述】：

在这个网站上： http://jumpthru.net/newsite/vision/

我正在使用 CSS sprites 进行导航，并使用 PHP else 语句来显示当前页面的活动状态。除了包含循环/博客帖子（http://jumpthru.net/newsite/commentary/）的页面外，所有页面都正常工作

我需要为此页面调用不同的 php 吗？

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'; }
?>

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;

}

任何帮助将不胜感激！

【问题讨论】：

标签： php html css wordpress

【解决方案1】：

我有一个与您正在寻找的解决方案有点不同，但对您正在做的事情来说是一个更好的解决方案。

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; ?>">
...

关于上述 PHP 的注意事项：如果你有一个 get_page_id() 函数，你可以进一步简化它。只需拥有<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 {
   ...
}

关于上述 CSS 的注意事项：上面列出了两行您可以一起设置样式的行 - 当前状态和悬停状态。这将在您将鼠标悬停在导航上时显示当前状态，无论哪个导航是“当前”导航。

看到您对使用 CSS Sprites 感兴趣，我绝对建议您阅读 this article。

【讨论】：

我同意。 I tried 自己建议一个更好的方法，但我似乎没有做得很好。
是的，你的方式绝对是我的方法的替代方案，尽管如果你可以轻松地定义哪个页面，我认为不需要向你的 <li> 元素添加“当前”类你正在使用body标签。我的意思不是“更好的解决方案”，意思是比你建议的更好，而是比她正在寻找的答案更好。希望这很清楚。
我可以看出我最后的评论是多么令人困惑 - 我的意思是“更好”，纯粹是“比她最初拥有的更好”。你的解决方案比我建议的要干净得多。
谢谢三十点和 Wex，我将在今天晚些时候实施您的解决方案。非常感谢您的所有帮助