-1

I've created my navigation menu using CSS and an image sprite for the rollover states (i.e hover, active). However, I'm trying to create a 'selected/current' state (which in my case is the same as the active state) so that dependent on the page you've selected, the corresponding navigation button is highlighted. Here's what I have:

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>

Image sprite: view here

4

3 回答 3

1

解决此问题的一种方法是将一个类放在标识您当前正在浏览的页面的主体标签上，并在导航项属于该特定类时将选定状态应用于导航项。喜欢：

HTML：

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

CSS：

body.about ul li.about { [selected background position] }
于 2012-11-13T00:27:58.687 回答
1

第一：
您在服务器级别使用某种语言来实现站点？
如果是这样，检查被选中的页面并添加一个特定的类来标记它会很有趣，例如（通过 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-13T00:30:24.453 回答
0

您将需要查看某些类型的应用程序逻辑的当前路径，而不是严格的 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-13T00:22:07.307 回答