css面包屑导航_在CSS3中编写优美的面包屑导航菜单

本文是我们的“ HTML5 / CSS3教程系列”的一部分 -致力于帮助您成为更好的设计师和/或开发人员。 单击此处查看同一系列的更多文章。

导航菜单和链接可能是Web布局中最重要的界面元素。这些是用户在页面之间旅行并与您创建的所有内容进行交互的唯一渠道。面包屑提供类似的功能，并具有跟踪您当前位置的其他好处。当用户遍历网站层次结构时，您将能够显示所有先前的链接路径 。

在本教程中，我们将创建带有一些CSS3效果的出色的面包屑导航菜单。经过测试，该功能可在所有主要CSS3兼容浏览器中使用，即使不支持CSS3的旧版浏览器在大多数情况下仍可以正确呈现它。

在深入研究代码之前，我们将先简单介绍面包屑的功能，以及完整的教程！

提供线索

痕迹跟踪并不比任何其他菜单都要复杂。与大多数示例相比，我们的样式将利用更为复杂CSS属性，但是我们的准系统模板仍然可用，可以将用户从一页转移到另一页。

在此示例中，我们将重新创建与Google支持菜单类似的样式。您可以在Gmail支持页面上查看他们的菜单，以了解我们的前进方向。最终，我们希望为所有用户提供最佳的用户体验 ，而不管他们的操作系统或浏览器软件如何，因此，我构建了2个不同的代码示例以支持旧版本浏览器之间的正常降级 。

第一种是使用自定义背景图片和正确CSS对齐方式构建的。所有的悬停事件和活动事件都是使用几种CSS样式预先构建的，但是关闭图像的用户将无法体验这些效果！这就是为什么我还用CSS渐变，圆角和框阴影构造了外观类似的菜单的原因。

如果您担心同时支持这两种样式，则可以在自己的网站中选择它们。默认情况下，大多数访问者将使用图像，但是如果您想要更精确的访问者数据，请浏览您的网站分析工具。

足够多的话， 让我们跳入项目 ！我们将从构建基本HTML框架开始，然后介绍不同的样式效果。首先， 您需要下载项目所需的图像 。

Bare-Bones HTML

我使用标准HTML5页面模板开始我的文档。这包括默认的doctype，链接CSS和所有基本元素。如果您想以这种方式启动自己的文档，我已经在下面添加了代码。请注意，它不会影响面包屑的显示方式，因此，可以根据需要随意使用自己的页面模板。

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><title>Default Page</title><link rel="stylesheet" type="text/css" href="css/style.css" /></p>
</head><body></body>
</html>
</pre>
<p>I'll split the code into two different blocks. The First block with images is built with a slightly different manner, followed by our menu without images. Each set is given its own <strong>ID</strong> so we can identify the content much easier. If you're also a fan of jQuery you can use the <strong>#ID selector</strong> to manipulate all the internal DOM elements.</p>
<pre name="code" class="html">
<!-- with images -->
<div id="breadcrumb"><ul class="crumbs"><li class="first"><a href="#" style="z-index:9;"><span></span>Blog Home</a></li><li><a href="#" style="z-index:8;">Archives</a></li><li><a href="#" style="z-index:7;">2011 Writing</a></li><li><a href="#" style="z-index:6;">Tips for jQuery Development in HTML5</a></li></ul>
</div>

首先，我们有一个包含 ID为“ 面包屑 ”的div 。在演示文件中，我用它来分隔我们的代码，并在页面上增加一些空白。您可以删除此外部div，但是必须重新设置所有样式以适合新模板。离开容器确实没有什么坏处，因为您可以更轻松地控制位置。

在内部，我使用无序列表构建了面包屑。自定义样式化HTML列表的方法有很多，而面包屑只是其中之一。您可能会注意到，我为初始列表项指定了“ first ” 类。为了使菜单项保持一致，需要一些额外的填充。另外，添加了一个小跨度块 ，因此我们有一个适当的左边框，该边框不与背景图像重叠。

另外，为z-index属性种植的每个锚定链接都以递减的编号植入。使用图像时，我们需要使每个链接重叠以正确显示面包屑箭头。完成此操作的最简单方法是调整z-index，以便每个链接覆盖下一个。我从9开始，然后从那里开始工作，但是如果菜单中有更多链接，则从更高的整数开始。

没有图像的菜单

为了适当地降低面包屑，我们需要第二组HTML列表项。如果您尝试回退单个导航，则可以使用jQuery检测浏览器代理并相应地应用ID。不幸的是，这并不总是可靠的（例如，对于某些移动用户）。另一个解决方案是包括特定于IE的样式表，并隐藏或显示最合适的菜单 -但当然，此选项仅适用于Internet Explorer。

<!-- graceful degrade -->
<div id="breadcrumb2"><ul class="crumbs2"><li class="first"><a href="#">Blog Home</a></li><li><a href="#">Archives</a></li><li><a href="#">2011 Writing</a></li><li class="last"><a href="#">Tips for jQuery Development in HTML5</a></li>              </ul>
</div>

breadcrumb2是我们的新ID，用于定位没有图像的菜单。按照这种模式，我将crumbs2用作无序列表的类。请注意，我们使用类的原因是为了简化这些菜单的复制 ，因此，当您希望页面上有几个不同的面包屑时，使用这些类将永远不会成为问题。

我们保持了.first类，但另外附加.last阶级到最终的列表项。没有图像，我们无法为导航菜单的每个项目重复箭头，因此，我使用了一些圆角为辅助菜单添加了香料。 .first类和.last操纵圆角半径在很我们的菜单来创建一个非常酷的Web 2.0的外观风格的边缘。

CSS滑动背景图片

对于一些较简单的效果，我在构建属性时将两个面包屑耦合在一起。这很有用，因为它不仅节省了空间，而且在返回编辑样式时， 更容易自定义自己的外观。

对于#breadcrumb和#breadcrumb2我都设置了list-style: none; 因此所有内部项目都不会有标记。如果您喜欢这种效果，可以将其保留，但是我发现HTML变得难以操作，并且创建新图标要容易得多。因此，让我们从.crumbs类开始。

.crumbs { display: block; }
.crumbs li {  display: inline; }
.crumbs li.first { padding-left: 8px; }
.crumbs li a,
.crumbs li a:link,
.crumbs li a:visited {color: #666;display: block;float: left;font-size: 12px;margin-left: -13px;padding: 7px 17px 11px 25px;position: relative;text-decoration: none;
}
.crumbs li a {background-image: url('../img/bg-crumbs.png');background-repeat: no-repeat;background-position: 100% 0;position: relative;
}
.crumbs li a:hover {color: #333;background-position: 100% -48px;cursor: pointer;
}
.crumbs li a:active {color: #333;background-position: 100% -96px;
}
.crumbs li.first a span {height: 29px;width: 3px;border-left: 1px solid #d9d9d9;position: absolute;top: 0px;left: 0px;
}

我们将无序列表设置为阻止，因此该区域周围没有其他东西爬升。请注意，列表项是内联显示的，而每个锚链接都有更多的扩展空间。我们希望菜单中的所有空间都是可单击的，因此这需要将锚点构建为块元素 。

我使用了名为bg-crumbs.png的图像作为背景。这在CSS中被称为简单的Sprite板，或者是滑动门技术。这意味着，当用户悬停或单击链接时，我们将改变背景位置以显示更新的样式。此单一图像包含在不同位置创建面包屑背景所需的所有3种设计，因此我们可以使用background-position属性根据用户交互进行重新定位。

CSS3的自定义效果

原始的面包屑设计要容易得多。这是很明显的，因为许多CSS属性比您想象的要基本，但是现在我们开始关注仅用CSS3复制这些效果！

各个样式占用大量空间，因此我将其分为2个代码块。

.crumbs2 {display: block;margin-left: 27px;padding: 0;padding-top: 10px;
}
.crumbs2 li { display: inline; }
.crumbs2 li a,
.crumbs2 li a:link,
.crumbs2 li a:visited {color: #666;display: block;float: left;font-size: 12px;padding: 7px 16px 7px 19px;position: relative;text-decoration: none;border: 1px solid #d9d9d9;border-right-width: 0px;
}
.crumbs2 li a  { background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.45, rgb(241,241,241)),color-stop(0.73, rgb(245,245,245)));background-image: -moz-linear-gradient( center bottom, rgb(241,241,241) 45%, rgb(245,245,245) 73%);/* For Internet Explorer 5.5 - 7 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5);/* For Internet Explorer 8 */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";
}.crumbs2 li.first a {border-top-left-radius: 5px;-moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;
}
.crumbs2 li.last a {border-right-width: 1px;border-bottom-right-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;
}

.crumbs2菜单使用CSS渐变来复制背景效果。如果您不熟悉这些，我强烈建议您使用CSS Tricks的CSS3渐变指南，该指南应帮助您有效地使用CSS3渐变。它们为Microsoft和Opera浏览器提供了更多属性，但是并非在所有情况下都完全支持这些属性。我没有在此处的演示代码中包含它们-但是理解所有选项是一件好事。

-webkit-gradient和-moz-linear-gradient是完成大部分工作的核心解决方案。我已经包含了旧版本Internet Explorer的旧代码，但不能保证始终显示正确（毕竟，我们使用的是强大的图像渲染技术）。注意，我已经在背景属性之间设置了RGB和十六进制颜色代码。如果您感到更舒适，则可以坚持使用另一种方法。

边界半径代码仅适用于我们的辅助面包屑导航。这在整个面包屑菜单的左上方和右下方提供了整洁的效果。该栏似乎几乎从页面上弹出了，这对支持样式的浏览器来说确实是一种奇妙的效果，但是这些仅涵盖了我们链接的默认状态。现在，让我们构建与上面使用的图像相似的悬停效果。

CSS3边框和阴影

每当用户将鼠标悬停在链接上时，我们都想更新一些内容。首先，我们需要使活动元素顶部和底部的边框颜色变暗 。对于悬停状态和活动状态，也可以在图像中看到。

.crumbs2 li a:hover { border-top-color: #c4c4c4;border-bottom-color: #c4c4c4;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.45, rgb(241,241,241)),color-stop(0.73, rgb(248,248,248)));background-image: -moz-linear-gradient( center bottom, rgb(241,241,241) 45%, rgb(248,248,248) 73%);/* For Internet Explorer 5.5 - 7 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1);/* For Internet Explorer 8 */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)";color: #333;-moz-box-shadow: 0px 2px 2px #e8e8e8;-webkit-box-shadow: 0px 2px 2px #e8e8e8;box-shadow: 0px 2px 2px #e8e8e8;
}.crumbs2 li a:active {border-top-color: #c4c4c4;border-bottom-color: #c4c4c4;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.45, rgb(224,224,224)),color-stop(0.73, rgb(235,235,235)));background-image: -moz-linear-gradient( center bottom, rgb(224,224,224) 45%, rgb(235,235,235) 73%);/* For Internet Explorer 5.5 - 7 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0);/* For Internet Explorer 8 */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0)";box-shadow: -1px 1px 1px 0px #dadada inset;-webkit-box-shadow: -1px 1px 1px 0px #dadada inset;-moz-box-shadow: -1px 1px 1px 0px #dadada inset;color: #333;
}

我使用的是与上面使用的渐变代码完全相同的渐变代码，但是这次，如果您注意到我们的RGB值，颜色就会大不相同。每个状态都会使文本颜色变暗为#333 ，而其他描述符已略微更改以与用户命令相对应。

悬停时，您会看到闪亮的浮雕效果 ，再加上深色边框，使页面弹出式样式。如果单击并按住将会进入活动状态，该活动状态具有变暗的背景渐变 。这种效果使按钮看上去在页面中实际上是被“按下”的。

我们还将应用新CSS3规范中的box-shadow属性。 -webkit ， -moz和默认样式使用相同的设置。悬停显示从所选链接的底部发出的阴影 。启用后，阴影将在顶部，右侧和底部边框上形成。通过在每个box-shadow属性行的末尾添加inset关键字来创建此效果。同样，CSS Tricks是您最好的朋友，在box-shadow上有一篇很棒的文章，它讨论了CSS3中的语法及其正确用法。

奖金：更多款式

除了本教程的代码外，我还提供了其他背景图片以及经过改编的配色方案。我从原始背景中取样，并使用Adobe Photoshop创建了一些变体，您可以将其应用到自己的网站中。

这些奖励文件包含在源文件中 ，您可以在以下部分中以.zip存档格式下载。

您可以查看上面的图片，以了解我在说什么。如果需要特定的配色方案，请打开Photoshop>“图像”>“调整”>“色相/饱和度”以修改颜色方案以匹配您自己的模板，请记住，如果颜色完全不变，请检查 “色相/饱和度”窗格中的“着色” 选项。。

结论

本教程应该使您熟悉一些较新CSS3技术。我们已经创建了两个具有相似样式的出色面包屑菜单，并以可以在较旧的浏览器中正常降级的方式进行了构建。此外，我还提供了演示代码和一些奖励图像供您试用。

您是否特别喜欢我们在此处构建的样式？或者，您对如何改进教程代码有疑问或想法？请在下面的讨论区中与我们分享您的想法，并且不要忘记下载源文件，以便您可以演示该演示！