HTMLCSSJavaScript
9 Dots Navigation Menu
A modern animated navigation menu built using HTML, CSS, and JavaScript. The project features a compact 9-dot layout that expands into an interactive navigation panel with smooth transitions and stylish motion effects. The design uses CSS animations, transforms, and dynamic positioning to create an engaging user experience. JavaScript controls the open and close interactions, while Ionicons provide clean modern icons for navigation items. This project is ideal for creative UI/UX inspiration and advanced frontend animation practice.
Source Code
index.html
<!DOCTYPE html>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><html color:#fbbf24">langcolor:#94a3b8">="en" >
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><head>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><meta color:#fbbf24">charsetcolor:#94a3b8">="UTF-8">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><title>9 Dot Navigation Menu | @EduCrushcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></title>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><link color:#fbbf24">relcolor:#94a3b8">="stylesheet" color:#fbbf24">hrefcolor:#94a3b8">="./style.css">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></head>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><body>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="main">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="navigation">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">stylecolor:#94a3b8">="--i:0;--x:-1;--y:0;">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><ion-icon color:#fbbf24">namecolor:#94a3b8">="camera-outline">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></ion-icon>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">stylecolor:#94a3b8">="--i:1;--x:1;--y:0;">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><ion-icon color:#fbbf24">namecolor:#94a3b8">="diamond-outline">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></ion-icon>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">stylecolor:#94a3b8">="--i:2;--x:0;--y:-1;">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><ion-icon color:#fbbf24">namecolor:#94a3b8">="chatbubble-outline">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></ion-icon>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">stylecolor:#94a3b8">="--i:3;--x:0;--y:1;">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><ion-icon color:#fbbf24">namecolor:#94a3b8">="alarm-outline">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></ion-icon>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">stylecolor:#94a3b8">="--i:4;--x:-1;--y:1;">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><ion-icon color:#fbbf24">namecolor:#94a3b8">="game-controller-outline">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></ion-icon>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">stylecolor:#94a3b8">="--i:5;--x:-1;--y:-1;">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><ion-icon color:#fbbf24">namecolor:#94a3b8">="moon-outline">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></ion-icon>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">stylecolor:#94a3b8">="--i:6;--x:1;--y:-1;">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><ion-icon color:#fbbf24">namecolor:#94a3b8">="water-outline">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></ion-icon>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><span color:#fbbf24">stylecolor:#94a3b8">="--i:7;--x:1;--y:1;">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><ion-icon color:#fbbf24">namecolor:#94a3b8">="time-outline">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></ion-icon>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></span>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="close">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><ion-icon color:#fbbf24">namecolor:#94a3b8">="close-outline">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></ion-icon>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
<!-- partial -->
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><script color:#fbbf24">srccolor:#94a3b8">='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js'>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></script>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><script color:#fbbf24">srccolor:#94a3b8">='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js'>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></script>color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><script color:#fbbf24">srccolor:#94a3b8">="./script.js">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></script>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></body>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></html>