Previously, I shared a simple horizontal navigation bar using the CSS and explained well how to create it. In this tutorial, I am just giving an example of another but beautiful horizontal navigation bar example using the CSS. This navigation bar having the pretty emojis 💖with each menu option which increases the look and feel of the menu bar.
HTML Code for Horizontal Navigation Bar
In the below clean HTML code, replace the #
with your links. Also, change the menu options name and emojis according to your needs.
<nav class="foxnav"> <ul class="foxnav-items"> <li class="foxnav-item"><a class="item-link" onclick="select(this)" href="#">🙋 Get Started</a></li> <li class="foxnav-item"><a class="item-link" onclick="select(this)" href="#">📖 Docs</a></li> <li class="foxnav-item"><a class="item-link" onclick="select(this)" href="#">📰 Blog</a></li> <li class="foxnav-item"><a class="item-link" onclick="select(this)" href="#">👨💻 Community</a></li> <div class="separator"></div> <li class="foxnav-item"><a class="item-link" onclick="select(this)" href="#">💖 Contribute</a></li> <div class="foxnav-indicator"></div> </ul> </nav>
CSS Code
.foxnav { max-width: 100%; padding: 0 2em; background-color: #FFF; border-radius: 0.3rem; box-shadow: 0 2px 2px #CCC; line-height: 4em; font-weight: bold; white-space: nowrap; overflow: auto; } .foxnav-items { margin: 0; padding: 0; list-style: none; display: inline-grid; grid-auto-flow: column; grid-gap: 1em; } .foxnav-items > *:nth-child(1) { grid-column: 1 / 2; } .foxnav-items > *:nth-child(2) { grid-column: 2 / 3; } .foxnav-items > *:nth-child(3) { grid-column: 3 / 4; } .foxnav-items > *:nth-child(4) { grid-column: 4 / 5; } .foxnav-items > *:nth-child(5) { grid-column: 5 / 6; } .foxnav-items > *:nth-child(6) { grid-column: 6 / 7; } .foxnav-item { padding: 0 0.75em; display: inline; grid-row: 1/1; } .foxnav-item.active .item-link { color: #2DA; } .item-link { color: #456; text-decoration: none; transition: color 256ms; } .item-link:hover { color: #297; text-decoration: undelrine; } .separator { width: 1px; height: 60%; margin: 10% 0; background-color: #CCC; align-self: center; } .foxnav-indicator { --index: 1; height: 3px; background-color: #2DA; border-radius: 3px 3px 0 0; grid-column: var(--index)/calc(var(--index) + 1) !important; grid-row: 1/1; align-self: end; } body { min-height: 100vh; background: #EEE; font-family: "Roboto", sans-serif; display: grid; place-items: center; } *, *:before, *:after { box-sizing: border-box; }
JavaScript Code
function select (link) { const item = link.parentNode const nav = item.parentNode const index = Array.prototype.indexOf.call(nav.children, item) const items = nav.querySelectorAll('.foxnav-item') const indicator = nav.querySelector('.foxnav-indicator') indicator.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)
Output