<ul class="PrimaryNav with-indicator">
<li class="Nav-item"><a href="#">Home</a></li>
<li class="Nav-item"><a href="#">About</a></li>
<li class="Nav-item is-active"><a href="#">Writing</a></li>
<li class="Nav-item"><a href="#">Clients</a></li>
<li class="Nav-item"><a href="#">Contact</a></li>
</ul>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
// How many menu items do we have?
$menu-items: 5;
// Colours
$background-color: #121212;
$indicator-color: #e82d00;
// Transition Speed
$transition-speed: 1.3s;
// Dynamic Variables
$width: (100/$menu-items) * 1%; // makes each item the right size
$menu-items-loop-offset: $menu-items - 1; // the number of items in the menu
// ======================================================
// Step 1 - Making a Fixed Width Navigation
// ======================================================
.PrimaryNav {
@extend %cf; // clear the floats
list-style: none;
margin: 50px auto;
max-width: 720px; // As all measurements are using % this could be a flexible value.
padding: 0;
width: 100%;
}
.Nav-item {
background: #fff;
display: block;
float: left;
margin: 0;
padding: 0;
width: $width; //dynamic width
text-align: center;
&:first-child {
border-radius: 3px 0 0 3px;
}
&:last-child {
border-radius: 0 3px 3px 0;
}
&.is-active a {
color: $indicator-color;
}
a {
color: $background-color;
display: block;
padding-top: 20px;
padding-bottom: 20px;
text-decoration: none;
&:hover {
color: $indicator-color;
}
}
}
// ======================================================
// Step 2 - Making the pseudo indicator
// ======================================================
.with-indicator {
position: relative;// the menu is "relative" to the absolute position last-child pseudo elements.
z-index: 0;
.Nav-item {
// ======================================================
// Step 2.1 - Making the indicator with the pseudo element.
// ======================================================
&:last-child {
&:before, &:after {
content: '';
display: block;
position: absolute;
transition: left #{$transition-speed} ease;
}
// Making the top CSS Triangle - learn more: https://css-tricks.com/animation-css-triangles-work/
&:before {
border: 6px solid transparent;
border-top-color: $indicator-color;
width: 0;
height: 0;
top: 0;
left: ($width/2);
margin-left: -3px;
}
&:after {
background: $indicator-color;
top: -6px;
bottom: -6px;
left: 0;
width: $width;
z-index: -1;
}
}
}
}
// ======================================================
// The usual Global resets
// ======================================================
*, *:before, *:after {
box-sizing: border-box; // learn more: https://css-tricks.com/box-sizing/
}
// Extending the https://css-tricks.com/micro-clearfix/
%cf:before,
%cf:after {
content: " ";
display: table;
}
%cf:after {
clear: both;
}
// Presentation Styling
html {
background-color: $background-color;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
}
View Compiled
// Step 2 - with working indicator
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.