Hi Guys, I am back with another fantastic project in this project I used HTML, CSS, and a bit of JavaScript. This project is a Mobile App Icon Menu.
NOTE: To stay informed about my exciting new projects, join our WhatsApp and Telegram community and be part of the conversation.”
I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them as you want for free.
Recently I created a Typing Text Animation using HTML, CSS, and a little bit of JavaScript. I also share this source code in the blog post here you can check this Typing Text Animation.
Mobile App Icon Menu
A mobile app icon menu is a compact and visually appealing collection of icons that serves as a gateway to various features and functionalities within a mobile application.
It typically resides on the home screen or navigation bar of a mobile device, providing quick access to different sections or actions offered by the app.
With just a simple tap, users can effortlessly navigate through the app’s offerings and conveniently explore its diverse range of features.
About This Project
The Coding Pakistan blog website embarked on this project with a noble aim: to provide cost-free assistance to students who are delving into the realm of programming languages and learning the ropes of web development technologies.
This initiative encompasses a wide range of valuable resources, covering essential languages such as HTML, CSS, JavaScript, and advanced frameworks like React.js and Next.js.
| Created by | Coding Pakistan |
| Languages | HTML / CSS & JavaScript |
| Source Code | GitHub |
| Preview | Take Preview |
How To Create a Mobile App Menu Using HTML, CSS & JavaScript
There are some steps to create this type of Mobile App Menu using HTML, CSS, and JavaScript that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three files HTML, CSS, and JavaScript
- Make sure the HTML file extension is (.html), the CSS file extension will be (.css) and the JavaScript file extension is (.js)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- Also, link the JavaScript file with the HTML file using this line of code <script src=”script.js”></script>
- The last step is copying and pasting the given code into your files.
Mobile App Menu Icon- Source Code
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Created by www.codingpakistan.com -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile App Icon Menu</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</head>
<body>
<h2 class="heading">
Created By <a href="http://codingpakistan.com/"> CodingPakistan.com </a>
</h2>
<div class="container">
<ul>
<li class="item active">
<span> <ion-icon name="home-outline"></ion-icon> </span>
</li>
<li class="item">
<span> <ion-icon name="people-outline"></ion-icon></span>
</li>
<li class="item">
<span> <ion-icon name="notifications-outline"></ion-icon></span>
</li>
<li class="item">
<span> <ion-icon name="storefront-outline"></ion-icon></span>
</li>
<li class="item">
<span> <ion-icon name="videocam-outline"></ion-icon></span>
</li>
</ul>
</div>
</body>
<script>
const bar=document.querySelector('.container')
const items=document.querySelectorAll('.item')
items.forEach(item=>{
item.addEventListener('click',()=>{
items.forEach(item=>{
item.classList.remove('active')
})
item.classList.add('active')
})
})
</script>
</html>
CSS FILE
*{
margin: 0;
padding: 0;
}
.heading{
position: absolute;
top: 60px;
font-size: 40px;
}
a{
color: yellow;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #0b91ff;
}
.container{
width: 350px;
height: 100%;
position: relative;
}
ul{
background: white;
height: 100%;
width: 100%;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 16px;
box-shadow: 0 8px 32px rgba(2, 2,24,);
}
.item{
display: flex;
justify-content: center;
height: 56px;
align-items: center;
color: #111;
font-size: 26px;
width: 100%;
padding: 0 10px;
margin-left: 5px;
position: relative;
cursor: pointer;
border-radius: 10px;
}
span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
span ion-icon{
display: flex;
}
.active{
background: #0b91ff;
color: white;
position: relative;
}
JavaScript FILE
const bar=document.querySelector('.container')
const items=document.querySelectorAll('.item')
items.forEach(item=>{
item.addEventListener('click',()=>{
items.forEach(item=>{
item.classList.remove('active')
})
item.classList.add('active')
})
})
Video Tutorial – Mobile App Menu Icons
If you’re having trouble understanding this code and want to learn more about it, please watch this video and consider subscribing to this YouTube channel for similar videos in the future.
Related Content
- Modal PopUp Box Using HTML / CSS & JavaScript
- Weather App using JavaScript with Source Code
- Movie App Using HTML and JavaScript
Conclusion
In this blog post, we have shown you how to create a mobile app icon menu using HTML, CSS, and JavaScript. We have covered the following topics:
- How to create a basic mobile app icon menu with HTML and CSS
- How to add animation to your mobile app icon menu with CSS
- How to make your mobile app icon menu responsive with CSS
- How to add functionality to your mobile app icon menu with JavaScript
We hope that this blog post has been helpful. If you have any questions, please feel free to leave a comment below.
