css 根据@wernull的想法重构WPD面包屑吧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 根据@wernull的想法重构WPD面包屑吧相关的知识，希望对你有一定的参考价值。
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}// alert('Hello world!');<ol id="breadcrumb-info" class="breadcrumbs">
<li>
<a href="/">Web Platform Project Management</a>
</li>
<li class="dropdown">
<a href="/skin">Skin</a>
<ul>
<li><a href="/analytics">Analytics</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/commentsextension">Comments Extension</a></li>
<li><a href="/community">Community</a></li>
<li><a href="/compatibilitytables">Compatibility Tables</a></li>
<li><a href="/content">Content</a></li>
<li><a href="/dabblet">Dabblet</a></li>
<li><a href="/ia">Information Architecture</a></li>
<li><a href="/infrastructure">Infrastructure</a></li>
<li><a href="/prmg">Project Management System</a></li>
<li><a href="/qaforums">Q&A Forums</a></li>
<li><a href="/skin" class="selected">Skin</a></li>
<li><a href="/tmpl">Templates</a></li>
</ul>
</li>
<li class="dropdown">
<a href="/skin/issues/find">Issues</a>
<ul>
<li><a href="/skin">Dashboard</a></li>
<li><a href="/skin/planning">Planning</a></li>
<li><a href="/skin/roadmap">Roadmap</a></li>
<li><a href="/skin/team">Team overview</a></li>
<li><a href="/skin/statistics">Statistics</a></li>
<li><a href="/skin/timeline">Timeline</a></li>
<li><a href="/skin/issues/new">Report an issue</a></li>
<li><a href="/skin/issues/find" class="selected">Issues</a></li>
<li><a href="/skin/settings">Settings</a></li>
<li><a href="/skin/release_center">Release center</a></li>
</ul>
</li>
<li class="dropdown">
<a href="/skin/issues/56">Bug report #56</a>
<ul>
<li><a href="/skin/issues/56" class="selected">Bug report #56 - Bug report pages - Problems with the fixed viewissue header</a></li>
<li><a href="/skin/issues/50">Bug report #50 - Steward logos are a single column in small screens</a></li>
<li><a href="/skin/issues/49">Bug report #49 - Homepage video should be a link instead on mobile devices</a></li>
<li><a href="/skin/issues/55">Bug report #55 - The "contents" aside element breaks the page layout on mobile devices</a></li>
<li><a href="/skin/issues/51">Bug report #51 - Media queries for TOC are not applying on iPhones</a></li>
<li><a href="/skin/issues/47">Bug report #47 - Homepage logo is too large on mobile devices</a></li>
<li><a href="/skin/issues/48">Bug report #48 - Homepage: No horizontal line between "Discussion" and "Blog" on mobile devices</a></li>
<li><a href="/skin/issues/54">Bug report #54 - Headings are too large on small screens</a></li>
<li><a href="/skin/issues/53">Bug report #53 - Boxes in Editor’s Guide overflow content area in iPhones</a></li>
<li><a href="/skin/issues/52">Bug report #52 - Editor’s Guide still highlights Docs in the main navigation</a></li>
</ul>
</li>
</ol>/**
* Refactor of the WPD breadcrumbs bar based on the idea by @wernull
*/
ol.breadcrumbs {
margin: 0 0 0 -1.1em;
padding: 0;
height: 1em;
text-transform: uppercase;
float: left;
}
ol.breadcrumbs:only-child {
float: none;
}
ol.breadcrumbs li {
list-style: none;
}
ol.breadcrumbs > li {
float:left;
position: relative;
margin: 0;
}
ol.breadcrumbs > li:first-child {
margin-left: 2em;
border-left: solid 2px #ded8c9;
}
ol.breadcrumbs > li > a,
ol.breadcrumbs > li:not(:last-child) > a::after {
border: 1px solid #ded8c9;
border-width: 1px 0;
background-color: #F0EBDD;
box-shadow: 0 1px hsla(0,0%,100%,.5) inset, 0 -1px hsla(0,0%,100%,.8) inset, -1px 0 hsla(0,0%,100%,.8) inset;
}
ol.breadcrumbs > li > a {
padding: .6em 1.5em .6em .4em;
margin-left: -1px;
}
ol.breadcrumbs > li:not(:last-child) > a::after,
ol.breadcrumbs > li:last-child > a {
border-radius: 1.2em;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
ol.breadcrumbs > li:not(:last-child) > a::after {
content: '';
position: absolute;
right: 2px;
top: 0;
bottom: 0;
z-index: 3;
padding: 1em .6em;
border: inherit;
border-right-width: 1px;
}
ol.breadcrumbs > li:last-child > a {
background-color: #f9f7f3;
border-right-width: 1px;
box-shadow: 0 1px hsla(0,0%,100%,.5) inset, 0 -1px hsla(0,0%,100%,.8) inset, -1px 0 white inset;
}
ol.breadcrumbs > li:nth-last-child(2) > a {
background-image: linear-gradient(to left, #f9f7f3 100%, transparent);
background-repeat: no-repeat;
background-size: 1em 100%;
background-position: right;
}
ol.breadcrumbs > li:first-child > a {
box-shadow: 0 1px #f7f1e0 inset, 0 -1px #f7f1e0 inset, 1px 0 #f7f1e0 inset;
}
ol.breadcrumbs > li:not(:last-child):hover > a:not(:last-child):after,
ol.breadcrumbs > li:not(:last-child).focus > a:not(:last-child):after,
ol.breadcrumbs > li:last-child:hover > a:not(:last-child),
ol.breadcrumbs > li:last-child.focus > a:not(:last-child) {
border-bottom-right-radius: 0;
border-bottom-color: transparent;
}
ol.breadcrumbs li a {
display: block;
}
ol.breadcrumbs > li:first-child > a {
padding-left: 1em;
}
ol.breadcrumbs > li > ul {
margin: -1px 0 0 -1.2em;
border-color: #ded8c9;
}
ol.breadcrumbs > li:hover > ul,
ol.breadcrumbs > li.focus > ul {
z-index: -1;
}
ol.breadcrumbs .dropdown > ul {
overflow-y: auto;
}
.toolbar .button,
.dropdown > a,
.dropdown > ul {
border: 1px solid #cfc6b0;
color: #74663e;
text-shadow: 0 1px 1px white;
}
.toolbar .button,
.dropdown > a {
padding: .6em .8em;
}
.toolbar .button img,
.dropdown > a img,
.dropdown > ul > li img {
vertical-align: -.3em;
margin-right: .3em;
}
.toolbar .button,
.dropdown > ul {
background-color: #F0EBDD;
background-repeat: no-repeat;
border-radius: .5em;
}
.toolbar > div {
float: right;
margin-left: .3em;
}
.dropdown {
display: inline-block;
margin-left: .3em;
position: relative;
z-index: 1;
}
.dropdown:hover,
.dropdown.focus {
z-index: 101;
}
.dropdown > a.button {
min-width: 4.4em;
padding-right: 2.7em;
}
/*
.dropdown > a {
position: relative;
z-index: 2;
}*/
.toolbar .dropdown > a:after {
content: '▾';
position: absolute;
right: 0;
top: .6em;
bottom: .6em;
padding: .4em 1em .4em .8em;
box-shadow: 1px 0 0 rgba(0,0,0,.2) inset, 2px 0 0 white inset;
font: 80%/1.05 serif;
}
.dropdown > a,
.dropdown > ul {
background-color: #F0EBDD;
}
.dropdown > ul {
position: absolute;
z-index: 1;
min-width: 0;
max-width: 0;
max-height: 0;
padding: 0;
margin: -1px 0 0 0;
border-width: 0;
border-radius: .5em;
border-top-left-radius: 0;
overflow: hidden;
box-shadow: 0 2px 2px -1px rgba(0,0,0,.1);
list-style: none;
text-transform: uppercase;
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
}
.dropdown > ul > li {
margin: 0;
list-style: none;
white-space: nowrap;
border-width: 1px 0;
border-style: solid;
border-color: hsla(0,0%,100%,.5) transparent rgba(0,0,0,.1);
}
.dropdown > ul > li:first-child {
border-top: 0;
}
.dropdown > ul > li:last-child {
border-bottom: 0;
}
.dropdown li > a {
display: block;
padding: .5em;
overflow: hidden;
text-overflow: ellipsis;
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
.dropdown ul > li > a:hover,
.dropdown ul > li > a:focus {
position: relative;
background: #4e408a;
color: white;
text-shadow: 0 -1px 2px black;
border-radius: .2em;
box-shadow: 0 0 0 2px #4e408a;
}
.dropdown:hover > ul,
.dropdown > a:focus + ul,
.dropdown.focus > ul {
min-width: 100%;
max-width: 25em;
max-height: 30em;
padding: .6em;
border-width: 1px;
}
.dropdown:hover > a.button,
.dropdown > a.button:focus,
.dropdown.focus > a.button {
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropdown:hover > a.button:not(:active),
.dropdown.focus > a.button:not(:active) {
box-shadow: none;
}以上是关于css 根据@wernull的想法重构WPD面包屑吧的主要内容，如果未能解决你的问题，请参考以下文章