css扁平化面包屑导航

CSS扁平化面包屑导航

基础概念

面包屑导航（Breadcrumb Navigation）是一种用户界面设计模式，用于显示用户在网站或应用程序中的当前位置。它通常以一系列链接的形式展示，每个链接代表用户到达当前页面所经过的路径。扁平化面包屑导航是指将这种导航结构设计得更加简洁、直观，减少嵌套层次，使用户能够快速理解当前位置。

类型

基于路径的面包屑：显示用户从根目录到当前页面的完整路径。
基于分类的面包屑：显示当前页面所属的分类层次。
基于属性的面包屑：显示当前页面的特定属性或标签。

应用场景

电子商务网站：帮助用户快速了解商品分类和位置。
内容管理系统：帮助用户理解文档或页面的组织结构。
企业网站：帮助用户快速导航到不同部门或服务页面。

示例代码

以下是一个简单的CSS扁平化面包屑导航的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flat Breadcrumb Navigation</title>
    <style>
        .breadcrumb {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
        }
        .breadcrumb li {
            display: inline;
            margin-right: 5px;
        }
        .breadcrumb li:last-child {
            margin-right: 0;
        }
        .breadcrumb a {
            text-decoration: none;
            color: #333;
        }
        .breadcrumb a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <ul class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Category</a></li>
        <li><a href="#">Subcategory</a></li>
        <li>Current Page</li>
    </ul>
</body>
</html>

参考链接

CSS-Tricks: Breadcrumb Navigation

常见问题及解决方法

面包屑链接不正确：
- 原因：可能是链接路径设置错误或动态生成路径时出现问题。
- 解决方法：检查链接路径是否正确，确保动态生成路径的逻辑正确。

面包屑样式不一致：
- 原因：可能是CSS选择器或样式冲突。
- 解决方法：检查CSS选择器是否正确，确保样式没有被其他样式覆盖。
面包屑在移动设备上显示不友好：
- 原因：可能是响应式设计不足。
- 解决方法：使用媒体查询调整面包屑在不同屏幕尺寸下的显示样式，确保在移动设备上也能良好显示。

通过以上方法，可以有效地解决面包屑导航中常见的问题，提升用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

导航栏，没有换行，左边是调整大小的面包屑，右边是固定菜单

、、、

我正在试图找到一个解决方案来自动调整导航栏中面包屑的大小，只使用css而不使用js。然后，我尝试使用一个表格布局，将导航栏保持为一行，用户菜单和面包屑每个都是一个表格单元格。然而，只要没有足够的空间，用户菜单就会被推到屏幕的右侧，而不是缩短面包屑。下面是导航栏的行为方式：如果有足够的空间，面包屑

浏览 4提问于2016-05-06得票数 0

回答已采纳

1回答

breadcrumbs应该遵循URL结构吗？

、、

如果我要将商店的网址扁平到http://mystore.com/book1，我是否也应该在面包屑中反映这一点，以便它不再遵循cat1 > author1 > book1 请注意，我希望保留页面http:

浏览 1提问于2013-02-05得票数 2

回答已采纳

1回答

如何将必应地图菜单移动到屏幕的右侧

、、、

block; height: 0px; width: 0px; line-height: 0; font-size: 0px; clear: both;"></span>因此，我尝试了以下CSS

浏览 3提问于2016-03-22得票数 0

回答已采纳

2回答

创建“导航面包屑”

、、

我想知道怎样才能用CSS/CSS3和HTML获得它。如何做到这一点？正如您所看到的，我指出了3个导航面包屑。

浏览 0提问于2011-11-30得票数 3

回答已采纳

1回答

twitter引导程序breadcrumbs

、

href="#">Library</a> <span class="divider">/</span></li></ul> 然而，下面是我们在导航栏中创建下拉菜单的代码bootstrap_menu_child', :locals => { :submenu_item => submenu_

浏览 2提问于2012-09-26得票数 1

回答已采纳

3回答

是否可以使用ASP.NET站点地图来生成面包屑？

、、、、

我想我的ASP.NET网站有简单的菜单字符串，又名面包屑。我已经创建了网站地图与所有必要的元素，并注册到Web.config。

浏览 0提问于2009-02-16得票数 3

回答已采纳

2回答

导航面包屑:使用css和html

、

请检查此图像链接：我如何能够获得CSS/CSS 3和HTML。这是如何做到的呢？如果有可能的话，怎么用背景图像来完成呢？

浏览 1提问于2013-09-25得票数 1

回答已采纳

1回答

MVC3与面包屑导航

、、

我尝试使用MVC3创建类似于面包屑导航的内容。例如，当用户转到页面时，他有: Home (id = 1)、约(id = 2)和Hello (id = 3)链接。这些链接是我从数据库中得到的。

浏览 4提问于2011-08-24得票数 2

回答已采纳

1回答

如何将面包屑导航到“显示”页面上？

我在这个中做了面包屑导航。我使用片段作为目录用途，并使用“索引”和“显示”页面。面包屑导航在文章的“显示”页面上不起作用。是否可以在文章的“显示”页面上使用面包屑导航，以及如何使用？PS:问题是“索引”页面的导航元素不是自动在“显示”页面上创建的。

浏览 1提问于2018-06-20得票数 0

回答已采纳

1回答

ZF2导航:如何仅在面包屑导航中显示某些页面

、、、、

在ZendFramework2中，我使用ZendNavigation进行主导航和面包屑导航。我想让显示在每个页面上，但我不希望每个页面都出现在主导航中。因此，换句话说，我想要一些页面在面包屑导航中只显示。有办法做到这一点吗？也许可以在导航数组中设置一个选项？还是我需要创建两个不同的导航，并使用一个作为主导航和另一个作为面包屑？

浏览 1提问于2014-02-23得票数 1

回答已采纳

1回答

如何强制Breadcrumb使用主菜单以外的菜单？

、、

我试图迫使面包屑遵循菜单的结构，而不是主菜单。这个配置在哪里？

浏览 0提问于2011-08-05得票数 0

回答已采纳

1回答

Yii2面包屑未显示

、

下面是在我的视图中显示面包屑的代码 <?>但是当我将div类改为“容器流体”时，面包屑就不再显示了，我真的不知道为什么？我是Yii2的新手。对不起我的英语不好。谢谢。

浏览 1提问于2017-03-28得票数 1

回答已采纳

3回答

我如何使用导航-全局导航和隐藏面包屑在django管理应用程序。我已经找到了做这件事的方法，但它们似乎很麻烦，很麻烦。我在找一个干净可靠的解决方案。%}这不起作用，因为django管理中的模板，比如扩展change_list.html的base_site.html，将为面包屑定义内容解决方案1: CSS 使用外型块将下面的css添加到admin。这是可行的，但面包屑仍然会生成并显示在HTML源

浏览 2提问于2014-03-12得票数 4

1回答

博客上的面包屑(果园cms)

、、、、

(1.6版)我已经在顶部(默认)放置了一个菜单，一个放在内容之外(开始2级，1级显示)，另一个在顶部设置为面包屑.如果我去博客主页，一切都好。当我进入博客帖子时，右菜单和面包屑菜单都会松开博客上的“焦点”，并显示所有第一级菜单项(面包屑)或所有二级菜单项(备用菜单)。有什么解决办法可以让菜单知道它应该仅仅把博客文章当作博客主页而不是post url本身(一种规范的引用ur

浏览 1提问于2013-10-11得票数 1

回答已采纳

1回答

如何在zend框架中向面包屑添加动态更改的参数

、

我在zend应用程序中使用面包屑，问题是我必须使用动态变化的参数。在我的面包屑里应该是：管理酒店->费率->加费率我无法在我的面包屑中添加动态变化的酒店名称，我如何做到这一点，有什么方法可以做到吗

浏览 0提问于2011-05-04得票数 5

回答已采纳

1回答

如何在magento类别视图页面中显示工具栏/页导航，而不是顶部的面包屑？

、

我想要显示工具栏/页导航来代替面包屑，我已经删除了面包屑，但我无法显示工具栏/页导航来代替面包屑。如何做到这一点？我尝试过将xml块 <?

浏览 4提问于2013-05-03得票数 0

回答已采纳

3回答

如何让Google在搜索结果中显示到我的站点层次结构的链接？

、、、

我最近注意到，对于一些网站，谷歌链接到网站层次结构中的不同位置，而不仅仅是目标页面URL。例如，搜索"Malibu Rum饮料规则“将在Bar None饮料中获得一个条目，显示如下内容：">“标记之间的每个单独段都是可点击的，并带您到站点的该部分。我如何让谷歌为我的网站展示这个？

浏览 0提问于2010-07-09得票数 15

回答已采纳

1回答

引导Internet显示本地和远程

、

我正在使用引导CSS框架。我注意到了最奇怪的事。同样，本地代码和远程代码完全相同。我知道IE8的CSS支持不是很好。但应该是一样的，对吧？除了面包屑问题，我什么都能忍受。我真的需要修好它。我已经根据一个内联块错误的提示以及另一个St

浏览 2提问于2013-02-27得票数 1

1回答

当窗口缩小时，我如何使肚脐收缩？

、、

网站导航栏在正常视图下运行良好，但当我将其最小化时，它就会中断。当窗户缩小时，我如何使肚脐收缩？</li> </ul>Navbar CSS

浏览 5提问于2021-08-12得票数 1

回答已采纳

2回答

SharePoint 2013 CSS* -在全球导航元素周围移动*

、、

我希望能够在SP 2013中将全球导航栏移到“套件栏”的上方或下面。我知道我可以在母版页面中添加一个div，但是，我想只使用CSS。我是要使用#DeltaTopNavigation还是使用ms-面包屑-top？我将使用哪些CSS属性？

浏览 1提问于2014-07-30得票数 2

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css扁平化面包屑导航