tab.tab
ul.tab-items
li.tab-item
a.item-link(onclick="select(this)" href="#")
| 🙋 Get Started
li.tab-item
a.item-link(onclick="select(this)" href="#")
| 📖 Docs
li.tab-item
a.item-link(onclick="select(this)" href="#")
| 📰 Blog
li.tab-item
a.item-link(onclick="select(this)" href="#")
| 👨💻 Community
.separator
li.tab-item
a.item-link(onclick="select(this)" href="#")
| 💖 Contribute
.tab-indicator
View Compiled
.tab
max-width: 100%
padding: 0 2em
background-color: #FFF
border-radius: .3rem
box-shadow: 0 2px 2px #CCC
line-height: 4em
font-weight: bold
white-space: nowrap
overflow: auto
.tab-items
--index: 1
margin: 0
padding: 0
list-style: none
display: inline-grid
grid-auto-flow: column
grid-gap: 1em
@for $i from 1 through 6
> :nth-child(#{$i})
grid-column: #{$i} / #{$i + 1}
.tab-item
display: inline
grid-row: 1 / 2
&.active .item-link
color: #2DA
.item-link
padding: 0 .75em
color: #456
text-decoration: none
display: inline-block
transition: color 256ms
&:hover
color: #297
text-decoration: undelrine
.separator
width: 1px
height: 60%
margin: 10% 0
background-color: #CCC
align-self: center
.tab-indicator
height: 3px
background-color: #2DA
border-radius: 3px 3px 0 0
grid-column: var(--index) / span 1 !important
grid-row: 1 / 2
align-self: end
transition: all 300ms
// Page Layout 🚩
body
min-height: 100vh
background: #EEE
font-family: 'Roboto', sans-serif
display: grid
place-items: center
*, *:before, *:after
box-sizing: border-box
View Compiled
function select (link) {
const item = link.parentNode
const tabs = item.parentNode
const index = Array.prototype.indexOf.call(tabs.children, item)
const items = tabs.querySelectorAll('.tab-item')
tabs.style.setProperty('--index', index + 1)
items.forEach(item => item.classList.remove('active'))
item.classList.add('active')
}
const items = document.querySelectorAll('.item-link')
const randomItem = items[Math.round(Math.random() * (items.length - 1))]
select(randomItem)
This Pen doesn't use any external JavaScript resources.