導航選擇/當前狀態菜單

-1

我已經創建了我的導航菜單，使用CSS和翻轉狀態（即懸停，活動）的圖像精靈。但是，我試圖創建一個「選定/當前」狀態（在我的情況下，它與活動狀態相同），因此取決於您選擇的頁面，相應的導航按鈕將突出顯示。這是我有：導航選擇/當前狀態菜單

CSS：

#menu li { 
margin: 0; 
padding: 0; 
height: 50px; 
list-style: none; 
display: inline; 
float: left; 
line-height: 40px; 
} 

#menu a { 
display: block; 
height: 50px; 
} 

#menu a:hover { 
background-image:url(../Images/about_rollover.gif) 
} 

#about { 
width: 90px; 
} 

#about a:hover { 
background-position: 0 -50px; 
} 

#about a:active { 
background-position: 0 -100px; 
} 

#about a:selected { 
background-position: 0 -100px; 
} 

#portfolio { 
width: 90px; 
} 

#portfolio a:hover { 
background-position: 90px -50px; 
} 

#portfolio a:active { 
background-position: 90px -100px;

HTML：

<ul id="menu"> 
    <li id="about"><a href"#"></a></li> 
    <li id="portfolio"><a href="portfolio.html"></a></li> 
</ul>

圖片精靈：view here

來源

2012-11-13 Jamie Smith

請向我們展示您使用的圖像以便更好地理解。 –

我已經添加了一個鏈接到我的精靈圖片 –

你需要看看目前的路徑某些類型的應用程序邏輯，而不是嚴格的CSS。

例如，你可以使用JavaScript：

$('document').ready(function() { 

    //Gets the current window location 
    var currentPath = window.location.pathname; 


    /*Logic to identify where the user is relative 
    to your webpage and update the style*/ 
    if (currentPath = '/portfolio') 
    { 
     $('portfolio').addclass('menuactive'); 
    } 
});

您必須添加類定義狀態都用於不同的菜單項。但是這應該讓你朝正確的方向發展。要解決這個

來源

2012-11-13 00:22:07 Malkus

對不起，我是一個noob當它來到它的網頁設計 - 所以你說的沒有對我有很大的意義。 –

**這裏是一個例子[鏈接]（http://jsfiddle.net/yMmuE/）**最終，你的問題的答案是你必須有一些方法來確定用戶在哪裏。完成後，您可以使用多種方法來更改樣式以按照您的喜好顯示菜單。 – Malkus

對不起，我仍然無法爲我工作。 –

一種方法是把一個類上標識的頁面當前瀏覽，以及將所選擇狀態的導航項目時它屬於特定類下的body標籤。像：

HTML：

<body class="about"> 
    <ul id="menu"> 
     <li id="about"><a href=...

CSS：

body.about ul li.about { [selected background position] }

來源

2012-11-13 00:27:58 Erik

當然，我知道這不會編程處理所有的網頁，但解決的只是更多的通用指南的一個方式這個問題。 – Erik

第一：
您使用一些語言在服務器級別執行的網站？
如果是這樣，這將是有趣的，檢查所選擇的頁面，添加特定的類來標記它，例如（通過PHP）：

<ul id="menu"> 
<li id="about"<?php echo $accessedPage == 'about' ? ' class="selected"' : ''; ?>><a href"#"></a></li> 
<li id="portfolio"><a href="portfolio.html"></a></li> 
</ul>

二：
您可以將一個css選擇器懸停並選擇：

#about a:hover, 
#about .selected a { 
    background-position: 0 -50px; 
} 

#portfolio a:hover, 
#portfolio .selected { 
    background-position: 90px -50px; 
}

來源

2012-11-13 00:30:24

我無法得到這個工作？ –

@JamieSmith我不明白你的意思。 –

那麼，我試過實施你的建議，它並沒有爲我工作？ –

導航選擇/當前狀態菜單

回答

相關問題