Create A Navigation Menu Bar Using Only HTML and CSS

byFoolish Developer •
0
Create A Navigation Menu Bar Using Only HTML and CSS

Hello friends, in this article I will tell you how you can easily create a navigation menu bar using only HTML and CSS programming code. Earlier I showed many types of menubars like Responsive, Top, Side, etc. Some special CSS code has been used to make it.

 The menubar is a website text that allows any web creator to arrange all the categories in his website neatly on the homepage. As a result, the user can easily find those categories. Currently, the number of mobile users is much higher. So if you want to make the website responsive, then it is very important to make the menu bar responsive. @Media code is mainly used for this. With the help of this, the maximum and minimum sizes can be set and the desired device can be given a different look. In this article, I have tried to explain everything to you. You can easily understand this and make one yourself.

Watch the video tutorial to create this menu bar

 The following video will help you to know all the information related to this navigation menu bar. Here I have shown step by step how I made it and what kind of code has been used for it.

 Hopefully, you have watched the video above completely and understood how it was made. If you want to download the source code, you can download the code for free by clicking on the download button above. 

Other articles related to this category

How to create this Responsive Navigation menu bar

Below I show you how to make it. To create it, you first need to create an HTML file. Then copy the structure below and add it to the HTML file. The following structure provides all the information to add code. Add the codes according to those instructions. If you want to learn to make it step by step, follow the steps below.

I have shown perfectly accurately and step by step which code has been used to create any element.

Make body Structure

The following codes have been used to construct the structure and design of the menu bar on this navigation.

<body>
    <header>
        <h1>Backlinkn</h1><!--Your Site Name-->
        <nav>
</nav>
</header>
</body>

body{
     background: #ede8ea;
 }
 header{
     position: relative;
     background-color: black;
     overflow: hidden;
     min-width: 21.875em;
 }


Add Menus

 The following HTML codes have been used to add menus to this menu bar. Here you can add or remove menus of your choice.

<ul id="toggled">
                <!--Add menu-->
                <li>Home</li>
                <li>About Me</li>
                <li>Contact Us</li>
                <li>Blog</li>
                <li>Projects</li>
                <li>WordPress</li>
                <li>Video</li>
            </ul>

#menu-toggle{
     display: block;
     float:right;
     color: white;
     text-decoration: none;
     padding: 0.35em;
     border: 1px grey solid;
     margin: 1em 1em 0 0;
 }


Design the menus

The following codes have been used to design the menus above. It has been beautifully arranged using those codes.

 ul{
     clear: left;
     list-style-type: none;
     color: white;
     padding-left: 0;
     margin-bottom: 0;
 } 
 #toggled{
     display: none;
 }
 li{
     padding: 1em 0 1em 1.4em;
     border-top: 1px black solid;
     font-size: 17px;
    font-family: 'sintony',sans-serif; 
 }

 

Add hover effect

The following programming codes are a special type of programming code used to create hover effects. If you watch the demo, you will understand that some amount of animation has been used here. When you hover the mouse over the menus above and click, these menus change color to blue. The following CSS codes have a role to play in this.

li:hover{
    background: #67caf5;
}

 

Make it responsive

Uses media code to make it work on all devices. It has been made completely user friendly and responsive. In the case of mobile, all the menus will be hidden and a menu button will appear next to the logo. When you click on that button, all the menus will be arranged in the form of columns. As a result, any device user will be able to use it beautifully. The following programming codes have been used to create it.

 @media screen and (min-width:41.25em){
    #menu-toggle{
display: none;
    }
    nav{
        float: right;
    }
    ul{
        display: block !important;
    }
    li{
        float: left;
        padding: 1em;
        border-top: none;
    } 
}


Make the menu button functional

The following JavaScript codes have been used to make this navigation menu work for mobiles. In the case of mobile, a button can be seen next to the logo. The following JavaScript has been used to make that button work.

function accordionMenu() {
         var menu = document.getElementById("toggled");
           var menuStyle = window.getComputedStyle(menu);
           var display = menuStyle.getPropertyValue('display');
         
         if (display === 'none') {
           toggle.style.backgroundColor = "gray";
           menu.style.display = "block";
         } else {/*clear: left;list-style-type: none;color: white;padding-left: 0;margin-bottom: 0;#toggled{display: none;li{padding: 1em 0 1em 1.4em;border-top: 1px black solid;font-size: 17px;font-family: 'sintony',sans-serif; }@media screen and (min-width:41.25em){#menu-toggledisplay: none;*/
           toggle.style.backgroundColor = "transparent";
           menu.style.display = "none";
         };
       };
       
       // add event listener to menu button
       var toggle = document.getElementById("menu-toggle");
       toggle.addEventListener("click", accordionMenu, false);

Hopefully, the tutorial above has helped you a lot to learn how to create a menu bar on this. If you have any difficulty in understanding or explaining, you can definitely watch the video above. There I showed the complete step-by-step construction. You can comment for any inconvenience. I will help you completely.

Tags:

Post a Comment

Previous Post Next Post