我有一个简单的breadcrumb导航，JQuery可以为div中的每个链接分配一个递减的z-index像上面的代码？目前打印没有z-index的链接，使它们看起来很糟。
我想要的外观：
如何目前看起来：
>
CSS
CSS中唯一真正的关键玩家是位置和左边距，但这里是整个：）
#crumbs a { display：inline-block; position：relative; padding：.5em 1em; background：＃e3e3e3; border：1px solid＃c9c9c9; box-shadow：inset 0px 1px 0px＃f6f6f6; border-radius：1em 2em 2em 1em; margin-left：-.6em; }解决方案
状态更新： 如果 CSS 和 JavaScript 已停用，则后退适用于 breadcrumbs 。
参考： 制作带箭头的版本>。
$ b b $ b额外
<div id="crumbs"> <a href="#" style="z-index: 4;">Workplace Standards</a> > <a href="#" style="z-index: 3;">Resources</a> > <a href="#" style="z-index: 2;">Guides</a> > <a href="#" style="z-index: 1;">Public holidays</a> </div>I have a simple breadcrumb nav, can JQuery assign a descending z-index to each link in the div like the code above? Currently prints the links with no z-index so they look bad.
How I want it to look:
How it currently looks:
CSS
The only real key players in the CSS are the position and margin-left, but here it is in its entirety :)
#crumbs a { display: inline-block; position: relative; padding: .5em 1em; background: #e3e3e3; border: 1px solid #c9c9c9; box-shadow: inset 0px 1px 0px #f6f6f6; border-radius: 1em 2em 2em 1em; margin-left: -.6em; }解决方案
Status Update: If CSS and JavaScript are disabled then proper fallback for breadcrumbs will occur.
Reference: jsFiddle
Screenshot of CSS and JavaScript Enabled:
Screenshot of CSS and JavaScript Disabled:
Extra: If a CSS3 version is acceptable, I was inspired to make a version with Arrows at this SO Answer.
EDIT:
Extra jsFiddle with alternate style by Simon Sarris.
更多推荐
逻辑下降z
发布评论