9 Dots Menu Using HTML CSS & JavaScript

Hello readers, Today In this article I am going to show you How To Create 9 Dots Menu in HTML CSS & JavaScript. This type of Dots Menu is used for the website’s modern menu. One of the most beautiful and good-looking designs.

You easily create this Icon Hover Effects Menu Using HTML CSS & JavaScript then this article will definitely help you. For this, you need to have an idea about basic HTML CSS & JavaScript then you can understand the following codes. It is designed in a completely modern way.

Some Information About This CSS Dots Menu

Normally show 9 dots box with the background color. When you click the 9 dots then expand the menu with the icon. And when you hover the icon then background color changes and menu icon name shows. If you click the menu icon then hide all the menu.

Watch the video tutorial to create CSS Dots Menu

If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this design step by step. So you can learn how to make this beautiful CSS 9 Dots Menu design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.

Hopefully, the above video tutorial has helped you to create this Icon Hover Effects Menu. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.

You might like this:

CSS 9 Dots Menu | Source Codes

You have to create HTML, CSS & JS File For this design. After creating these files just paste the following codes into your file.

First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9 dot menu</title>
    <!----CSS link----->
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
  <div class="container">
    <div class="navigation">
      <span style="--i:0; --x:-1; --y:0;">
        <ion-icon name="chatbox-outline"></ion-icon>
      </span>
      <span style="--i:1; --x:1; --y:0;">
        <ion-icon name="call-outline"></ion-icon>
      </span>
      <span style="--i:2; --x:0; --y:-1;">
        <ion-icon name="mic-outline"></ion-icon>
      </span>
      <span style="--i:3; --x:0; --y:1;">
        <ion-icon name="settings-outline"></ion-icon>
      </span>
      <span style="--i:4; --x:1; --y:1;">
        <ion-icon name="key-outline"></ion-icon>
      </span>
      <span style="--i:5; --x:-1; --y:-1;">
        <ion-icon name="camera-outline"></ion-icon>
      </span>
      <span style="--i:6; --x:0; --y:0;">
        <ion-icon name="home-outline"></ion-icon>
      </span>
      <span style="--i:7; --x:-1; --y:1;">
        <ion-icon name="person-outline"></ion-icon>
      </span>
      <span style="--i:8; --x:1; --y:-1;">
        <ion-icon name="videocam-outline"></ion-icon>
      </span>
    </div>
  </div>

  <!-----JS File Link---->
  <script src="js.js"></script>
  <!-----Ion Icons CDN Link----->
  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
</body>
</html>

Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }
  
  .container {
	width: 100%;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #10131c;
  }
  
  .navigation {
	position: relative;
	width: 70px;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #212532;
	border-radius: 10px;
	cursor: pointer;
	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: 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.active span:hover {
	background: #2dfc52;
  }
  
  .navigation span ion-icon {
	color: #fff;
	font-size: 0em;
	transition: 0.5s;
  }
  
  .navigation.active span ion-icon {
	color: #fff;
	font-size: 1.5em;
  }

After to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.

JS Code:

let navigation = document.querySelector('.navigation');
navigation.onclick = function() {
  navigation.classList.toggle('active');
}

now you’ve successfully created these CSS 9 Dots Menu. If your code does not work or facing any error/problem to comment down or contact us through the contact page. or you can download images and source codes below the download button.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Categories