Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
9 Dot Menu using HTML and CSS
The 9 dots menu is a grid of nine clickable icons arranged in a 3x3 layout. When clicked, the menu expands to reveal individual icons that provide quick access to different functions. In this tutorial, we will learn how to create a 9 Dot Menu using HTML, CSS, and a little bit of JavaScript.
Syntax
.navigation {
position: relative;
width: 70px;
height: 70px;
transition: width 0.5s, height 0.5s;
}
.navigation.active {
width: 200px;
height: 200px;
}
Technology Stack
- HTML Creates the structure of the menu using div and span elements
- CSS Provides styling, positioning, and animations for the menu
- Ionicons Icon library for displaying various menu icons
- JavaScript Handles the toggle functionality for expanding/collapsing the menu
Example: Complete 9 Dot Menu
The following example creates a fully functional 9 dot menu with expand/collapse animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>9 Dots Menu</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #10131c;
color: #fff;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
}
h1 {
text-align: center;
font-size: 2.5rem;
padding: 20px;
}
section {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.navigation {
position: relative;
width: 70px;
height: 70px;
background: #212532;
border-radius: 10px;
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
transition: 0.5s;
transition-delay: 0.8s;
}
.navigation.active {
width: 200px;
height: 200px;
transition-delay: 0s;
}
.navigation span {
position: absolute;
width: 7px;
height: 7px;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 50%;
transform: translate(calc(12px * var(--x)), calc(12px * var(--y)));
transition: transform 0.5s, width 0.5s, height 0.5s, background 0.5s;
transition-delay: calc(0.1s * var(--i));
}
.navigation.active span {
width: 45px;
height: 45px;
background: #333849;
transform: translate(calc(60px * var(--x)), calc(60px * var(--y)));
}
.navigation span ion-icon {
transition: 0.5s;
font-size: 0em;
}
.navigation.active span ion-icon {
font-size: 1.35em;
color: #fff;
}
.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);
}
footer {
text-align: center;
padding: 20px;
color: aliceblue;
}
</style>
</head>
<body>
<h1>9 Dots Menu</h1>
<section>
<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="wifi-outline"></ion-icon>
</span>
<span style="--i:2;--x:0;--y:-1">
<ion-icon name="chatbubble-ellipses-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="airplane-outline"></ion-icon>
</span>
<span style="--i:5;--x:-1;--y:-1">
<ion-icon name="power-outline"></ion-icon>
</span>
<span style="--i:6;--x:0;--y:0">
<ion-icon name="notifications-outline"></ion-icon>
</span>
<span style="--i:7;--x:-1;--y:1">
<ion-icon name="bluetooth-outline"></ion-icon>
</span>
<span style="--i:8;--x:1;--y:-1">
<ion-icon name="moon-outline"></ion-icon>
</span>
</div>
</section>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script>
let navigation = document.querySelector('.navigation');
navigation.onclick = function () {
navigation.classList.toggle('active');
}
</script>
<footer>
<p>Click the menu to expand and see the icons</p>
</footer>
</body>
</html>
A dark-themed page with a centered "9 Dots Menu" title. Below it, a small rounded rectangle appears initially. When clicked, it expands into a 3x3 grid showing 9 different icons (camera, wifi, chat, alarm, airplane, power, notifications, bluetooth, moon). The icons have a smooth animation effect and glow green on hover.
Key Features
- CSS Variables Used for positioning icons (--x, --y, --i)
- Smooth Transitions CSS transitions create fluid animations when expanding/collapsing
- Grid Layout Icons are positioned in a 3x3 grid using calculated transforms
- Hover Effects Icons glow with a green filter effect when hovered
- Toggle Functionality JavaScript adds/removes the "active" class to control the menu state
Conclusion
The 9 dot menu provides an elegant solution for compact navigation. By combining CSS transforms, transitions, and JavaScript toggle functionality, you can create an interactive menu that expands from a small indicator into a full grid of options.
Updated on: 2026-03-15T18:27:45+05:30
604 Views
Advertisements