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

Posted 2023-04-13

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

【英文标题】：CSS Navigation Menu Using Sprite: How to highlight current page's tab/button?

【发布时间】：2010-12-30 22:11:12

【问题描述】：

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

我使用的 sprite 与 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;

【参考方案1】：

CSS 不知道也不关心它在哪个页面上。您必须自己跟踪并输出相关标记。

【参考方案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:hover) 和按钮上的鼠标按下 (a:active)，但我最初的问题涉及如何将其保持在按钮的选定外观上当我在某个页面上时。我将从 CSS 开始。如果我有 6 个按钮，我会再制作 6 个 CSS 类，每个类都与具有特定类的容器 div 相关。容器具有的那个类将基于我当前所在的页面（我将在稍后解释）。同样在该 CSS 类的定义中，我指定要更改背景位置的锚标记。例如，如果我点击页面上的“Systems”按钮，我将（通过 javascript）动态添加一个类到“systems”的容器 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 的网站需要做一些工作，但他们就是这样做的，我相信他们。它对我有用。

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

【参考方案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 使其变为“活动”。

【讨论】：

@BalusC，感谢您的回复。这是使用 ASP.NET MVC 完成的。我一直在使用 jQuery 进行所有 javascript 工作。一旦单击不同的按钮，您会如何建议我处理类的删除？谢谢。

这不是必需的，因为链接只会生成同步请求。而且，如果您使用的是像 ASP 这样的服务器端语言，那么我强烈建议您在那儿而不是在 jQuery 中进行。

我想我很难理解我要添加什么类。每个按钮都需要图像精灵上的不同位置，因此我无法创建单个类（如 .active），因为位置必须根据单击的按钮而改变。我需要为每个按钮创建一个类，每个按钮都有不同的背景位置吗？另外，我不确定我是否遵循您对同步请求的最后建议。我觉得一旦一个类被添加到<li>，它必须被删除才能恢复到它的“默认”外观......

只需添加一个在 y 轴上移动 background-position 的类（假设您使用与苹果相同的图像模板布局）。

我不确定我是否知道一种仅在 y 轴上移动背景位置的方法。我需要给它一个 x 轴的数字，这会根据点击的内容而有所不同..