Hello everyone! Today, let’s dive into the creation of a simple 9 Dot Navigation Menu using HTML, CSS, and JavaScript. We’re keeping things easy and straightforward to add a neat navigation feature to your websites. Check Updated 9 Dot Navigation Menu.
In this tutorial, we’re focusing on building a user-friendly menu with just the right touch of interactivity. Whether you’re new to coding or a seasoned developer, this is a great opportunity to learn and implement a stylish navigation menu.
Why a 9 Dot Navigation Menu, you ask? Well, it’s a sleek and popular design that brings a modern touch to your website’s navigation. We’ll be using HTML for structure, CSS for styling, and a bit of JavaScript for that interactive twist.
Join me in this coding journey as we create a clean and functional navigation menu. Let’s explore HTML, CSS, and JavaScript together to make your websites more user-friendly. Ready to spice up your web projects?
HTML :
This HTML code creates a 9-dot navigation menu with icons using the Ionicons library. Each dot corresponds to a different icon (e.g., camera, diamond, chat bubble, etc.). The navigation menu is enclosed in a div with the class “main,” containing individual span elements for each icon. The style attribute with custom properties (–i, –x, –y) is used for positioning. Additionally, there is a close button represented by an Ionicon at the bottom. The script tags include the Ionicons library, and a custom JavaScript file (“script.js”) is linked to handle any additional functionality.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>9 Dot Navigation Menu | CodingStella</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="main">
<div class="navigation">
<span style="--i:0;--x:-1;--y:0;">
<ion-icon name="camera-outline"></ion-icon>
</span>
<span style="--i:1;--x:1;--y:0;">
<ion-icon name="diamond-outline"></ion-icon>
</span>
<span style="--i:2;--x:0;--y:-1;">
<ion-icon name="chatbubble-outline"></ion-icon>
</span>
<span style="--i:3;--x:0;--y:1;">
<ion-icon name="alarm-outline"></ion-icon>
</span>
<span style="--i:4;--x:-1;--y:1;">
<ion-icon name="game-controller-outline"></ion-icon>
</span>
<span style="--i:5;--x:-1;--y:-1;">
<ion-icon name="moon-outline"></ion-icon>
</span>
<span style="--i:6;--x:1;--y:-1;">
<ion-icon name="water-outline"></ion-icon>
</span>
<span style="--i:7;--x:1;--y:1;">
<ion-icon name="time-outline"></ion-icon>
</span>
</div>
<div class="close">
<ion-icon name="close-outline"></ion-icon>
</div>
</div>
<!-- partial -->
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js'></script>
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js'></script><script src="./script.js"></script>
</body>
</html>
CSS :
This CSS code styles a 9-dot navigation menu with animated icons. The dots represent icons, and clicking the navigation element expands the dots into a larger size, revealing icons. The navigation dots have a background color of white and transition in size and position. When active, they expand, change background color, and reveal Ionicons. The close button appears with a delay, and its icon scales in when the navigation is active, providing a visually appealing interaction. The overall design is dark-themed with green accent colors.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #262433;
}
.main {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 170px;
height: 170px;
}
.main .navigation {
position: relative;
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.main .navigation span {
position: absolute;
width: 7px;
height: 7px;
background: #fff;
transform: translate(calc(14px * var(--x)), calc(14px * var(--y)));
transition: transform 0.5s, width 0.5s, height 0.5s, background 0.5s;
transition-delay: calc(0.1s * var(--i));
display: flex;
justify-content: center;
align-items: center;
}
.main .navigation.active span {
width: 45px;
height: 45px;
background: #37384f;
transform: translate(calc(60px * var(--x)), calc(60px * var(--y)));
}
.main .navigation span ion-icon {
transition: 0.5s;
font-size: 0em;
color: #fff;
}
.main .navigation.active span ion-icon {
font-size: 1.35em;
}
.main .navigation.active span:hover ion-icon {
color: #2dfc52;
filter: drop-shadow(0 0 2px #2dfc52) drop-shadow(0 0 5px #2dfc52)
drop-shadow(0 0 15px #2dfc52);
}
.close {
position: absolute;
width: 7px;
height: 7px;
background: #fff;
transition: 0.5s;
transition-delay: 0.4s;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
.main .navigation.active ~ .close {
width: 40px;
height: 40px;
pointer-events: initial;
transition-delay: 0.8s;
background: #2dfc52;
}
.main .navigation ~ .close ion-icon {
font-size: 2em;
scale: 0;
color: #10131c;
transition: 0.5s;
}
.main .navigation.active ~ .close ion-icon {
scale: 1;
transition-delay: 1s;
}
JavaScript:
This JavaScript code adds interactivity to the 9-dot navigation menu. Clicking the navigation element adds the “active” class, triggering the expansion of dots and revealing icons. Clicking the close button removes the “active” class, restoring the initial state. This functionality is based on manipulating the CSS classes for visual effects.
let navigation = document.querySelector(".navigation");
let close = document.querySelector(".close");
navigation.onclick = function () {
navigation.classList.add("active");
};
close.onclick = function () {
navigation.classList.remove("active");
};
In summary, you’ve successfully created a 9 Dot Navigation Menu for your website using HTML, CSS, and a bit of JavaScript. This simple and beginner-friendly guide has empowered you to enhance your site’s aesthetics and improve user navigation.
If your project encounters any bumps in the road, don’t be discouraged. The source code is within reach. Just click Download to start your coding adventure. Happy coding!
1 Comment
Pingback: How to make a New 9 Dot Navigation Menu in HTML CSS & JavaScript | Coding Stella