An Interest In:
Web News this Week
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
Some of Our Sources
- Slashdot
- Team Treehouse
- Smashing Magazine
- TutsPlus - Design
- Web Designer Depot
- Naldz Graphics
- FanExtra - PSD
- Android Dissected
- Android Headlines
- Willems Lab
Help Webnuz
Referal links:
December 20, 2021 09:17 am GMT
Original Link: https://dev.to/a2zproviders/responsive-nav-bar-design-step-by-step-4md6
The Ultimate Guide To Responsive Navigation Menu Bar - How to Create Responsive Menubar Step by Step!
The nav-bar is a critical part of the user interface that helps us navigate our web pages. It has become so important that it is included in the HTML standard. But, a lot of people get confused while using it and often overlook the fact that there are several options available to them, like responsive nav-bars. So heres an infographic with step by step instructions on how to create a responsive menubar on your website.
In this article, I will show you how to create a responsive nav-bar step by step. A responsive nav-bar is the one which adapts to the available screen size without any loss of functionality. In order to do that, we need to know about each part of the design and how it works in terms of positioning and size.
All Responsive Navigation Menu Bar check github
First step 1: create file with .html extension.
When HTML (Hypertext Markup Language) was first introduced in 1994, it was used to create simple websites that were readable and navigable by computers. However, with the advent of the Internet and the World Wide Web in 1995, its uses expanded exponentially. Nowadays, HTML is essential for all websites as it is what holds them together, creating them from flat text into interactive web pages that people can view on their computers or mobile devices.
The goal of HTML was to allow for the creation of documents that are accessible by any user with an Internet connection. Although the standard has been around since then, some implementations have fallen behind in terms of technology and security. Our website sand blasting machine all pages are designed with the help of html tags in php programming language.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title></head><body> <header class="header"> <div class="container"> <div class="header-main"> <div class="logo"> <a href="#">Logo</a> </div> <div class="open-nav-menu"> <span></span> </div> <div class="menu-overlay"></div> <!-- navigation menu start --> <nav class="nav-menu"> <div class="close-nav-menu"> <img src="/image/OIP.png" alt="close"> </div> <ul class="menu"> <li class="menu-item menu-item-has-children"> <a href="#" data-toggle="sub-menu">Home<i class="plus"></i></a> <ul class="sub-menu"> <li class="menu-item"> <a href="#">Home 1</a> </li> <li class="menu-item"> <a href="#">Home 1</a> </li> <li class="menu-item"> <a href="#">Home 1</a> </li> <li class="menu-item"> <a href="#">Home 1</a> </li> </ul> </li> <li class="menu-item"> <a href="#">About</a> </li> <li class="menu-item"> <a href="#">Services</a> </li> <li class="menu-item menu-item-has-children"> <a href="#" data-toggle="sub-menu">Pages <i class="plus"></i></a> <ul class="sub-menu"> <li class="menu-item"> <a href="#">Page 1</a> </li> <li class="menu-item"> <a href="#">Page 1</a> </li> <li class="menu-item"> <a href="#">Page 1</a> </li> <li class="menu-item"> <a href="#">Page 1</a> </li> </ul> </li> <li class="menu-item"> <a href="#">News</a> </li> <li class="menu-item"> <a href="#">Contact</a> </li> </ul> </nav> <!-- navigation menu end --> </div> </div> </header> <section class="home-section"> </section> <script src="js/javascript.js"></script></body></html>sponsored by shot blasting machine
Step 2:
Create a file style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');*{ margin: 0; padding: 0; box-sizing: border-box;}body{ line-height: 1.5; font-family: 'Poppins', sans-serif;}body.hidden-scrolling{ overflow-y: hidden;}:root{ --primary-color: #e91e63; --secondary-color: #34a4ef; --black-color: #000000;}ul{ list-style: none; margin: 0; padding: 0;}a{ text-decoration: none;}.container{ max-width: 1170px; margin: auto;}.header-main{ background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 10px 0px; border-radius: 4px;}.header .logo{ padding: 0 15px;}.header .logo a{ font-size: 30px; text-transform: uppercase; color: var(--primary-color); font-weight: 600;}.header .nav-menu{ padding: 0 15px;}.header .menu > .menu-item{ display: inline-block; margin-left: 30px; position: relative;}.header .menu > .menu-item > a{ display: block; padding: 12px 0; font-size: 16px; color: var( --black-color); text-transform: capitalize; font-weight: 600; transition: all 0.3s ease;}.header .menu > .menu-item > a .plus{ display: inline-block; height: 12px; width: 12px; position: relative; margin-left: 5px; pointer-events: none;}.header .menu > .menu-item > a .plus::before,.header .menu > .menu-item > a .plus::after{ content: ''; position: absolute; box-sizing: border-box; left: 50%; top: 50%; background-color: var(--black-color); height: 2px; width: 100%; transform: translate(-50%, -50%); transition: all 0.3s ease;}.header .menu > .menu-item-has-children.active > a .plus::after{ transform: translate(-50%, -50%) rotate(0deg);}.header .menu > .menu-item:hover > a .plus::before,.header .menu > .menu-item:hover > a .plus::after{ background-color: var(--primary-color);}.header .menu > .menu-item > a .plus::after{ transform: translate(-50%, -50%) rotate(-90deg) }.header .menu > .menu-item > .sub-menu >.menu-item > a:hover,.header .menu > .menu-item:hover > a{ color: var(--primary-color);}.header .menu > .menu-item > .sub-menu{ box-shadow: 0 0 10px rgba(0,0,0,0.2); width: 220px; position: absolute; left: 0; top: 100%; background-color: #fff; padding: 10px 0; border-top: 2px solid var(--primary-color); transform: translateY(10px); transition: all 0.3s ease; opacity: 0; visibility: hidden;}@media(min-width: 992px){ .header .menu > .menu-item-has-children:hover > .sub-menu{ transform: translateY(0); opacity: 1; visibility: visible; } .header .menu > .menu-item-has-children:hover > a .plus::after{ transform: translate(-50%, -50%) rotate(0deg); }}.header .menu > .menu-item > .sub-menu >.menu-item{ display: block;}.header .menu > .menu-item > .sub-menu >.menu-item > a{ display: block; padding: 10px 20px; font-size: 16px; font-weight: 600; color: var(--black-color); transition: all 0.3s ease; text-transform: capitalize;}.header{ position: absolute; padding: 15px; width: 100%; top: 0; left: 0; z-index: 99;}.header .open-nav-menu{ height: 34px; width: 40px; margin-right: 15px; align-items: center; display: none; justify-content: center; cursor: pointer;}.header .open-nav-menu span{ display: block; height: 3px; background-color: var(--black-color); width: 24px; position: relative;}.header .open-nav-menu span::before,.header .open-nav-menu span::after{ content: ''; position: absolute; left: 0; width: 100%; box-sizing: border-box; height: 100%; background-color: var(--black-color);}.header .open-nav-menu span::before{ top: -7px;}.header .open-nav-menu span::after{ top: 7px;}.header .close-nav-menu{ height: 40px; width: 40px; background-color: #fff; margin: 0 0 15px 15px; display: none; cursor: pointer; align-items: center; justify-content: center;}.header .close-nav-menu img{ width: 16px;}.header .menu-overlay{ position: fixed; z-index: 999; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; visibility: hidden; opacity: 0; transition: all 0.3s ease;}.header .menu-overlay.active{ visibility: visible; opacity: 1;}/* Home Section */.home-section{ width: 100%; min-height: 100vh; display: block; background: url(./image/bggirl.png); background-position: center top; background-size: cover;}/* responsive */@media (max-width: 991px){ .header .nav-menu{ position: fixed; right: -280px; visibility: hidden; top: 0; width: 280px; height: 100%; overflow-y: auto; background-color: #222222; z-index: 1000; padding: 15px 0; transition: all 0.5s ease; } .header .nav-menu.open{ visibility: visible; /* opacity: 1; */ right: 0px !important; /* display: block; */ } .header .menu > .menu-item{ display: block; margin: 0; } .header .menu > .menu-item-has-children > a{ display: flex; justify-content: space-between; align-items: center; } .header .menu > .menu-item > a{ color: #fff; padding: 12px 15px; border-bottom: 1px solid #333333; } .header .menu > .menu-item:first-child > a{ border-top: 1px solid #333333; } .header .menu > .menu-item > a .plus::before, .header .menu > .menu-item > a .plus::after{ background-color: #fff; } .header .menu > .menu-item > .sub-menu{ width: 100%; position: relative; opacity: 1; visibility: visible; border: none; background-color: transparent; box-shadow: none; transform: translateY(0px); padding: 0px; left: auto; top: auto; max-height: 0; overflow: hidden; } .header .menu > .menu-item > .sub-menu > .menu-item > a{ padding: 12px 45px; color: #fff; border-bottom: 1px solid #333333; } .header .close-nav-menu, .header .open-nav-menu{ display: flex; }}Step 3:
Create a file inside the folder (project folder) js/javascript.js
(() => { const openNavMenu = document.querySelector(".open-nav-menu"), closeNavMenu = document.querySelector(".close-nav-menu"), navMenu = document.querySelector(".nav-menu"); menuOverlay = document.querySelector(".menu-overlay"), mediaSize = 991; openNavMenu.addEventListener("click", toggleNav); closeNavMenu.addEventListener("click", toggleNav); // close the navbar by clicking outside menuOverlay.addEventListener("click", toggleNav); function toggleNav(){ navMenu.classList.toggle("open"); menuOverlay.classList.toggle("active"); document.body.classList.toggle("hidden-scrolling"); } navMenu.addEventListener("click",(event) =>{ if(event.target.hasAttribute("data-toggle") && window.innerWidth <= mediaSize){ //prevent default anchor click behavior event.preventDefault(); const menuItemHasChildren = event.target.parentElement; // if menuItemHasChildren is already expaded, collapse it if(menuItemHasChildren.classList.contains("active")){ collapseSubMenu(); } else{ // collapse existing expanded manuItemHasChildren if(navMenu.querySelector(".menu-item-has-children.active")) { collapseSubMenu(); } // expand new menuItemHasChildren menuItemHasChildren.classList.add("active"); const subMenu = menuItemHasChildren.querySelector(".sub-menu"); subMenu.style.maxHeight = subMenu.scrollHeight + "px"; } } }); function collapseSubMenu(){ navMenu.querySelector(".menu-item-has-children.active .sub-menu") .removeAttribute("style"); navMenu.querySelector(".menu-item-has-children.active") .classList.remove("active"); } function resizefix(){ // if navmenu is open , close it if(navMenu.classList.contains("open")){ toggleNav(); } // if menuItemHasChildren is expanded , collapse it if(navMenu.querySelector(".menu-item-has-children.active")){ collapseSubMenu(); } } window.addEventListener("resize", function(){ if(this.innerWidth > mediaSize){ resizefix(); } });})();what is responsive navigation bar
Responsive navigation bars are designed to change their size, shape, and style depending on the device they are being viewed on. They can also adapt to any screen size so that your website is accessible to everyone. check portable shot blasting machine
A responsive navigation bar is made up of two parts: a header and a footer. The header displays the logo and branding while the footer displays information such as site links or contact information.
Original Link: https://dev.to/a2zproviders/responsive-nav-bar-design-step-by-step-4md6
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To