简单的 CSS 面包屑导航如何工作

发布于 2024-09-12 19:46:47 字数 865 浏览 9 评论 0原文

我试图模仿这个关于创建一个简单的苹果主题面包屑的教程: http:// www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx

即使在查看更新的示例并从此处下载源代码之后: http://www.lostsockdesign.com.au/apple-breadcrumb/index.html html

我不知道如何只有 HTML 和 CSS“知道”当前是哪个页面。

显然,如果您的浏览器指向“http://www.lostsockdesign.com .au/apple-breadcrumb/index2.html”浏览器知道您在这个页面上,但是 HTML 或 CSS 的哪一部分指定面包屑应该忽略后续页面的图形,并淡出当前页面图形?

抱歉,这个简单的问题.. xD

更新:

好的,现在问题已经解决了,有人可以建议最简单的方法来实现脚本与此图一起工作吗?

I am trying to imitate this tutorial about creating a simple Apple-themed breadcrumb found here:
http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx

Even after looking at the updated example and downloading the source code from here:
http://www.lostsockdesign.com.au/apple-breadcrumb/index.html

I cannot tell how only the HTML and CSS "knows" which page it is currently.

Obviously, if your browser is pointed to "http://www.lostsockdesign.com.au/apple-breadcrumb/index2.html" the browser knows you are on this page, but what part of the HTML or CSS specifies that the breadcrumb should leave out the graphics for the subsequent pages, and fade out the current page graphic?

Sorry for the simple question.. xD

UPDATE:

OK, now that that's solved, anyone have a suggestion for the simplest way to effect a script to work with this tut?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

捂风挽笑 2024-09-19 19:46:47

事实并非如此。

该教程只是用于样式设置,而不是用于生成面包屑;您必须自己通过某种脚本或手动完成该部分。

回复:更新

面包屑本质上是您网站树上的当前路径。从站点地图开始(不是 XML、SEO 意义上的,而是站点的实际页面结构。例如:

Home
JavaScript
    Vanilla
        Gallery
        Lightbox
        Dice Roller
    jQuery
        Cycle
        Click Tracker
Blog
    RSS
    Web Development
        Object Oriented CSS
        Currying Functions in JavaScript
        CSS Reset Files
    Gaming
        Review: Super Mario Bros.
        Camping Strategy in Oregon Trail
        So Your Mom Wants to Play Wii Golf
Portfolio
    DEA Website
    We <3 Kittens
    Nobody Likes IE6

因此,如果您在“CSS 重置文件”页面上,您可以从(不是显示)根目录,并显示您在面包屑中找到的每个级别,结果是:

My Site -> Blog -> CSS -> CSS Reset Files

此数据可以存储在数据库中并使用您选择的服务器端语言提取,也可以使用服务器根据目录结构自动生成端或客户端脚本,或者您可以将它们手动编码到每个页面中,

具体操作方式完全取决于您,但这是基本概念。

It doesn't.

That tutorial is simply for styling, not for generating the breadcrumbs; you have to do that part yourself, through some sort of scripting or manually.

Re: Update

Breadcrumbs are essentially the current path down the tree that is your site. Start with a site map (not in the XML, SEO sense, but in the actual page structure of your site. For instance:

Home
JavaScript
    Vanilla
        Gallery
        Lightbox
        Dice Roller
    jQuery
        Cycle
        Click Tracker
Blog
    RSS
    Web Development
        Object Oriented CSS
        Currying Functions in JavaScript
        CSS Reset Files
    Gaming
        Review: Super Mario Bros.
        Camping Strategy in Oregon Trail
        So Your Mom Wants to Play Wii Golf
Portfolio
    DEA Website
    We <3 Kittens
    Nobody Likes IE6

So, if you're on the page "CSS Reset Files", you follow the tree from the (not shown) root, and show every level you find in the breadcrumbs, resulting in this:

My Site -> Blog -> CSS -> CSS Reset Files

This data can be stored in the database and pulled out using the server side language of your choice, or it could be automatically generated based on directory structure using server-side or client-side scripts, or you could manually code them into each of your pages.

How you do it is entirely up to you, but this is the basic concept.

清风挽心 2024-09-19 19:46:47

您不使用 HTML 和 CSS(CSS3 有一些像这样的有限功能,但我认为它们还没有完全准备好迎接黄金时间)来确定您所在的页面。通常,服务器端软件(例如 CMS)用于输出面包屑,并附有 CSS 类名称,指示哪个页面是当前页面等。

You don't use HTML and CSS (CSS3 has some limited features like this, but I don't think they're quite ready for prime time yet) to figure out what page you are on. Usually server side software (such as a CMS) is used to output the breadcrumbs, complete with CSS class names that indicate which page is the current one etc.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文