<h1>Navigation wizard example with equal width steps and flexible width of the last step</h1>
<div class="container">
<ul class="wizard">
<li class="wizard__step">
<a href="#1" class="wizard__step-link">
This is the first step
</a>
</li>
<li class="wizard__step">
<a href="#2" class="wizard__step-link">
This is the second step
</a>
</li>
<li class="wizard__step">
<a href="#3" class="wizard__step-link">
This is the third step
</a>
</li>
<li class="wizard__step">
<a href="#4" class="wizard__step-link">
This is the fourth step
</a>
</li>
<li class="wizard__step">
<a href="#5" class="wizard__step-link">
This is the last step with the flexible width
</a>
</li>
</ul>
</div>
<p style="text-align:center">Read more: <a href="https://auralinna.blog/post/2018/navigation-wizard-example" target="_blank">Navigation wizard example with equal width steps and flexible width of the last step</a></p>
html, body {
color: #333;
font-size: 16px;
line-height: 20px;
}
body {
margin: 20px;
}
h1 {
line-height: 1.2;
margin-bottom: 35px;
text-align: center;
}
.container {
background: #eee;
margin: 0 auto 35px;
max-width: 920px;
padding: 20px;
}
/* Actual code example */
.wizard {
counter-reset: stepNo;
display: flex;
margin: 0;
padding: 0;
}
.wizard__step {
flex: 1 0 0;
list-style: none;
padding: 0 2% 0 0;
position: relative;
&::before {
border-top: 3px solid #333;
content: "";
left: 0;
position: absolute;
right: 0;
top: 25px;
}
&:last-child {
border: 0;
flex: 0 0 auto;
margin: 0;
padding: 0;
&::before {
border: 0 none;
}
}
}
@for $i from 2 through 10 {
.wizard__step:last-child:nth-child(#{$i}) {
max-width: 100% / $i;
}
}
.wizard__step-link {
color: #333;
display: block;
font-size: 1rem;
font-weight: bold;
position: relative;
text-decoration: none;
z-index: 10;
&:before {
background: #333;
color: #fff;
counter-increment: stepNo;
content: counter(stepNo) ".";
display: block;
font-size: 2rem;
height: 50px;
line-height: 50px;
margin-bottom: 12px;
text-align: center;
width: 50px;
}
&:hover,
&:focus {
color: #000;
text-decoration: none;
&:before {
background: #fff;
border: 1px solid #333;
color: #333;
}
}
}
View Compiled
/** This JS is just for the demo to show dynamic width of last step */
const lastStepTyper = () => {
const delay = 200;
const lastStep = document.querySelector('.wizard__step:last-child .wizard__step-link')
const txt = lastStep.text.trim().split('')
lastStep.text = ''
for (i = 0; i < txt.length; i++) {
setTimeout(() => {
lastStep.append(txt.shift())
}, delay * i)
}
setTimeout(() => {
lastStepTyper()
}, delay * i + 1000)
}
lastStepTyper()
View Compiled
This Pen doesn't use any external JavaScript resources.