Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Crazy Stunt Loading Animation using HTML & CSS

    27 August 2025

    How to make Iconic Magic Tab Bar using HTML & CSS

    23 August 2025

    How to make Glowing Animated Search Bar using HTML & CSS

    21 August 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - JavaScript - How to make 9 Dot Navigation Menu in HTML CSS & JavaScript
    JavaScript

    How to make 9 Dot Navigation Menu in HTML CSS & JavaScript

    Coding StellaBy Coding Stella12 January 2024Updated:13 January 20241 Comment4 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    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!

    magic navigation menu navigation menu
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make a New 9 Dot Navigation Menu in HTML CSS & JavaScript
    Next Article How to do Form Validation – Email and Password using HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    JavaScript

    How to create Parallax Scroll Animation using HTML CSS and JS

    17 August 2025
    JavaScript

    How to create Catch the valorous rabbit Game using HTML CSS and JS

    14 August 2025
    JavaScript

    How to create Animated Credit Card using HTML CSS and JS

    9 August 2025
    View 1 Comment

    1 Comment

    1. Pingback: How to make a New 9 Dot Navigation Menu in HTML CSS & JavaScript | Coding Stella

    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202427K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202423K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202419K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202413K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    JavaScript Mastery Roadmap: From Fundamentals to Expert Level

    26 January 2024

    How to make Slide-out Navigation with GSAP 3 using HTML CSS & JavaScript

    27 September 2024

    How to make Login and Signup Form using HTML CSS & JavaScript

    14 January 2024

    How to make Alarm App in HTML CSS & JavaScript

    16 February 2024
    Latest Post

    How to make Crazy Stunt Loading Animation using HTML & CSS

    27 August 2025

    How to make Iconic Magic Tab Bar using HTML & CSS

    23 August 2025

    How to make Glowing Animated Search Bar using HTML & CSS

    21 August 2025

    How to make Animated Pepsi Product Card using HTML & CSS

    19 August 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood