dougan1205 2011-06-11 21:39
浏览 27
已采纳

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

On this site: http://jumpthru.net/newsite/vision/

I am using CSS sprites for my navigation with PHP else 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!

  • 写回答

1条回答 默认 最新

  • duanjia2772 2011-06-11 22:04
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 请教：如何用postman调用本地虚拟机区块链接上的合约？
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？
  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn，请教个问题 flink启动yarn-session.sh连不上hadoop，这个整了好几天一直不行，求帮忙看一下怎么解决
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛