Navigation Bar is the most important UI element of the website for visitors or content viewers to find their required information or the page from the website. A website navigation bar is the most commonly represented as a horizontal list of links at the top of every page. The navigation bar that is specially made for the mobile is the mobile icon navigation bar. The navigation bar can be represented in the form of text or with its respective icons.
In this blog (Mobile Icon Navigation Bar), on the webpage, the icons are on the horizontal bar. The icons in the horizontal bar are Message, Subscription (bell), Home, Lock, and Profile icons. The hover animation has been used in these icons. If you hover over the icon, the particular icon will appear in orange color and there will be a white-colored little horizontal bar on top of the icon. When you click on the particular icon, the icon will pop up and there will be a little horizontal bar that is pink colored. The center of those icons is the Home icon, it is highlighted with the pink background to a particular extent by using border-radius property.
The source code of this Mobile Icon Navigation Bar using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Mobile Icon Navigation Bar using HTML & CSS on your projects.
Mobile Icon Navigation Bar [Source Code]
To make this website (Mobile Icon Navigation Bar), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
.menu {
width: 400px;
background-color: #12192c;
box-shadow: 0px -2px 15px -3px #ffa8ba;
padding: 0px 20px;
border-radius: 0px 0px 25px 25px;
color:#fff
}
.menu ul {
list-style: none;
display: grid;
grid-template-columns: auto auto auto auto auto;
padding: 0;
margin: 0;
}
.menu ul li {
text-align: center;
box-sizing: border-box;
}
.menu ul li a {
display: block;
width: 100%;
padding: 10px 0;
border-top: 2px solid;
border-color: transparent;
color: #fff;
}
.menu ul li a:hover:not(.home) {
border-top: 2px solid #fff;
color: #F7CE68;
}
.menu ul li a:focus:not(.home) {
border-top: 2px solid #fc466b;
color: #FBAB7E;
}
.menu ul li a:focus:not(.home) i {
animation-name: pop;
animation-duration: .5s;
}
@keyframes pop {
0% {transform: scale(.8);}
50% {transform: scale(1.2);}
100% {transform: scale(1);}
}
.menu ul li a.home {
color: #fff;
background: #fc466b;
border-radius: 20px;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
display: grid;
place-items: center;
margin: 0;
min-height: 100vh;
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#FFF
}
Thank you for reading our blog. If you face any problem in creating this Mobile Icon Navigation Bar using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team