如何为导航链接添加活动状态?

时间:2015-01-13 作者:Steven Donea

我试图为我的自定义菜单导航添加活动状态,但到目前为止,我尝试的一切都不起作用。我在单独的文件nav中设置了导航菜单。php,然后我加入了nav。php到我的标题中。php文件如下:

<?php include(\'nav.php\'); ?>
我在子文件夹中创建了自定义Wordpress页面,并包含了标题。模板名称后的php:

<?php /* Template Name: Website Design Page*/
 ?>

<?php get_header(); ?>
这是我当前导航中的html和php代码。php和我添加了一个唯一的id属性“currentpage”,以指示哪个菜单项反映了用户的当前页面:

<ul id="menu" class="clearfix">                
                <li<?php if ($thisPage=="About") 
echo " id=\\"currentpage\\""; ?> class="parent-item"><a href="/about" title="Welcome page" class="parent-link menu-item-2" id="main-menu-item-4">About</a></li>                               

                <li<?php if ($thisPage=="Portfolio") 
echo " id=\\"currentpage\\""; ?> class="parent-item"><a href="/portfolio" class="parent-link menu-item-3">Portfolio</a></li>               

                <li<?php if ($thisPage=="Services") 
echo " id=\\"currentpage\\""; ?> class="parent-item"><a href="/services" class="parent-link menu-item-4">Services</a></li> 

                <li<?php if ($thisPage=="Prices") 
echo " id=\\"currentpage\\""; ?> class="parent-item"><a href="/prices" class="parent-link menu-item-5">Prices</a></li>                

</ul>                                                        
这是我的悬停和活动状态Css:

ul#menu li a:hover {
background-color: #999999;
color: #fff; 
}

ul#menu li #currentpage a {
background: #fff;
color: #333;
}
对于我在模板名称后指定的每个页面,以下是我的主页:

<?php /* Template Name: Website Design Page
*/
 ?>
<?php $thisPage="Home"; ?>

<?php get_header(); ?>
我希望有人能提供帮助,我真的不明白为什么这段代码或任何其他php代码不能让这些自定义菜单工作。

4 个回复
最合适的回答,由SO网友:Tejas 整理而成

在PHP文件中,设置$thisPage 在你之前include(\'nav.php\');. 然后,变量$thisPage 将传递给nav.php 并在其if 陈述

但这确实是一种糟糕的做法,更好的方法是在WordPress中创建菜单并将其挂接到模板中。WordPress文档how to do this

SO网友:Dan

如果您的主题使用wp\\u nav\\u menu(),您将拥有该类current-menu-item 添加到相关<li> 元素。这有帮助吗?

SO网友:giolliano sulit

我要做的是删除nav中的所有代码。php显示菜单,在Wordpress后端创建菜单,然后您就可以使用.current-menu-item 在css中。

那么你只需要调用菜单wp_nav_menu();

以下是该功能的文档:

http://codex.wordpress.org/Function_Reference/wp_nav_menu

SO网友:Steven Donea

我已删除导航。我的标题中的php文件。php,并添加了Wordpress附带的旧菜单代码。我做了一些符合我风格的勾当。css文件来调整所需设计的样式,我只使用我在WordPress中创建的#menu navmenu右浮动菜单栏。

ul#menu-navmenu{float: right;}
所以在我有这个ul#菜单{float:right;margin:15px;}之前

现在,我以wordpress风格为这段代码添加了15px的边距。css模板:

#access .menu-header ul,
div.menu ul {
    list-style: none;
    /*margin: 0;*/margin: 15px;
}
一切正常,感谢你在这件事上的帮助,这是一个很棒的WordPress社区。

结束

相关推荐

Hard coded main navigation

Theme twentyeleven版本1.5请帮助我,我收到了@Mayeneul Islam的回复,但这并没有解决我的问题,如果我不能激活导航节目,那不是世界末日,但我真的想解决title 和name 使用我的代码发布以下问题我已经尽了最大的努力自己去寻找答案。PHP新手;o/由于我找不到与客户主站点相匹配的博客主导航样式,我删除了以下内容: <nav id=\"access\" role=\"navigation\"> <h3 class