响应箭头面包屑导航 [英] Responsive Arrow Breadcrumb Navigation
本文介绍了响应箭头面包屑导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我有一个breadcrumb nav是箭头间隔开。棘手的事情是我需要它响应。我认为我是密切使用vh和vw，但我遇到的问题是白色的spacer不响应像之前的箭头。有什么建议么？还是有更好的办法来处理呢？我试过一堆东西，但没有一个似乎工作。任何帮助是极大的赞赏。包含小提琴
So I have a breadcrumb nav that are arrows spaced apart. The tricky thing is I need it to be responsive. I think I am close messing around using vh and vw, but the issue I am running into is the white spacer not responding like the arrow before it. Any suggestions? Or is there a better way to handle it? I have tried a bunch of things but none seem to work. Any help is greatly appreciated. Fiddle is included
https://jsfiddle.net/8v9ctam0/
/* ----------------------
General Styling
------------------------*/
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cd-breadcrumb, .cd-multi-steps {
padding: 0.5em 1em;
margin: 1em auto;
background-color: #edeff0;
border-radius: .25em;
}
.cd-breadcrumb:after, .cd-multi-steps:after {
content: "";
display: table;
clear: both;
}
.cd-breadcrumb li, .cd-multi-steps li {
display: inline-block;
float: left;
margin: 0.5em 0;
}
.cd-breadcrumb li::after, .cd-multi-steps li::after {
/* this is the separator between items */
display: inline-block;
content: '\00bb';
margin: 0 .6em;
color: #959fa5;
}
.cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {
/* hide separator after the last item */
display: none;
}
.cd-breadcrumb li > *, .cd-multi-steps li > * {
/* single step */
display: inline-block;
font-size: 1.0vw;
color: #2c3f4c;
}
.cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {
/* selected step */
color: #96c03d;
}
.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {
/* steps already visited */
color: #96c03d;
}
.cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after {
/* replace the default arrow separator with a custom icon */
content: '';
height: 16px;
width: 16px;
background: url(../img/cd-custom-separator.svg) no-repeat center center;
vertical-align: middle;
}
.cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before {
/* add a custom icon before each item */
content: '';
display: inline-block;
height: 20px;
width: 20px;
margin-right: .4em;
margin-top: -2px;
background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
vertical-align: middle;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
/* change custom icon using image sprites */
background-position: -20px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
background-position: -40px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
background-position: -60px 0;
}
.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before {
/* change custom icon for the current item */
background-position: 0 -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
background-position: -20px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
background-position: -40px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
background-position: -60px -20px;
}
@media only screen and (min-width: 768px) {
.cd-breadcrumb, .cd-multi-steps {
padding: 0 1.2em;
}
.cd-breadcrumb li, .cd-multi-steps li {
margin: 1.2em 0;
}
.cd-breadcrumb li::after, .cd-multi-steps li::after {
margin: 0 1em;
}
}
/* --------------------------------
Triangle breadcrumb
-------------------------------- */
.cd-breadcrumb.triangle {
/* reset basic style */
background-color: transparent;
padding: 0;
}
.cd-breadcrumb.triangle li {
position: relative;
padding: 0;
margin: 4px 4px 4px 4px;
}
.checkout {
max-height: 5.0vh;
line-height: 2.5vh;
}
.cd-breadcrumb.triangle li strong {
display: block;
}
.cd-breadcrumb.triangle li:last-of-type {
margin-right: 0;
}
.cd-breadcrumb.triangle li > * {
position: relative;
padding: 1em .8em 1em 2.5em;
color: #2c3f4c;
background-color: #edeff0;
/* the border color is used to style its ::after pseudo-element */
border-color: #edeff0;
}
.cd-breadcrumb.triangle li.current > * {
/* selected step */
color: #ffffff;
background-color: #F00;
border-color: #F00;
}
.cd-breadcrumb.triangle li:first-of-type > * {
padding-left: 1.6em;
}
.cd-breadcrumb.triangle li:last-of-type > * {
padding-right: 1.6em;
}
.no-touch .cd-breadcrumb.triangle a:hover {
/* steps already visited */
color: #ffffff;
background-color: #2c3f4c;
border-color: #2c3f4c;
}
.cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
/*
li > *::after is the colored triangle after each item
li::after is the white separator between two items
*/
content: '';
position: absolute;
top: 0;
left: 100%;
content: '';
height: 0;
width: 0;
/* 48px is the height of the <a> element */
border: 2.1em solid transparent;
border-right-width: 0;
border-left-width: 0.8em;
}
.cd-breadcrumb.triangle li::after {
/* this is the white separator between two items */
z-index: 1;
-webkit-transform: translateX(8px);
-moz-transform: translateX(8px);
-ms-transform: translateX(8px);
-o-transform: translateX(8px);
transform: translateX(8px);
border-left-color: #ffffff;
/* reset style */
margin: 0;
}
.cd-breadcrumb.triangle li > *::after {
/* this is the colored triangle after each element */
z-index: 2;
border-left-color: inherit;
}
.cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after {
/* hide the triangle after the last step */
display: none;
}
.cd-breadcrumb.triangle.custom-separator li::after {
/* reset style */
background-image: none;
}
.cd-breadcrumb.triangle.custom-icons li::after, .cd-breadcrumb.triangle.custom-icons li > *::after {
/* 50px is the height of the <a> element */
border-top-width: 25px;
border-bottom-width: 25px;
}
@-moz-document url-prefix() {
.cd-breadcrumb.triangle li::after,
.cd-breadcrumb.triangle li > *::after {
/* fix a bug on Firefix - tooth edge on css triangle */
border-left-style: dashed;
}
}
<body>
<section>
<nav>
<ol class="cd-breadcrumb triangle">
<li><a href="#0" class="checkout"><strong>Checkout</strong></a></li>
<li class="current"><a href="#0"><strong>Step 1:</strong>Account</a></li>
<li><a href="#0"><strong>Step 2:</strong>Shipping</a></li>
<li><a href="#0"><strong>Step 3:</strong>Payment & Place Order</a></li>
<li><a href="#0"><strong>Step 4:</strong>Confirmation</a></li>
</ol>
</nav>
</section>
</body>
推荐答案
您可以使用线性渐变：
在全页模式下运行代码片段，调整窗口大小：
或在 http://codepen.io/gcyrillus/pen/aNNdyq
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ol {
display:table;/* to fit to content */
overflow:hidden;/* will hide bit arrow of last li if negative margin-right set there */
white-space:nowrap;/* keep inline-block li on a single line */
font-size:0.65em;
}
ol li {
display:inline-block;/* be an inline boxe */
margin-top:1em; /* get some air , optionnal */
margin-right:-1.3em;/* overlay them to reduce white gap in between. tune in em to your needs */
line-height:1.2em; /* tune to your needs */
padding:1em 2em;/* should be fine with gradient bg */
background:linear-gradient(70deg, transparent 1em, lightgray 1em, lightgray 50%, transparent 50%) top left no-repeat,
linear-gradient(-110deg, transparent 1em, lightgray 1em, lightgray 55%, transparent 55%) top no-repeat,
linear-gradient(-70deg, transparent 1em, lightgray 1em, lightgray 50%, transparent 50%) bottom left no-repeat,
linear-gradient(110deg, transparent 1em, lightgray 1em, lightgray 55%, transparent 55%) bottom no-repeat;
/*bg arrow color is lightgray, to chanage it, change each one of theme in gradient */
background-size:100% 51.5% ;/* resize each piece a gradient to draw the shape */
}
ol li.current, ol li:hover {
background:linear-gradient(70deg, transparent 1em, #FF0000 1em, #FF0000 50%, transparent 50%) top left no-repeat,
linear-gradient(-110deg, transparent 1em, #FF0000 1em, #FF0000 55%, transparent 55%) top no-repeat,
linear-gradient(-70deg, transparent 1em, #FF0000 1em, #FF0000 50%, transparent 50%) bottom left no-repeat,
linear-gradient(110deg, transparent 1em, #FF0000 1em, #FF0000 55%, transparent 55%) bottom no-repeat;
/* bg arrow color is now red */
background-size:100% 51.5% ;
}
ol li.current a, ol li:hover a {
color:white;
}
a {
text-decoration:none;
color:orange;
text-shadow:1px 1px 1px black,-1px -1px 1px gray;
font-variant:small-caps;
font-weight:bold;
transition:0.2s;
}
@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}
<body>
<section>
<nav>
<ol class="cd-breadcrumb triangle">
<li><a href="#0" class="checkout"><strong>Checkout</strong></a></li>
<li class="current"><a href="#0"><strong>Step 1:</strong>Account</a></li>
<li><a href="#0"><strong>Step 2:</strong>Shipping</a></li>
<li><a href="#0"><strong>Step 3:</strong>Payment & Place Order</a></li>
<li><a href="#0"><strong>Step 4:</strong>Confirmation</a></li>
</ol>
</nav>
</section>
</body>
这篇关于响应箭头面包屑导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
