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類

回答

相關問題