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 here’s 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.
Top comments (1)
The Ultimate Guide to Creating a Responsive Navigation Menu Bar
Responsive navigation menus are crucial components of user interfaces, aiding in efficient website navigation. While the HTML standard includes navigation bars, many overlook the options available, like responsive ones. Here's an infographic with step-by-step instructions on crafting a responsive menu for your site.
In this tutorial, I'll guide you through creating a responsive navigation menu bar. A responsive menu adapts to varying screen sizes without losing functionality. To achieve this, understanding each design part's positioning and sizing is crucial.
Step 1: Create an HTML file with a .html extension. HTML, introduced in 1994, initially served simple, readable websites. Now, it's essential for creating interactive web pages. The provided code showcases an HTML structure for a navigation menu.
Step 2: Develop a style.css file to handle the menu's visual aspects. This includes defining colors, fonts, layout, and responsiveness. The CSS code provided styles the navigation menu, ensuring it adapts to different screen sizes.
Step 3: Implement JavaScript functionality to enhance user interaction. The JavaScript code controls the opening and closing of the navigation menu, ensuring smooth transitions and compatibility with various devices.
What is a responsive navigation bar?
A responsive navigation bar adjusts its size, shape, and style based on the device it's viewed on, ensuring accessibility across different screen sizes. It typically consists of a header and footer, displaying branding and essential information, respectively.
Crafting a responsive navigation menu bar enhances user experience, making your website accessible and user-friendly across devices.
Menupriceph.com is your ultimate source to discover the latest menu prices in the Philippines. Find your favorite menu now at affordable prices.