使用圖像和當前狀態的CSS導航欄

我想讓我的導航欄有一個當前的頁面指示器，我已經研究了每一篇文章，以及遵循確切的例子，但它仍然無法正常工作。使用圖像和當前狀態的CSS導航欄

我正在使用只有兩個圖像的精靈圖像。圖像的寬度爲480，高度爲40，每幅圖像的寬度爲240，高度爲40.一面爲藍色，另一面爲黃色。

我希望將關閉狀態設置爲藍色方面，然後將懸停，活動和當前狀態設置爲黃色方面。但是，我不在乎目前有一個活躍的狀態。

所以，我的問題是：我的關狀態（藍方），懸停狀態（黃方）工作完美。我只需要我目前的狀態（黃色方面）工作。所以，當你點擊菜單項時，圖像保持黃色。

我對任何可怕的編碼道歉，因爲這是我第一次嘗試

這是什麼，我有我的HTML部分：（我只用了三個菜單項中的一個輪廓。）

<body bgcolor="CEB86C"; class="profile"> 

    <div id="navigation"> 
     <ul> 
      <li><a class= "news" href="news.html" title"news"></a></li> 
      <li><a class="profile " href="index.html" title"profile"></a><li> 
      <li><a class= "about" href="about.html" title"about"></a><li> 
     </ul> 
    </div>

這裏是CSS：

#navigation ul { 
    list-style: none; 
    text-align: center; 
} 
#navigation li { 
    display: inline; 
} 
#navigation li a { 
    text-indent: -5000px; 
    display: inline-block; 
    height: 40px; 
} 
#navigation li a.profile { 
    width: 240px; 
    background: url(images/profile.jpg); 
    text-decoration: none; 
} 
#navigation li a.profile:hover { 
    background: url(images/profile.jpg); 
    background-position: -240px; 
    text-decoration: none; 
} 
#navigation li a.profile:current { 
    background: url(images/profile.jpg); 
    background-position: -240px; 
    background-repeat: no-repeat; 
    text-decoration: none; 
}

我明白任何輸入預先感謝您！

來源

2013-01-15 irishlady

假設你取決於你是哪個頁面，那麼你可以只修改上次CSS聲明閱讀改變對body類：

.news #navigation li a.news, 
.profile #navigation li a.profile, 
.about #navigation li a.about { 
    background:url(images/profile.jpg); 
    background-position: -240px; 
    background-repeat: no-repeat; 
    text-decoration:none; 
}

編輯 - 如果你有3幅獨立的圖像，那麼你可以這樣做：

.news #navigation li a.news { 
    background:url(images/news.jpg); 
    background-position: -240px; 
    background-repeat: no-repeat; 
    text-decoration:none; 
} 

.profile #navigation li a.profile { 
    background:url(images/profile.jpg); 
    background-position: -240px; 
    background-repeat: no-repeat; 
    text-decoration:none; 
} 

.about #navigation li a.about { 
    background:url(images/about.jpg); 
    background-position: -240px; 
    background-repeat: no-repeat; 
    text-decoration:none; 
}

來源

2013-01-15 09:20:33 boz

我有三個獨立的圖像。每個菜單項一個。如果情況如此，我將如何編碼？ – irishlady

@irishlady - 我編輯了我的答案。我仍然假設你正在爲每個頁面的主體添加一個類。 – boz

太棒了！這就像一個魅力！非常感謝您的迴應！我無法感恩！你搖滾！ – irishlady

嘗試的#navigation li a.accountbutton:active代替:current

來源

2013-01-15 09:21:20

對不起，這是一個'accountbutton'的錯字，我現在修好了。我在研究時發現，只有當鼠標點擊它時，纔會激活，但當您在頁面上時則不會。我想讓它突出顯示，讓用戶知道他們在哪個標籤上。會主動爲我做這件事嗎？ – irishlady

使用圖像和當前狀態的CSS導航欄

回答

相關問題