Hello developers, today in this blog you'll learn to create a Simple Navigation Menu Bar using HTML & CSS.
The Navigation Menu Bar is the section on the website that is located on either the right side or left side of the web page with some important navigation links. The horizontal bar consists of several links which help the user to redirect to that particular page. The navigation menu bar is an essential part of the web page. The navigation menu bar can also be called a side navigation menu bar.
In this blog (Simple Navigation Menu Bar), there is a bar at the top left of the web page. On clicking the bar you can see the navigation menu sliding from the left side of the web page. On this web page, the navigation menu consists of a Home, About, Information (Info), Contactand and show me more. The hover effect has been used for every link. When you hover on the links the color of the text changes to the violet color. By clicking the cross icon which is present at the top left of the web page, the navigation menu will get disappear.
The source code of this Simple Navigation Menu Bar is given below, if you want the source code of this program, you can copy it. You can use this Simple Navigation Menu Bar with your creativity and can take this project to the next level.
Simple Navigation Menu Bar using HTML & CSS [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.
body
{
margin: 0;
padding: 0;
background: #1488CC;
background: -webkit-linear-gradient(to right, #2B32B2, #1488CC);
background: linear-gradient(to right, #2B32B2, #1488CC);
color: #cdcdcd;
font-family: "Avenir Next", "Avenir", sans-serif;
}
#menuToggle
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a
{
text-decoration: none;
transition: color 0.3s ease;
}
#menuToggle a:hover
{
color: tomato;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle > span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #fff;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #202124;
border-radius: 10px;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
color:#fff;
}
#menu li:hover{
color:#4b6cb7
}
#menuToggle input:checked ~ ul
{
transform: none;
color:#fff;
}
.credit a{
text-decoration: none;
color: #fff;
}
.credit {
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating this Simple Navigation Menu Bar using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team