在CSS3中编写优美的面包屑导航菜单
当用户遍历站点层次结构时，您将能够显示所有先前的链接路径 。
面包屑提供类似的功能，并具有跟踪您当前位置的其他好处。
这些是用户在页面之间旅行并与您创建的所有内容进行交互的唯一渠道。
导航菜单和链接可能是Web布局中最重要的界面元素。
经过测试，该功能可在所有主要CSS3兼容浏览器中使用，即使不支持CSS3的旧版浏览器在大多数情况下仍可以正确呈现。
在本教程中，我们将创建带有一些CSS3效果的出色的面包屑导航菜单。
在深入研究代码之前，我们将先简单介绍面包屑的功能和完整的教程！
提供线索
与大多数示例相比，我们的样式将利用更为复杂CSS属性，但是我们的准系统模板仍然可用，可以将用户从一页转移到另一页。
痕迹跟踪并不比任何其他菜单都要复杂。
最终，我们希望为所有用户提供最佳的用户体验 ，而不管他们的操作系统或浏览器软件如何，因此，我构建了2个不同的代码示例，以支持旧版本浏览器之间的正常降级 。
您可以在Gmail支持页面上查看他们的菜单 ，以了解我们的前进方向。
在此示例中，我们将重新创建与Google支持菜单类似的样式。
这就是为什么我还用CSS渐变，圆角和框阴影构造了外观相似的菜单的原因。
所有的悬停事件和活动事件都是使用几种CSS样式预先构建的，但是关闭了图像的用户将无法体验这些效果！
第一种是使用自定义背景图片和正确CSS对齐方式构建的。
默认情况下，大多数访问者将使用图像，但是如果您想要更精确的访问者数据，请浏览您的网站分析工具 。
如果您担心同时支持这两种样式，则可以在自己的网站中选择它们。
首先， 您需要下载项目所需的图像 。
我们将从构建基本HTML框架开始，然后介绍不同的样式效果。
足够多的话， 让我们跳入该项目 ！
Bare-Bones HTML
请注意，它不会影响面包屑的显示方式，因此，可以根据需要随意使用自己的页面模板。
如果您想以这种方式启动自己的文档，我已经在下面添加了代码。
这包括默认的doctype，链接CSS和所有基本元素。
我正在使用标准HTML5页面模板开始我的文档。
Default Page
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 ID so we can identify the content much easier. If you're also a fan of jQuery you can use the #ID selector to manipulate all the internal DOM elements.
离开容器确实没有什么坏处，因为您可以更轻松地控制位置。
您可以删除此外部div，但是必须重新设置所有样式以适合新模板。
在演示文件中，我使用它来分隔我们的代码，并在页面上增加一些空白。
首先，我们有一个包含 ID为“ 面包屑 ”的div 。
另外，添加了一个小跨度块 ，因此我们有一个适当的左边框，它不与背景图像重叠。
这需要一些额外的填充来使菜单项保持一致。
您可能会注意到，我为初始列表项指定了“ first ” 类 。
自定义样式化HTML列表的方法有很多，而面包屑只是其中之一。
在内部，我使用无序列表构建了面包屑。
我从9开始，然后从那里开始工作，但是如果菜单中有更多链接，则从更高的整数开始。
完成此操作的最简单方法是调整z-index，以便每个链接覆盖下一个。
使用图像时，我们需要使每个链接重叠以正确显示面包屑箭头。
另外，为z-index属性种植的每个锚定链接都以递减的编号植入。
没有图像的菜单
另一个解决方案是包括特定于IE的样式表，并隐藏或显示最合适的菜单 -但当然，此选项仅适用于Internet Explorer。
不幸的是，这并不总是可靠的（例如，对于某些移动用户）。
如果您尝试回退单个导航，则可以使用jQuery检测浏览器代理并相应地应用ID。
为了适当地降低面包屑，我们需要第二组HTML列表项。
请注意，我们使用类的原因是为了简化这些菜单的复制 ，因此，当您希望页面上有几个不同的面包屑时，使用这些类将永远不会成为问题。
按照这种模式，我将crumbs2用作无序列表的类。
breadcrumb2是我们的新ID，用于定位没有图像的菜单。
.first类和.last操纵圆角半径在很我们的菜单来创建一个非常酷的Web 2.0的外观风格的边缘。
没有图像，我们无法为导航菜单的每个项目重复箭头，因此，我使用了一些圆角为辅助菜单添加了香料。
我们保持了.first类，但另外附加.last阶级到最终的列表项。
CSS滑动背景图片
这很有用，因为它不仅节省了空间，而且在返回编辑样式时， 更容易自定义外观。
对于一些较简单的效果，我在构建属性时将两个面包屑耦合在一起。
因此，让我们从.crumbs类开始。
如果您喜欢这种效果，可以将其保留，但是我发现HTML变得难以处理，并且创建新图标要容易得多。
因此所有内部项目都不会有标记。
对于#breadcrumb和#breadcrumb2我都设置了list-style: none;
.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;
}
我们希望菜单中的所有空间都是可单击的，因此这需要将锚点构建为块元素 。
请注意，列表项是内联显示的，而每个锚链接都有更多的扩展空间。
我们将无序列表设置为阻止，因此该区域周围没有其他东西爬上来。
此单一图像包含在不同位置创建面包屑背景所需的所有3种设计，因此我们可以使用background-position属性基于用户交互进行重新定位。
这意味着，当用户悬停或单击链接时，我们将改变背景位置以显示更新的样式。
这在CSS中被称为简单的Sprite板，或者是滑动门技术。
我使用了名为bg-crumbs.png的图像作为背景。
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;
}
我没有在此处的演示代码中包含它们-但是了解所有选项非常好。
它们为Microsoft和Opera浏览器提供了更多属性，但是并非在所有情况下都完全支持这些属性。
如果您不熟悉这些，我强烈建议您使用CSS Tricks的CSS3渐变指南，该指南应帮助您有效地使用CSS3渐变。
.crumbs2菜单使用CSS渐变来复制背景效果。
如果您更舒适，则可以坚持使用另一种方法。
注意，我已经在背景属性之间设置了RGB和十六进制颜色代码。
我已经包含了旧版本Internet Explorer的旧代码，但不能保证始终显示正确（毕竟，我们使用的是强大的图像渲染技术）。
-webkit-gradient和-moz-linear-gradient是完成大部分工作的核心解决方案。
现在，让我们构建类似于上面使用的图像的悬停效果。
该栏似乎几乎从页面上弹出了，这对支持样式的浏览器来说确实是一种奇妙的效果，但是这些仅涵盖了我们链接的默认状态。
这在整个面包屑菜单的左上方和右下方提供了整洁的效果。
边界半径代码仅适用于我们的辅助面包屑导航。
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;
}
每个状态都会使文本颜色变暗为#333 ，而其他描述符已略微更改以与用户命令相对应。
我使用的是与上面使用的渐变代码完全相同的渐变代码，但是这次，如果您注意到我们的RGB值，则颜色会大不相同。
这种效果使按钮看上去在页面中实际上是被“按下”的。
如果单击并按住将会进入活动状态，该活动状态具有变暗的背景渐变 。
悬停时，您会看到闪亮的浮雕效果 ，加上深色边框，使页面弹出样式。
同样，CSS Tricks是您最好的朋友，在box-shadow上有一篇很棒的文章，它讨论了CSS3中的语法及其正确用法。
通过在每个box-shadow属性行的末尾添加inset关键字来创建此效果。
启用后，阴影将在顶部，右侧和底部边框上形成。
悬停显示从所选链接的底部出来的光影 。
-webkit ， -moz和默认样式使用相同的设置。
我们还将应用新CSS3规范中的box-shadow属性。
奖金：更多款式
我从原始背景中取样，并使用Adobe Photoshop创建了一些变体，您可以将其应用到自己的网站中。
除了本教程的代码外，我还提供了其他背景图片以及经过调整的配色方案。
这些奖励文件包含在源文件中 ，您可以在以下部分以.zip存档格式下载。
如果需要特定的配色方案，请打开“ Photoshop”>“图像”>“调整”>“色相/饱和度”以修改颜色方案以匹配您自己的模板，请记住，如果颜色完全不变，请选中 “色相/饱和度”窗格中的“着色” 选项 。 。
您可以查看上面的图片，以了解我在说什么。
结论
此外，我还提供了演示代码和一些奖励图像供您使用。
我们以相似的方式创建了两个出色的面包屑菜单，并以可以在较旧的浏览器中正常降级的方式进行了构建。
本教程应该使您熟悉一些较新CSS3技术。
请在下面的讨论区中与我们分享您的想法，并且不要忘记下载源文件，以便您可以演示该演示！
也许您对如何改进教程代码有疑问或想法？
您是否特别喜欢我们在此处构建的样式？
更多CSS3教程
以下是我们的文章，可让您从理论上和实践上理解CSS3！
渴望更多CSS3？
- CSS3：创建RSS Feed徽标
- CSS3：创建搜索字段
- CSS3：创建一个AJAX联系人表单
- CSS3：构建HTML5 / CSS3网页
翻译自: https://www.hongkiat.com/blog/breadcrumb-menu-css3/