Question

我使用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

Answer 1

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

HTML：

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

CSS：

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

Answer 2

<强>首先
您在服务器级使用某种语言来实现该站点？如果是这样，检查所选页面并添加特定类来标记它会很有趣，例如（通过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;
}

Answer 3

您需要查看当前路径某种类型的应用程序逻辑，而不是严格的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');
    }
});

您必须添加类来定义不同菜单项的状态。但这应该会让你朝着正确的方向前进。

导航菜单的选定/当前状态

3 个答案: