In this tutorial we will show you the solution of hamburger menu css responsive and we will learn about how to design hamburger menu using css with responsive.
As we know css used to style html elements, here we used internal style method to show demo.
For make hamburger menu we used css code so hamburger menu symbol will appear or we can use ‘fontawesome’ file supports it will allow to put any symbol on our website with respective html code.
Then we defined dummy nav menu with three separate html page.
Step By Step Guide On Hamburger Menu CSS Responsive :-
We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.
In our program we defined navbar with hamburger menu and defined dummy nav menu’s with three links ‘Home,About,Contact’.
When we clicks on ‘hamburger’ symbol our dummy nav menu will appear.
We defined these are with responsively so it’s layout can’t break at any size.
<!DOCTYPE html>
<html>
<head>
<title>HAMBURGER MENU</title>
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
body{margin: 0;padding: 0;}
.navbar{
width: 100%;
height: 3rem;
background-color: rgb(12, 63, 63);
}
label{font-size: 2rem;margin-left:2%;color: white;}
.navmenu{width: 20%;height: 40rem;background-color: #555;
position:absolute;
top: 7%;
}
#nvm{display: none;}
.navmenu a{
color: white;
text-decoration: none;
display: block;
margin: 2rem 1rem;
}
</style>
<script>
$(document).ready(function(){
$("#nb").click(function(){
$("#nvm").show();
});
});
</script>
</head>
<body>
<div class="navbar" id="nb">
<label>☰</label>
</div>
<div class="navmenu" id="nvm">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- We imported jquery link for gets support of jquery code we defined in our program.
- Within <style> tag we defined block of styles. First we sets body ‘padding and margin’ to value ‘0’ then using div class ‘navbar’ we styles by ‘width to 100%’, height sets to ‘3rem’, background color sets to ‘rgb(12, 63, 63)’, within <label> tag we defined code ‘☰’ used to display hamburger menu symbol.
- We designed that by styles ‘font-size: 2rem;’, ‘margin-left:2%’ and ‘color: white;’. We defined another div with class ‘navmenu’ for create navmenu.
- Navmenu designed by ‘sets width: 20%;, height: 40rem;, background-color: #555;, position:absolute; and top: 7%;’.
- Within navmenu we defined three dummy menu ‘Home,About,Contact’ and it’s designed by ‘color: white;, text-decoration: none;, display: block; and margin: 2rem 1rem;’. Then we sets initially ‘navmenu’ block to ‘none’.
- Within <script> tag we defined code for when user clicks on hamburger menu symbol then only our nav menu’s will appear below that with navigation links.
- Those are defined in jquery code the ready() method initialized and click() method used to found when id ‘#nb’ clicked by user then it will sets id of navmenu block ‘#nvm’ to appear state by show() method.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined two <div> tags one for ‘navbar’ creation and another for ‘navmenu’ then those are styled by as we seen at point 4.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how create hamburger menu with three dummy navigation links using css with responsively.
When we load our program we can see responsive navbar with hamburger menu symbol.
When we clicks on hamburger symbol then our defined navmenu list block will appeared and when we resize window screen size to any size so we can open this website on any device.
Using css try to explore more creative hamburger menu layout design with your own thoughts.
I hope this tutorial on hamburger menu css responsive helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
