CSS当前菜单项 - ul li类

-2

非常基本的CSS问题，因为我无法使当前页面在菜单中看起来不同。任何建议不胜感激！CSS当前菜单项 - ul li类

这里是起源功能

//* Add My New Menu 
function my_new_menu() { 

echo '<ul class="menu gn responsive-menu"> 
<li class="menu-item"><a href="/kids-joke-book/"> New Joke Book!</a></li> 
<li class="menu-item"><a href="/kids/"> Kids Jokes </a></li> 
<li class="menu-item"><a href="/animal-jokes/"> Animal Jokes /a></li> 
<li class="menu-item"><a href="/zoo-jokes/"> Zoo Jokes </a></li> 
<li class="menu-item"><a href="/joke-contest/"> Contest </a></li> 
</ul>'; 

} 
add_action('genesis_header_right', 'my_new_menu');

这里是CSS

.gn a { 
border: 1px solid transparent; 
border-radius: 3px; 
color: #438ed9; 
display: block; 
font-weight: 400; 
height: auto; 
line-height: 1; 
margin-top: 0.2rem; 
padding: 0.8rem 1rem; 
position: relative; 
text-decoration: none; 
} 

.gn a:hover, 
.gn .current-menu-item > a, 
.gn .sub-menu .current-menu-item > a:hover { 
color: #fff; 
background-color: #009900; 
}

来源

2016-02-29 Jeffrey Michael

将'current-menu-item'添加到当前页的列表项类。 – Quantastical

我试过这个三重检查它，它不工作。我剥离了wordpress genesis菜单，以减轻代码，并将其从函数文件中提取出来。基本上，页面不理解它是当前页面。你可以在这里看到它：http://www.kidzjokes.com/ –

显示你正在使用的代码确定当前页面是什么。 – Quantastical

最简单的解决方案是你的“.current”类添加到相应的‘礼’项目。因此，举例来说，如果你是“孩子，笑话书”页的“UL”上应该是这样的：

<ul class="menu gn responsive-menu"> 
<li class="menu-item current"><a href="/kids-joke-book/"> New Joke Book! </a></li> 
...... 
</ul>

你应该做这个方法在您的网站的每一个子页面您使用此菜单，并将“当前”类添加到正确的菜单项。（“当前”类是一个示例名称，它具有您想要添加到右侧菜单项的样式。）

来源

2016-02-29 21:45:07 NeuDav

“活跃”也是一个很好的类，因为它的上下文可以用于多种场合，例如按钮，选择，表单域和菜单。 – teefars

如果我将一个id添加到菜单项，该怎么办？我没有页面上的功能，就像剥离wordpress genesis菜单一样，以减轻代码，并从功能文件中提取它。基本上，页面不理解它是当前页面。你可以在这里看到它：kidzjokes.com –

在这种情况下添加一个id是真正的解决方案。正如我认为当你点击一个链接时，一个新的页面打开。然后在所有页面的HTML代码中，您应该将id/class添加到相应的“li”项目中。因此，在page1.html： New Joke Book! 但在page2.html： New Joke Book! Kids Jokes - >第二页是当前这里。我希望这是可以理解的。 – NeuDav

CSS当前菜单项 - ul li类

回答

相关问题