CSS導航菜單設置對當前項目

-1

我開發的http://hcldesign.co.uk/一個網站，並增加了一個導航菜單效果，我發現和使用CSS它整合到我的網站。CSS導航菜單設置對當前項目

唯一的問題是我無法弄清楚如何有懸停效果逗留當我點擊菜單項，然後懸停效果也顯示在當前/活動頁/菜單項。當我添加代碼時，我認爲它應該是這樣的：活動這打破了菜單懸停效果。

用於菜單當前的代碼下面

`a:focus { 
    color: #c9c9c9 !important; 
    text-decoration: none; 
    } 

    #menu-primary-menu { 
    font-family: 'roboto', roboto, roboto; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: 500; 
    letter-spacing: 1px; 
} 
#menu-primary-menu * { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: all 0.35s ease; 
    transition: all 0.35s ease; 
} 
#menu-primary-menu li { 
    display: inline-block; 
    list-style: outside none none; 
    margin: 0em 1.5em; 
    padding: 0; 
} 
#menu-primary-menu a { 
    padding: 0.25em 0; 
    color: #fff; 
    position: relative; 
    text-decoration: none; 
    display: inline-block; 
} 
#menu-primary-menu a:before, 
#menu-primary-menu a:after { 
    height: 3px; 
    position: absolute; 
    content: ''; 
    -webkit-transition: all 0.35s ease; 
    transition: all 0.35s ease; 
    background-color: #3588dc; 
    width: 0; 
} 
#menu-primary-menu a:before { 
    top: 0; 
    left: 0; 
} 
#menu-primary-menu a:after { 
    bottom: 0; 
    right: 0; 
} 
#menu-primary-menu a:hover { 
    color: #fff; 
} 

#menu-primary-menu .active a { 
    color: #fff; 
} 


#menu-primary-menu a:hover:before, 
#menu-primary-menu .current a:before, 
#menu-primary-menu a:hover:after, 
#menu-primary-menu .current a:after { 
    width: 100%; 
} 

#menu-primary-menu a { 
font-size: 14px; 
margin: -10px 
}

任何幫助將不勝感激。

感謝

來源

2017-08-10 Harvey

首先，請閱讀[問]。然後編輯您的問題以向我們展示相關代碼。 – CBroe

當前的代碼添加，對不起 – Harvey

既然你不導航到這裏的任何不同的頁面，但只使用同一個頁面，這標誌着當然目前的項目不適用默認的WP機制內錨鏈接。你必須首先添加一些JavaScript，當你單擊它時在「current」元素上設置一個類。 – CBroe

給每個<body id="mypage-one">一個ID。你也必須給你的<nav>項目如<li id="nav-page-one">一個ID。

如果你現在在你的CSS會這樣，你有你的影響，你的願望。

#mypage-one, #nav-page-one { 
    background-color: #2a88bd; 
} 

#mypage-two, #nav-page-two { 
    background-color: #2a88bd; 
}

如果您的逗號分隔的CSS選擇器匹配現在，你會得到background-color設置爲#2a88bd或怎麼過你的懸停效果。

希望你會成功。

來源

2017-08-10 10:40:51

嗨，是否有可能購買＃nav-item-101 {background-color：＃2a88bd; }？正如我的嘮叨項目剛剛得到隨機數字自動分配給他們，我不知道這些如何改變WordPress的。這是一個單頁網站，只有其他幾個實際的網頁將被添加，所以我需要一個頁面標籤？如果是的話，我在哪裏可以找到頁面標籤？ – Harvey

您好，我剛纔說我當前的代碼，我需要它來顯示懸停效果線路導航項目被點擊 – Harvey

時在找你的情況下，你必須改變這種方式，'＃菜單主菜單了'我之前已經做過了。只需在你的瀏覽器中使用你的開發工具，並將其範圍。你會發現很棒的東西！ –

我在使用滾動ü認爲NAV很難做到這一點如上。你可以使用jQuery來實現你的目標。看看這個codepen它是如何工作：

https://codepen.io/anon/pen/EvXVXm

$('.link').on('click', function(event) { 
    $('.link').removeClass('active'); 
    $target = $(event.target); 
    $target.addClass('active'); 
});

我認爲這將是有益的。

Regards

來源

2017-08-10 10:43:55 Czeran

雖然我需要在JavaScript中使用哪些類？ – Harvey

CSS導航菜單設置對當前項目

回答

相關問題