2

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

我使用的 sprite 与 Apple 的非常相似，可在此处找到。

任何帮助将不胜感激。谢谢。

更多信息：

所以我的菜单目前在 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;
}
4

3 回答 3

2

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

于 2009-12-29T21:19:02.993 回答
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），但我最初的问题是如何在我' m 在某个页面上。我将从 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>

它不显示，具有每个这些 div 将在我网站上的每个页面上具有的通用 ID，并且具有特定于我所在页面的标题。在我的 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 的网站，这需要一些工作，但他们就是这样做的，我相信他们。它对我有用。

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

于 2010-01-06T20:16:26.543 回答
1

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

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

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

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

CSS 类a.active显然应该改变background-position它，使其变得“活跃”。

于 2009-12-29T21:22:32.483 回答