Question

我使用精灵建立了一个CSS导航菜单，非常类似于Apple's website上的精灵。我已经让它工作得很好，这样它就会在悬停和mousedown（所有使用CSS）上改变到图像上的正确位置，但是我很难弄清楚如何在点击按钮时保持按钮保持突出显示。我的精灵中有一行用于“点击”外观，但是我知道没有用于处理所选内容的CSS。我希望按钮转到他们的“点击”版本，具体取决于点击了哪一个。我已经使用jQuery探索了一些javascript解决方案，但我认为可能有更好的方法。

我使用的精灵与Apple非常相似，找到here。

非常感谢任何帮助。感谢。

更多信息：

所以我的菜单目前在html中显示如下：

    <ul id="global_nav">
        <li id="home_nav"><a href="<%= Url.Action("Index", "Home") %>"></a></li>
        <li id="systems_nav"><a href="<%= Url.Action("Index", "Home")%>"></a></li>
        <li id="users_nav"><a href="<%= Url.Action("Index", "Home")%>"></a></li>
        <li id="utilities_nav"><a href="<%= Url.Action("Index", "Utilities")%>"></a></li>
        <li id="reference_nav"><a href="<%= Url.Action("Index", "Home")%>"></a></li>
        <li id="metrics_nav"><a href="<%= Url.Action("Index", "Home")%>"></a></li>
        <li id="help_nav"><a href="<%= Url.Action("Index", "Home")%>"></a></li>
        <li id="info_nav"></li>
    </ul>

任何我的CSS都在这里（对不起，很长）：

#global_nav 
{
    background: url("../Images/nav_bar.png");
    height: 38px;
    width: 979px;
    padding: 0;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}

#global_nav li
{
    float: left;
}

#global_nav a 
{
    height: 38px;
    display: block;
}

#global_nav #home_nav 
{
    width: 118px;
}

#global_nav #home_nav a:hover 
{
    background: url("../Images/nav_bar.png") 0px -37px no-repeat;
}

#global_nav #home_nav a:active
{
    background: url("../Images/nav_bar.png") 0px -74px no-repeat;
}

#global_nav #systems_nav
{
    width: 116px;
}

#global_nav #systems_nav a:hover 
{
    background: url("../Images/nav_bar.png") -118px -37px no-repeat;
}

#global_nav #systems_nav a:active
{
    background: url("../Images/nav_bar.png") -118px -74px no-repeat;
}

#global_nav #users_nav
{
    width: 117px;
}

#global_nav #users_nav a:hover 
{
    background: url("../Images/nav_bar.png") -234px -37px no-repeat;
}

#global_nav #users_nav a:active
{
    background: url("../Images/nav_bar.png") -234px -74px no-repeat;
}

#global_nav #utilities_nav
{
    width: 117px;
}

#global_nav #utilities_nav a:hover 
{
    background: url("../Images/nav_bar.png") -351px -37px no-repeat;
}

#global_nav #utilities_nav a:active
{
    background: url("../Images/nav_bar.png") -351px -74px no-repeat;
}

#global_nav #reference_nav
{
    width: 117px;
}

#global_nav #reference_nav a:hover 
{
    background: url("../Images/nav_bar.png") -468px -37px no-repeat;
}

#global_nav #reference_nav a:active
{
    background: url("../Images/nav_bar.png") -468px -74px no-repeat;
}

#global_nav #metrics_nav
{
    width: 117px;
}

#global_nav #metrics_nav a:hover 
{
    background: url("../Images/nav_bar.png") -585px -37px no-repeat;
}

#global_nav #metrics_nav a:active
{
    background: url("../Images/nav_bar.png") -585px -74px no-repeat;
}

#global_nav #help_nav
{
    width: 117px;
}

#global_nav #help_nav a:hover 
{
    background: url("../Images/nav_bar.png") -702px -37px no-repeat;
}

#global_nav #help_nav a:active
{
    background: url("../Images/nav_bar.png") -702px -74px no-repeat;
}

#global_nav #info_nav
{
    width: 163px;
}

#global_nav #info_nav a:hover 
{
    background: url("../Images/nav_bar.png") -819px -37px no-repeat;
}

#global_nav #info_nav a:active
{
    background: url("../Images/nav_bar.png") -819px -74px no-repeat;
}

Answer 1

CSS不知道或关心它所在的页面。您必须自己跟踪并输出相关标记。

Answer 2

<强>自答案：

要做到这一点，我基本上遵循Apple在他们网站上的方式。我设置了一个带有精灵宽度的div，并在这个div中添加了一个无序列表。每个列表项表示按钮栏上的按钮。在每个列表项中，有一个单独的锚标记，当单击该按钮时，该标记会转到我想要转到的页面。在CSS中，我有一个类，它引用包含div下的列表项下的所有锚标记，在它的div下，如下：

#globalheader #globalnav li a
{
    float: left;
    height: 0;
    overflow: hidden;
    padding-top: 36px;
    width: 118px;
    background-image: url("../Images/nav/nav_bar.png");
    background-repeat: no-repeat;
}

这为每个锚标签定义了背景图像。现在我需要为每个锚标签定义背景位置，因此它显示了右键。我为每个锚标签都有CSS。这是其中一个的CSS：

#globalheader #globalnav li#systems_nav a 
{
    background-position: -118px 0;
}

当然我有CSS来处理悬停在按钮上（a：悬停）和按钮上的mousedown（a：active），但是我原来的问题是如何将它保持在按钮的选定外观上当我在某个页面上。我将从CSS开始。如果我有6个按钮，我又创建了6个CSS类，每个类都与具有某个类的容器div相关。容器所具有的类将基于我当前所在的页面（我将在一分钟内解释）。同样在CSS类的定义中，我指定要更改背景位置的锚标记。例如，如果我单击页面上的“系统”按钮，我将动态地（通过javascript）将一个类添加到“系统”的容器div中，这个CSS将作为结果应用：

#globalheader.systems #globalnav li#systems_nav a
{
    background-position: -118px -108px !important;
}

背景位置是覆盖我的按钮的“点击”外观的位置。请注意声明的.systems部分，它指定#globalheader div必须具有“系统”类。如果是这种情况，它只会更改单个锚标记的背景位置：您猜对了，就是“systems_nav”li下的那个。我为按钮栏中的每个按钮编写了其中一个类。第二个技巧是编写javascript来处理动态将类添加到div，具体取决于我所在的页面。为此，我在每个页面上放置一个隐藏的div，看起来像这样：

<div id="page_section" title="systems" style="display: none;"></div>

它没有显示，有一个通用ID，每个这些div在我的网站上的每个页面上都有，并且具有特定于我所在页面的标题。在我的javascript文件中，我写了这个（它使用jquery）：

var $globalheader = $('#globalheader'); // container div to add the class to
var $page_section = $('#page_section'); // div whose title is the current page

$globalheader.addClass($page_section.attr('title'));

瞧。 “systems”作为类名添加到“globalheader”div中，并且应用了正确的CSS类，只显示单击“系统”按钮。

通过查看Apple的网站，这需要做一些工作，但这就是他们这样做的方式，我相信他们。它对我有用。

希望它可以帮助其他人遇到同样的问题。

Answer 3

您是否使用PHP / ASP / JSP等服务器端编程/脚本语言？如果是这样，那么你可以有条件地渲染一个CSS类。这是一个PHP示例（您可以通过$_SERVER变量之一获取PHP中的请求页面：

<a href="somepage"<?php echo ($currentpage == 'somepage' ? ' class="active"' : ''); ?>>somepage</a>

如果您不使用服务器端语言，那么唯一的手段是JS / jQuery。在onload期间执行类似跟踪的操作（通过解析window.location可以在JS中获取请求的页面）：

$('a[href="' + currentpage + '"]').addClass('active');

CSS类a.active显然应该移动background-position以使其变为“活动”。

CSS导航菜单使用Sprite：如何突出显示当前页面的选项卡/按钮？

3 个答案: