How To Create A Responsive Navbar With Dropdown
Navigation Menu is a set of hyperlinks organized together to link another sites or another pages within the sites. The hyperlinks may be in form of texts, images or any button. Whenever you visit a website, you might want to look into several contents that the site has to offer. Organizing contents separately on different pages tidies up the look of the page and at the same time provides user with exploration guide. There are several designs you can opt as a developer for navigation menu like vertical, horizontal, drop down etc. In this tutorial, we will be developing dropdown navigation menu navbar with HTML and CSS. We will make use of checkbox to display drop down list as a navbar by manipulating CSS.
When it comes to designing webpages, the organization of your content in a menu are the most important part. Since these menus are guide to your website exploration, without an effective navbar menu, your web visitors may fail to fetch a proper content. So, you have to choose a proper design options to present your navigation menu.
However, If you are planning to develop single page application, then I suggest you look into tabs. Though tabs functionality limits within the content of your page, they serve server-less guide to your site.
Learn to Make Dropdown Navigation Menu with CSS
A dropdown navigation menu consists of hidden sets of navbar menu which presents them as a list in drop down format as you click it's respective parent menu, beautifully arranged so with CSS.
In this tutorial, we will built a simple yet responsive and beautiful dropdown navbar menu with CSS only. So now, let's start to build our navigation menu
Step 1: Adding Basic HTML Structure
Before starting to build our HTML structure. Lets first analyze our requirement. We want a navigation Menu. That's doable with simple arrangement of hyperlinks.
These hyperlinks will be defined by anchor tag in our HTML and modified by CSS to behave as our dropdown menu. Since we want a dropdown navbar in this tutorial, we want a button which when clicked produces drop down a list of menu built with just HTML and CSS.
The only problem with buttons is that with just CSS, they are unclickable. That means once you trigger CSS click event there is no way to turn it around to it's default state.
Luckily we have checkbox which can be checked and unchecked. We will be using this feature of navigation menu and modify it with CSS to behave it as a drop down list menu. With checkbox we can set different CSS for when it's checked and when it's not.
Okay Now lets begin to add HTML structure
<div class="dropdown"> <input type="checkbox" id="checkbox_id" class="dropdown-menu"> <label for="checkbox_id"> JavaScript <i class="fa fa-caret-down"></i> </label> </div> In the above CSS, I've built a simple checkbox input setting it'slabel to JavaScript. I have added a icon tag to display a drop down icon. For this icon to work, we have to link a font-awesome CDN on our page.
So add the following link to your site at the top of your page'shead section.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> As of this point you should be seeing a simple checkbox with its label followed by a drop down icon. But the checkbox need to act as a drop down navigation menu.
For that we need to add some other menu under theJavascript label. So lets do that.
<div class="dropdown-content"> <a href="#">Node.js</a> <a href="#">React.js</a> <a href="#">Angular.js</a> </div> I've added the above lines of code within thedropdown div in html. Its just some extra hyperlinks which will be modified with CSS to drop down as a list of the navigation menu.
Step 2: Converting the HTML to dropdown Menu using CSS
The step 1 might have produced just a basic checkbox label with some extra hyperlinks. They are all in their default style, which is no way looks like a dropdown navigation menu.
So in this step, we will be focusing on changing the CSS to make the basic HTML checkbox behave as a drop down navigation menu.
First of all lets remove the default checkbox design.
input[type=checkbox] { display:none; } The above code removes the default checkbox button leaving on the label text. You could have simply used class selector in the above CSS but since there will more checkbox appearing in this tutorial, I've set the this CSS value for all of them. Coz, lets face it, we are just using checkbox to make it behave as a dropdown navbar in this tutorial, so we don't want the button to be displayed instead.
Now lets hide those extra hyperlinks. Because we don't want it to be displayed by default.
.dropdown-content { display: none; } Okay, Now you can see the hyperlinks disappear from our page. Lets add some more CSS to display the contents as we check our checkbox.
.dropdown-menu:checked~ .dropdown-content{ display:block; } The above CSS displays the content that we've hidden previously, once the checkbox is checked. Now click on the JavaScript label to see the effect. You should see the hyperlinks appearing and as you uncheck the hyperlinks disappear.
That behaves as a simple show and hide menu which is the basic property of navigation menu.
Note. Tilde selector selects all the sibling element appearing after the first element that belongs to same parent.
Step 3: Adding More Navigation Menu
Okay, In this step, we are just adding some extra hyperlinks. So, this section is just expansion of previous steps. Nothing much to explain
<header> <section> <div id="logo">OnAirCode</div> <nav> <div class="dropdown"> <input type="checkbox" id="checkbox_id" class="dropdown-menu"> <label for="checkbox_id"> JavaScript <i class="fa fa-caret-down"></i> </label> <div class="dropdown-content"> <a href="#">Node.js</a> <a href="#">React.js</a> <a href="#">Angular.js</a> </div> </div> <a href="#home">CSS</a> <a href="#news">HTML</a> </nav> <section> </header> I've enclosed the hyperlinks within aheaderandsectiontag. Also, I have added a logo and then further enclosed the navbar withinnavtag and added some more hyperlinks.
Step 4: Styling the Navbar header
Though we might have successfully created a menu to provide hide and show feature, those simple structure look nowhere near to dropdown navigation menu. So lets style our Navbar header.
header{ overflow:hidden; background-color:#262626; margin-bottom:50px; } #logo{ font-size:20px; text-transform:uppercase; color:white; font-weight:bold; float:left; padding: 25px 20px; margin-left:12%; } nav a{ float:right; text-decoration:none; color:white; font-size:18px; padding: 25px 35px; display:inline-block; transition: all 0.5s ease 0s; } body{ background-color:#6abce3; margin:0px; padding:0px; font-family: 'Open Sans', sans-serif; } Here, I have presented all these CSS in bulk. Coz, they are just some basic designs. The first selector adds background to our header while the second logo selector gives styling to the logo.
Similarly I have added designs for all those hyperlinks within thenavtag. I have floated them to right and withtext-decoration, I removed the default look of the hyperlink.
And I've added background color with margin and padding set to zero to remove the defaultuser-agent stylesheet.
Basically, those CSS are just design blocks of our navigation header. But you can see that the javascript text which is the label of checkbox hasn't been styled, yet.
Step 5: Styling the Dropdown Navigation Menu
In this section of this tutorial we will be designing the dropdown navbar menu. Let do that step by step.
Firstly lets arrange theJavaScriptlabel inline with other menu items.
.dropdown{ float:right; padding-top:25px; } The above CSS arranged the dropdown menu, but yet the label isn't visible. So, let add more CSS to the label.
.dropdown label{ padding: 25px 30px; font-size:18px; color:white; cursor: pointer; } Seems cool, right? Now lets try checking the label by clicking on it.
o-oh! The drop down content have aligned horizontally taking up spaces within our header. That doesn't look so good. So, lets change that
.dropdown label{ padding: 25px 30px; font-size:18px; color:white; cursor: pointer; } Okay, that's good. But still you can see that the dropdown content seem to expand our header along with it.
So, lets separate the content from the navigation header.
.dropdown-content{ position: absolute; background-color: #262626; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } Now it seems fair enough for now. Let's see what we've built upto this section.
Yeah, I know there is still lots to work on. But chill, we will look into every single one of them separately. For now, lets add hover effect to make the menu more interactive
Step 6: Adding Hover Effect
.dropdown-menu:hover~label{ background-color:#2581DC; } nav a:hover{ background-color:#2581DC; transition: all 0.5s ease 0s; } The first part changes the color of label on hovering over the dropdown menu and second part changes the colors of atag within thenavtag. Well this is just the basic. But you can see that our drop down list have stacked a little bit above our navigation menu. Don't bother that for now.
Step 7: Adding Content and heading to the page
Well, as of now we have just focused on navigation menu. So page field looks so barren. Lets fill it up by adding some contents and a heading.
Heading
<h1><span>Responsive Dropdown Menu</span> Using Only CSS</h1> I've added the above HTML on the top of the body and styled with the following CSS
h1{ font-size:26px; padding:40px 0px; text-align:center; } h1 span{ font-weight:500; } Contents
<section id="HTML" class="content"> <h2>HTML</h2> <p>In this tutorial, we are building a dropdown navigation menu. For this we are using simple HTML and CSS without JavaScript or some dynamic and advanced frameworks. To behave as a dropdown menu, we are using the feature of checkbox which can be checked and unchecked. </p> </section> <section id="CSS" class="content"> <h2>CSS</h2> <p>This dropdown navigation Menu is a simple example built with Pure CSS and HTML. Since the button doesn't allow unclickable property without using JavaScript, we are manipulating the CSS styles of the checkbox button to make it behave as a dropdown navigation menu.</p> </section> <section id="JavaScript" class="content"> <h2>JavaScript</h2> <p>In this tutorial, we are building a beautiful and responsive dropdown navigation menu without using Javascript. We are using media queries for responsiveness changing the CSS on several breakpoints to make it responsive on varying width.</p> </section> These are just page fillers. So lets not stick to describing all these. However lets see some CSS that I've used for these contents.
section{ width:100%; max-width:1000px; margin:0px auto; } .content{ margin-bottom:60px; width:750px; } .content h2{ font-size:18px; font-weight:500; color:#002e5b; border-bottom:1px solid grey; padding-bottom:10px; margin-bottom:10px; } .content p{ font-size:18px; line-height:22px; color:white; text-align:justify; } Step 8: Some Basic CSS adjustment to Navigation Menu
I've added margin and arranged the position of the drop down list in this step which is just some minor adjustment.
nav{ margin-right:12%; } .dropdown-content { top:212px; } They are just results from my trial and error experiments. With that adjustments done, Now lets see our final design.
Finally as we've reached to this point we've successfully developed a dropdown navigation menu with pure HTML and CSS. But we've take no any precautions for varying screen size.
As a modern web developer, responsive web site should be a major concern.
So, Lets check whether our site is responsive to varying screen sizes or not.
Step 9: Adding Responsiveness with Media queries
Media queries allow us to change the CSS of web page provided certain conditions are met. This helps us in creating page responsiveness as we can change our CSS as per the size of the screen. A important term for this concept isbreakpoint.
It is a point or lets say a threshold value of a screen size from which as you decrease or increase the size, the design of your page varies drastically. Okay, I agree that was not a good definition. But lets understand it, experimentally.
Decrease the size of your browser screen. At some screen size you can see your contents changing trying to fit to the new screen size. The particular screen size is abreakpoint.
In our context, upto1000px yo can see that your page remains constant but if you go on decreasing, the contents start to change. So, lets add some media queries at this breakpoint.
@media only screen and (max-width: 980px) { } I have chosen a breakpoint as980px which means all new CSS for screen size below980px will be enclosed inside the above media query.
The Hamburger Icon
Okay, I've planned to remove all those navigation menu and replace them with a hamburger icon as the screen size reaches below 980px. Lets see how we can develop a hamburger icon with CSS.
Hamburger icon is just a three line icon. So, we will be needing three elements vertically adjacent to one another.
<input type="checkbox" id="toggle" class="hamburger-menu"> <label for="toggle" class="hamburger-icon"> <div></div> <div></div> <div></div> </label> The function of checkbox in the above scenario is similar to previous one. It's just for toggling to display the navbar or hide it. Since the hamburger menu will replace the navigation menu, we need to add the above HTML within theheader section.
The hamburger icon will display the drop down list of navbar menu after complete design with HTML and CSS.
First of all , lets remove the display of our navigation menu
nav { display:none; } Now, before building the hamburger menu. Lets change padding of our header and logo to adjust it with the smaller screen size
header{ padding:22px 0px; } #logo{ padding:0; } Now, lets build a hamburger menu icon
.hamburger-icon{ display:block; margin-right:100px; } .hamburger-icon div{ width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; 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; } label { float:right; padding:8px 0px; display:inline-block; cursor:pointer; } Okay, The first and the last CSS block are just for some extra designs. I have generalized thelabel CSS to be applied to all the labels that will appear later on.
However, the middle block of the above CSS is the main code for hamburger menu.
I've set the width, height and background of thedivblock drawing a line like structure. Other properties are for animation effects.
Displaying Nav bar with The Three Line Menu
Now lets display the nav bar as we click the hamburger menu.
input[type=checkbox]:checked ~ nav{ display:block; } But the design of the nav bar doesn't look so good. So lets see how we can change the design of the nav bar. Once again, I reiterate these designs are just some random experiments with pixels arrangement.
nav a{ width:100%; float:none; padding:0px; color:#FFF; font-size:15px; padding:10px 20px; } .dropdown{ width:100%; float:none; } .dropdown-content{ position:relative; top:0px; left:15px; width:100%; box-shadow:0px 0px 0px 0px; } .dropdown-content a{ border:0px; border-bottom:0px; } .dropdown label{ width:100%; float:none; font-size:15px; padding:10px 20px; } Okay, That was just some experimental designs. You could look into it and get some insights for your design.
Now lets change the hamburger menu icon to a cross as it is selected. For that lets see the CSS code below:
.hamburger-menu:checked ~ label div:nth-last-child(3){ opacity:0; } .hamburger-menu:checked ~ label div:nth-last-child(1){ opacity: 1; transform: translate(0px,-15px) rotate(45deg); } .hamburger-menu:checked ~ label div:nth-last-child(2){ opacity: 1; transform: rotate(-45deg) translate(-11px, 5px); } Note :nth-last-child(n) selects the nth element from the last element
Since, I've got three different lines. To make a cross. I have hidden the first line by setting itsopacity to 0. Then for the next two lines, I have performed some transformations with translation and rotation to make those two lines as a cross.
Once again, this transformation was just an experimentation with degrees and pixels.
Complete HTML and CSS Code Drop down for navigation list
Finally, we have managed to build a responsive dropdown navigation bar with HTML and CSS. In my final code I've added some media queries on different breakpoints, similar to the previous section.
okay, Now lets see the final HTML and CSS code of the dropdown navigation menu.
HTML for Dropdown Navigation Menu
<h1><span>Responsive Dropdown Menu</span> Using Only CSS</h1> <header> <section> <div id="logo">OnAirCode</div> <input type="checkbox" id="toggle" class="hamburger-menu"> <label for="toggle" class="hamburger-icon"> <div></div> <div></div> <div></div> </label> <nav> <div class="dropdown"> <input type="checkbox" id="checkbox_id" class="dropdown-menu"> <label for="checkbox_id"> JavaScript <i class="fa fa-caret-down"></i> </label> <div class="dropdown-content"> <a href="#">Node.js</a> <a href="#">React.js</a> <a href="#">Angular.js</a> </div> </div> <a href="#home">CSS</a> <a href="#news">HTML</a> </nav> <section> </header> <section id="HTML" class="content"> <h2>HTML</h2> <p>In this tutorial, we are building a dropdown navigation menu. For this we are using simple HTML and CSS without JavaScript or some dynamic and advanced frameworks. To behave as a dropdown menu, we are using the feature of checkbox which can be checked and unchecked. </p> </section> <section id="CSS" class="content"> <h2>CSS</h2> <p>This dropdown navigation Menu is a simple example built with Pure CSS and HTML. Since the button doesn't allow unclickable property without using JavaScript, we are manipulating the CSS styles of the checkbox button to make it behave as a dropdown navigation menu.</p> </section> <section id="JavaScript" class="content"> <h2>JavaScript</h2> <p>In this tutorial, we are building a beautiful and responsive dropdown navigation menu without using Javascript. We are using media queries for responsiveness changing the CSS on several breakpoints to make it responsive on varying width.</p> </section> CSS for Dropdown Navigation Menu
/*================================================= Removing the default look of checkbox ================================================*/ input[type=checkbox]{ display:none; } /*================================================= Hiding the content and styling ===================================================*/ .dropdown-content { display: none; position: absolute; top:182px; background-color: #262626; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } /*================================================= Displaying the content as the menu is clicked ===================================================*/ .dropdown-menu:checked~ .dropdown-content{ display:block; } /*================================================= Styling the navbar header ===================================================*/ header{ overflow:hidden; background-color:#262626; margin-bottom:50px; } #logo{ font-size:20px; text-transform:uppercase; color:white; font-weight:bold; float:left; padding: 25px 20px; margin-left:12%; } nav a{ float:right; text-decoration:none; color:white; font-size:18px; padding: 25px 35px; display:inline-block; transition: all 0.5s ease 0s; } body{ background-color:#6abce3; margin:0px; padding:0px; font-family: 'Open Sans', sans-serif; } /*================================================= Styling the dropdown menu ===================================================*/ .dropdown{ float:right; padding-top:25px; } .dropdown label{ padding: 25px 30px; font-size:18px; color:white; cursor: pointer; } .dropdown-content a { float: none; padding: 12px 16px; text-decoration: none; border-bottom:1px solid white; display: block; } /*================================================= Adding hover effect ===================================================*/ .dropdown-menu:hover~label{ background-color:#2581DC; } nav a:hover{ background-color:#2581DC; transition: all 0.5s ease 0s; } /*================================================= Styling the heading ===================================================*/ h1{ font-size:26px; padding:40px 0px; text-align:center; font-weight:700; } h1 span{ font-weight:200; } /*================================================= Styling the contents section ==================================================*/ section{ width:100%; max-width:1000px; margin:0px auto; } .content{ margin-bottom:60px; width:750px; } .content h2{ font-size:18px; font-weight:500; color:#002e5b; border-bottom:1px solid grey; padding-bottom:10px; margin-bottom:10px; } .content p{ font-size:18px; line-height:22px; color:white; text-align:justify; } .hamburger-icon{ display:none; } /*================================================= Extra adjustmens ==================================================*/ nav{ margin-right:12%; } @media only screen and (max-width: 980px) { nav { display:none; width:100%; padding:0px; margin-left:10%; } header{ padding:22px 0px; } #logo{ padding:0; } /*================================================= Hamburger Menu ==================================================*/ .hamburger-icon{ display:block; margin-right:100px; } .hamburger-icon div{ width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; 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; } label { float:right; padding:8px 0px; display:inline-block; cursor:pointer; } /*================================================= Displaying the menus ==================================================*/ input[type=checkbox]:checked ~ nav{ display:block; } /*================================================= Designs for displaying the menus ==================================================*/ nav a{ width:100%; float:none; padding:0px; color:#FFF; font-size:15px; padding:10px 20px; } .dropdown{ width:100%; float:none; } .dropdown-content{ position:relative; top:0px; left:15px; width:100%; box-shadow:0px 0px 0px 0px; } .dropdown-content a{ border:0px; border-bottom:0px; } .dropdown label{ width:100%; float:none; font-size:15px; padding:10px 20px; } /*================================================= Converting the lines to CROSS ==================================================*/ .hamburger-menu:checked ~ label div:nth-last-child(1){ opacity: 1; transform: translate(0px,-15px) rotate(45deg); } .hamburger-menu:checked ~ label div:nth-last-child(2){ opacity: 1; transform: rotate(-45deg) translate(-11px, 5px); } /*================================================= Removing this line from display as for cross we need only two lines ==================================================*/ .hamburger-menu:checked ~ label div:nth-last-child(3){ opacity:0; } } Conclusion
In this tutorial, we have developed a dropdown navbar using CSS and HTML. We've added media queries at several breakpoints to add responsivenss to our site.
Since we have restricted to building the dropdown navbar with just CSS in this tutorial, we didn't discuss about Javascript. But the trick for toggling employed in this tutorial with checkbox could have been accomplished by using JavaScript instead.
Also, I've done experiments on pixels arrangement with trial and error process for designing. So, I suggest experimenting with CSS before finalizing the design.
As of now, that's it. Congrats, You held through!
How To Create A Responsive Navbar With Dropdown
Source: https://w3codepen.com/html-css-dropdown-navigation-menu/
Posted by: englesdoony1936.blogspot.com
0 Response to "How To Create A Responsive Navbar With Dropdown"
Post a Comment