how to create navigation menu in html and css

Hello friends, today in this blog you will learn how to make a black navigation bar and bright menu icon. You must know that navigation bar or menu-bar is necessary for any website and you will be able to see menu-bar or navigation bar in every website. The menu-bar or navigation bar makes it easy to give information in the bare of the website and to access the text that we all need.

You may have seen different types of navigation bar or menu-bar design. Which are made up of html, CSS and JavaScript etc. You will learn how to create a black navigation bar by using this navigation bar using only html and CSS.

You can see in this image. It is designed with a dark black and shiny navigation icon. It has been created with the help of a fine html and CSS that you will learn how to create it easily.

If you are having trouble in understanding this navigation bar, then you can easily understand this navigation bar or menu-bar by watching the video tutorial given below.

Video Tutorial of Navigation Menu In Html And CSS

After watching this video tutorial, I am hopeful that you have understood it completely and you must have learned to make it a navigation bar with the help of html or CSS.

Navigation Menu In Html And CSS Source Codes

Know about the html of the navigation menu took two div inside the body whose class name is wrapper-1 wrapper-2, an ul tag is taken inside wrapper-1 ul tag is called unordered tag inside this ul five li Tag is taken li tag is called List Style i tag is taken inside this li. This i tag is used for icons that have the icon named by linking the class name inside the first tag of li. The fa fa-home is placed and the class name of the second third, fourth and fifth is written as fa fa-image, fa fa-camera, fa fa-headphones and fa fa-user. Name is added whose name is active, similarly tag inside wrapper-2 is taken as wrapper-1 which is styled in css

Let's go about the css style of the navigation menu. First of all * is zeroed the margin and padding and list-style-type: none outline: none followed by the background-color of the body tag.

body tag followed by .wrapper-1, .wrapper-2 to margin: 50px auto; , width: 412px; background: linear-gradient (# 3D4246, # 24282B); height: 60px; border-radius: 4px; border-top: 1px solid # 53575C; border-left: 1px solid # 53575C; box-shadow: 1px 1px # 17191C, 0 0 10px # 323338; padding: 8px; padding-bottom: 12px; Has been done and after this class ul tag has also been given width height and background color and all other remaining tags have also been designed by styling in css.

This navigation bar is not designed in responsive. To make this navigation bar responsive, you can design by giving size according to every device using @ Media Screen, which you can easily see in mobile tab etc device.

If you are learning html and css now or have learned, then this navigation bar is very important for you. You can add this navigation to your website and blog. If you are well aware of JavaScript and Python then you can make this navigation more Can be designed well

If you like this navigation bar or menu-bar then you can get the source code of this navigation bar, which we have given the file of the two source code below, you copy and paste both these source code file into your file. This can be obtained by scrolling down the source code.

HTML CODE FILE :

<!DOCTYPE html>
<html>
<head>
    <title>Black Menu</title>
    <link rel="stylesheet" type="text/css" href="menubutton.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
   <div class="wrapper-1">
       <ul id="nav">
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-image"></i></li>
<li class="active"><i class="fa fa-camera"></i></li>
<li><i class="fa fa-headphones"></i></li>
<li><i class="fa fa-user"></i></li>
</ul>
</div>
<div class="wrapper-2">
    <ul id="nav">
<li class="active"><i class="fa fa-home"></i></li>
<li><i class="fa fa-image"></i></li>
<li><i class="fa fa-camera"></i></li>
<li><i class="fa fa-headphones"></i></li>
<li><i class="fa fa-user"></i></li>
</ul>
</div>
</body>
</html>

CSS CODE FILE :

*{
 border: 0;
 margin: 0;
 padding: 0;
 list-style: none;
 outline: none;
}
body{
 height: 100%;
 background-color: #4a4a4a;
}
.wrapper-1, .wrapper-2{
 margin: 50px auto;
 width: 412px;
 background: linear-gradient(#3D4246, #24282B);
 height: 60px;
 border-radius: 4px;
 border-top: 1px solid #53575C;
 border-left: 1px solid #53575C;
 box-shadow: 
 1px 1px #17191C,
 0 0 10px #323338;
 padding: 8px;
 padding-bottom: 12px;
}
ul{
 width: 410px;
 height: 100%;
 border: 1px solid #0F1014;
 border-radius: 3px;
 background: #0F1014;
}
ul li{
 float: left;
 width: 80px;
 height: 100%;
 font-size: 30px;
 color: #D9D9D9;
 text-align: center;
 text-shadow: 0 1px #0F1014;
 display: table;
 background: linear-gradient(#44494F, #2F3237);
 border-radius: 3px;
 border-right: 1px solid #0F1014;
 border-bottom: 1PX solid #53575C;
 border-left: 1px solid #53575C;
 box-shadow: 1px 1px #17191C;
 cursor: pointer;
}
ul li i{
 margin-top: 15px;
}
ul li:active, ul li.active{
 color: #171820;
 background: #2A2D31;
 box-shadow: inset 0 0 5px rgba(15, 16, 20, 0.5);
 border: 1px solid #0F1014;
}
ul li:not(.active):hover{
 text-shadow: 1px 1px 10px #ffff00;
}
.wrapper-2 ul li:not(.active):hover{
 text-shadow: 1px 1px 10px #ff69b4;
}
ul li:active{
 text-shadow: none !important;
}
.wrapper-2 ul li{
 color: #0F1014;
 text-shadow: 0 1px #666;
}
.wrapper-2 ul li:active,
.wrapper-2 ul li.active{
 color: #808080;
}

Video Tutorial of Navigation Menu In Html And CSS

Navigation Menu In Html And CSS Source Codes

HTML CODE FILE :

CSS CODE FILE :

1 Comments

Post a Comment

About Us

Contact Form

how to create navigation menu in html and css

Video Tutorial of Navigation Menu In Html And CSS

Navigation Menu In Html And CSS Source Codes

HTML CODE FILE :

CSS CODE FILE :

You might like

1 Comments

Post a Comment

Contact Form