Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
9 Dot Menu Using HTML and CSS
The 9 dots menu is a grid of nine clickable icons, which drops the menu to reveal other icons that are useful to the users when clicked. In this tutorial, we will learn how to create a 9 Dot Menu by using only HTML, CSS, and a little bit of JavaScript.
Overview
The 9 Dot Menu is simple to use, minimalist, and versatile, which is beneficial for various web projects. It is ideal when one wants a simple design but at the same time wants to achieve variety in a limited area. In this case, we utilize CSS to style our elements and JavaScript for interactivity thus coming up with a good user interface.
FINAL OUTPUT
Technology Used
- HTML ? It is used to create or design the structure of a menu and classify the material presented on the page.
- CSS ? It is used to style sheets, position elements, and animate the layout.
- Ionicons ? It's a perfect gallery to show the icons collected in the library.
HTML and CSS Code to Create 9 Dot Menu
The following are the code files used for 9 dots menu ?
1. HTML Code
Here given the HTML code for creating the basic structure and layout, while adding responsiveness to 9 dots menu ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>9 Dots Menu</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="image/logo.jpg" type="image/x-icon">
</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>
</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>
</ion-icon>
</span>
<span style="--i:5;--x:-1;--y:-1">
<ion-icon name="power-outline"></ion-icon>
</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>© 2022 All Right Reserved by </p>
</footer>
</body>
</html>
2. CSS Code
Here given the CSS code for styling and layout of 9 dots menu
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1{
background: #10131c;
color: #fff;
font-size: 5vw;
text-align: center;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #10131c;
}
.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;
background: #10131c;
color: aliceblue;
}
Code Explanation
- Basic HTML Structure ? Here the HTML section starts from div tag, which contains nine span tags. Where each such span is a menu element with an icon inside it and those are defined using <ion-icon>. The positioning of the icons is done through the flexible CSS variables-- x, ? y, and ?i, which position every icon accordingly.
- CSS for General Styling ? Here the CSS is used to remove the margins and paddingsof all the elements, *{margin: 0; padding: 0; box-sizing: border-box;}. This makes the layout identical in the different browsers to enhance their appearance, Then in HTML, we style the <h1> and section tag so that the title is aligned to the center.
- Styling the Menu Container ? The .navigation class is used to style the holder for the main menu. At instantiation, we provide it with a default width of 70px, and a default height of 70px and #212532 as the background color to give it a modern sense of a box the corners of which are rounded. Here the transition effect makes the expansion easier when the menu is clicked.
- Creating Menu Items with Span ? Every dish is developed primarily as a span element. To make items position relative to the center of the container the CSS variables --x and ?y are used. This liberty allows a sequential arrangement of icons in the format 3 by 3, which forms a grid. The default size is set at 7px which makes them appear like small points when the to is first executed.
- Expanding the Menu on Click ? When the .navigation div is clicked, the JavaScript adds a .active class, which makes the CSS transition to make the div 200px by 200px. The span elements are also increased, ranging from 7px to 45px, and the icons are shown larger as a result of it.
- Icon Animations ? The span elements are associated with the icons downloaded from the Ionicons library. During activation of the menu, the size of the icons increases through the use of the transition property. Adding a hover effect on the icons also makes them glow brighter using filter property to improve the usability of the icons.
- JavaScript for Toggle Functionality ? This navigation div is assigned with an event listener of click event which on click, adds the active class that controls the opening or closing of the menu. This offers the user effective and active navigation, which occurs without heavy usage of script languages such as JavaScript.
- Responsiveness ? It is beneficial through flexible design because it is compatible with different menu sizes of screens. When defining the font size, vw units have been used for the header to make it responsive to different devices of viewports.
- Adding External Icons ? Ionicon integration employs a CDN approach whereby the ion-icon elements are incorporated. This includes adding the Ionicons Icons library...in other words, involving external uploads.
- Footer Section ? The footer occupies a position at the bottom of the page and is covered by a uniform color of #10131c which is the page's color. The alignment of the text at the center enhances the tidiness of the page giving it a more professional appearance.
Updated on: 2025-01-28T12:08:09+05:30
183 Views
Advertisements