Implementing a Bottom Navigation Bar with Vector Icons, CSS Animations, and JavaScript
This article walks through creating a responsive bottom navigation bar using semantic HTML, CSS flexbox layouts, Alibaba Iconfont vector icons, custom active-state styles, blur effects, a moving background circle, and JavaScript event handling to achieve smooth animated transitions.
The tutorial begins by setting up a simple semantic <div class="nav">...</div> container inside the <body> and applying a CSS reset that removes default margins, paddings, and list styles, while enabling box-sizing: border-box and flexbox centering for the page.
Next, Alibaba Iconfont vector icons are imported via a stylesheet link and added to the navigation as an unordered list of <li> items, each containing a <span><i class="iconfont ..."> element. Five icons (home, comment, code, box, Gitee) are included, with the first item marked as class="active" .
CSS styles for the navigation bar are defined: the .nav container is given a fixed size, white background, rounded corners, and flexbox centering. The .nav ul is set to a horizontal flex layout, and each .nav ul li receives equal width via flex: 1 , a height, relative positioning, and a higher z-index .
Individual span elements inside the list items are styled as 55 px circles with centered content, a pointer cursor, and a transition for hover effects. The nested i icons receive a dark color and a font size of 1.5 em.
Active-state styling is added: the active span gets an orange background that moves upward with transform: translateY(-27px) and a transition delay, while the active i icon changes to white. A pseudo‑element ::before on the span creates a blurred orange circle that fades in on activation.
A background circle element .indicator is placed after the ul . It is absolutely positioned, sized to 70 px, given a matching background color, rounded shape, and a transition. Two pseudo‑elements ( ::before and ::after ) draw left and right semi‑arcs using box‑shadow to form a decorative half‑circle.
Animation positioning is handled with :nth-child() selectors: each .nav li:nth-child(n).active ~ .indicator rule translates the .indicator horizontally by calc(70px * (n‑1)) , aligning the circle under the active item.
const lis = document.querySelectorAll('.nav li');
lis.forEach(li => li.addEventListener('click', function () {
lis.forEach(item => item.classList.remove('active'));
this.classList.add('active');
}));The JavaScript iterates over all list items, removes any existing active class on click, and adds it to the clicked element, triggering the CSS transitions defined earlier.
Finally, the article shows a GIF demonstration of the navigation bar in action and provides a link to the full source code on Gitee.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.