制作“You Are Here”按钮的另外一种方法

最近我读了一篇文章，这篇文章使我重新考虑了我一直在用的制作“You Are Here”按钮的方法。结果是我现在有两个可行的方法可供选择，在给定的情况下我可以选择使用其中比较容易的那个方法来实现这种按钮。下面让我们来对比一下这两种方法，看看你应该在什么时候使用哪种方法。

背景：我们想要做什么

“You Are Here”按钮是我使用的一个术语，表示一个指向当前页面的按钮或者链接，并且这个按钮或链接表现为不同的样式以帮助访问者确定他们目前在 Web 站点中所处的位置。“You Are Here”一般是导航栏中的一个按钮，但是也有可能是“breadcrumb trail”中的一个链接，或者任何指向当前页面的链接。

“You Are Here”按钮一般具有不同的外观样式，以使其区别于导航栏中的其它按钮。例如，在“You Are Here”按钮上，你可以使用与导航栏中其它按钮的文本及背景颜色相反的颜色，或者使用比其它按钮的阴影更淡的阴影。

为了避免迷惑站点访问者，“You Are Here”按钮应该不能表现为可点击的链接，因为它并不会把访问者带到另外一个页面中。换句话说，“You Are Here”不应该有滚翻效果，并且在把光标放到“You Are Here”按钮上时光标不应该变成小手的形状。

方法一：忽略链接

可能最简单的实现“You Are Here”按钮的方法是赋给包含“You Are Here”按钮文本的 ＜div＞ 或 ＜li＞ 一个 class 或 ID，然后创建一个样式将适当的格式应用到那个 class 或 ID 上。由 class 或 ID 负责“You Are Here”控制按钮的外观。为了保证“You Are Here”不是可点击的链接，可以移除为那个按钮定义链接的 ＜a＞ 标签。

例如，下面是一个我几个月前所写的“You Are Here”按钮示例的标记（markup）。图A给出了代码的实际运行效果。

＜div id="menu"＞
＜ul＞
＜li＞＜a href="Link1-T1.html"＞Button 1＜/a＞＜/li＞
＜li class="youarehere"＞Button 2＜/li＞
＜li＞＜a href="Link3-T1.html"＞Button 3＜/a＞＜/li＞
＜/ul＞
＜/div＞

下面是使前面的代码能够产生期望的效果所用的 CSS 代码。

div#menu {
height: auto;
width: 150px;
color: #FFFFFF;
}
#menu li {
height: 40px;
width: 125px;
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
line-height: 250%;
list-style-type: none;
background-color: #003399;
border: 1px solid #000000;
}
#menu li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
font-weight: normal;
color: #FFFFFF;
}
#menu li a:hover {
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
#menu li.youarehere {
color: #000099;
background-color: #66CCFF;
}

注意，.youarehere类（class）被应用到标记中的 ＜li＞ 标签，而且“You Are Here”按钮（button 2）没有包含定义超链接的 ＜a＞ 标签。结果是虽然它具有按钮的外形，但是却不是一个可点击的链接。相反，它只是当前页面中导航按钮栏中的一个摆设。

CSS 代码中的#menu li.youarehere样式定义“You Are Here”按钮的文本及背景颜色。按钮尺寸、边框以及其它格式都来自于 #menu li样式。

对于基于无序列表的导航栏，以及具有标签而又不是 ＜a＞ 标签的类似情况，这种方法效果相当好。

方法二：控制链接（以及光标）的样式

有时候更改标记以及从“You Are Here”按钮中移除 ＜a＞ 标签并不是很方便。例如，导航按钮的标签可能是动态生成的；或者可能是包含在服务器端的 include 文件中的，而并没有直接包含在它将要呈现给浏览器的页面中。在这种情况下，从一个按钮中移除 ＜a＞ 标签以及控制其 ＜li＞ 的样式就显得不大实际。相应的，你需要通过控制选定按钮的 ＜a＞ 标签的样式来创建“You Are Here”效果。

一般情况下，这种效果是可以通过为每个按钮分配一个唯一的 ID，然后使用基于 ID 的选择器（selector）控制当前页面的“You Are Here”按钮的样式来实现。定义“You Are Here”按钮的样式可以嵌在文档头中，也可以存储在页面指定的样式级联表中，以使它只对一个页面有效。

如果“You Are Here”按钮的标记包含一个超链接并且导航栏中的其它按钮包含滚翻效果，那么你就需要为“You Are Here”按钮的每个链接状态定义相应的样式。否则的话，“You Are Here”按钮也会出现滚翻效果。实现这一要求的最简单的方法是为所有的链接状态创建一个带有选择器的样式，再创建一组规则声明集合。

即使在创建一组控制“You Are Here”按钮外观的样式之后，还会有很明显的信息显示出它依然是一个活动的超链接——当访问者当光标指向这个按钮时，光标会变成小手的形状。Mike Rundle 的一篇文章“Hoverless Current Links（不可悬停的光前链接）”提醒我经常被忽视的一个 CSS 属性可以让你对光标的形状进行一些控制，从而允许你覆盖光标的一般行为——即在将光标悬停在超链接之上时它会从箭头形状变成小手形状。

通过添加一个 cursor:default规则到“You Are Here”按钮的样式中，你可以抵消光标的形状变化，从而有效地隐藏“You Are Here”按钮包含超链接的事实。事实上超链接并没有被移除，但是它移除了将光标形状变为小手的视觉效果，从而告诉访问者这上一个不可点击的按钮。

下面是使用上面的方法实现的“You Are Here”按钮示例的 XHTML 标记，如图B所示。注意标记中每个按钮的 ID。还请注意这个标记没有变化——在每个页面中它都保持相同。

＜div id="menu"＞
＜ul＞
＜li＞＜a id="btn1" href="Link1-T2.html"＞Button 1＜/a＞＜/li＞
＜li＞＜a id="btn2" href="YouAreHere-T2.html"＞Button 2＜/a＞＜/li＞

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有