Make dropdown menu in css like in the picture - javascript

I have questions about how to reproduce the following:
I have the menu like this:
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav li:last-child a:before {
display: none;
}
nav li a {
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav li a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav li a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav li a:hover:after {
display: block;
}
<nav>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
</nav>
But, I don't know how to make the drop-down list like the picture shown above.
I hope someone can help me. Thank you in advance!

Hey This is what You want :) I hope
body {
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
.nav__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
.nav__li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
.nav__li:last-child a:before {
display: none;
}
.nav__li:hover > a {
background: red;
}
.nav__li:hover > a:after {
display: block;
}
.nav__li:hover .sub__category {
visibility: visible;
opacity: 1;
}
.nav__li > a {
display: inline-block;
padding: 25.6px 0.6em 0.7em 0.6em;
position: relative;
font-size: 18px;
line-height: 1;
}
.nav__li > a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 25.6px;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
}
.nav__li > a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #ffaf1a;
z-index: 2;
}
.sub__category {
visibility: hidden;
opacity: 0;
}
.sub__category {
position: absolute;
top: 100%;
left: 0px;
min-width: 160px;
width: 100%;
z-index: 3;
margin: 0 .5em;
padding-top: 25.6px;
-webkit-transition: all .12s linear;
transition: all .12s linear;
}
.sub__li {
text-align: center;
border-bottom: 2px #000 solid;
background: red;
}
.sub__link {
padding: .7em 1em;
display: block;
font-size: 14px;
}
.sub__link:hover {
background: #fff;
color: #000;
}
<nav>
<ul class="nav__cat">
<li class="nav__li">Menu 1</li>
<li class="nav__li">Menu 23
<ul class="sub__category">
<li class="sub__li">
Subcategory
</li>
<li class="sub__li">
Subcategory 2
</li>
<li class="sub__li">
Subcategory 3
</li>
</ul>
</li>
<li class="nav__li">Menu 345
<ul class="sub__category">
<li class="sub__li">
Subcategory
</li>
<li class="sub__li">
Subcategory 2
</li>
<li class="sub__li">
Subcategory 3
</li>
</ul>
</li>
<li class="nav__li">Menu 4567</li>
<li class="nav__li">Menu 56789</li>
</ul>
</nav>

For starters, you obviously will need some content in each of the menus!
Make sure to open this in the full page.
There is still a lot more styling work that needs to be done to achieve the result you want, but hopefully this helps you get moving in the right direction.
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav .mainmenu {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
text-align: center;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav .firstlevel {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav .firstlevel:last-child a:before {
display: none;
}
nav .firstlevel a {
width: 120px;
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav .firstlevel a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav .firstlevel a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover:after {
display: block;
}
.firstlevel{
vertical-align: top;
}
.submenu_group{
display:none;
padding-left: 0px;
}
li{
list-style-type: none;
}
li .submenu{
display: block;
width: 120px;
}
.active:hover .submenu_group{
display: block;
}
<body>
<nav>
<ul class="mainmenu">
<li class='firstlevel active'>
Home
<ul class='submenu_group'>
<li>
<a class='submenu'>first item</a>
</li>
<li>
<a class='submenu'>second item</a>
</li>
<li>
<a class='submenu'>third item</a>
</li>
</ul>
</li>
<li class='firstlevel'>
<div>
About Us
</div>
</li>
<li class='firstlevel'>
<div>
Products
</div>
</li>
<li class='firstlevel'>
<div>
Contact
</div>
</li>
</ul>
</nav>
</body>

Here a fiddle of improved #Our_Benfactors answer
fiddle
body {
background: white;
margin: 0;
padding: 0;
}
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav .mainmenu {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
text-align: center;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav .firstlevel {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav .firstlevel:last-child a:before {
display: none;
}
nav .firstlevel a {
width: 120px;
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav .firstlevel a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav .firstlevel a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
nav .firstlevel a:hover {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav .firstlevel a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.active .submenu_group a:after {
background: transparent;
}
.active .submenu_group a {
background:#b42024;
}
.active .submenu_group a:hover {
background: #fff;
color:#000;
border-top: 2px inset #000;
border-bottom: 2px inset #000;
}
.active .submenu_group li:first-child a:hover {
border-top: 0;
}
nav .firstlevel a:hover:after {
display: block;
}
.firstlevel{
vertical-align: top;
}
.submenu_group{
display:none;
padding-left: 0px;
}
.active .submenu_group li:first-child a {
margin-top: 28px;
}
.active .submenu_group a {
padding: 10px;
}
.active:hover .submenu_group {
display: block;
position: absolute;
background: #000;
}
li{
list-style-type: none;
}
li .submenu{
display: block;
width: 120px;
}
.active:hover .submenu_group{
display: block;
}
<body>
<nav>
<ul class="mainmenu">
<li class='firstlevel active'>
Home
<ul class='submenu_group'>
<li>
<a class='submenu'>first item</a>
</li>
<li>
<a class='submenu'>second item</a>
</li>
<li>
<a class='submenu'>third item</a>
</li>
</ul>
</li>
<li class='firstlevel'>
<div>
About Us
</div>
</li>
<li class='firstlevel'>
<div>
Products
</div>
</li>
<li class='firstlevel'>
<div>
Contact
</div>
</li>
</ul>
</nav>
</body>

Related

Dropdown list appears (on hover) even when it's hidden inside the mobile menu

In my navbar I have a li item that opens a dropdown menu when someone hovers over it. In small screens I have a hamburger menu that hides it.
The problem is that in mobile view, even though the li item is "hidden" inside the menu when someone hovers over its position on screen it appears (even though it is hidden inside the menu).
I think that this probably happens because I set "visibility: hidden;" but I don't know how else to do it.
I mean I want to dropdown when someones hover it on desktop view but on mobile I want to dropdown only if someones open the menu and then hover over it (or maybe click on it).
To save space I included below only the code that I find more relevant.
$(function() {
$(".toggle").on("click", function() {
if ($(".item").hasClass("active")) {
$(".item").removeClass("active");
} else {
$(".item").addClass("active");
}
});
});
nav {
background: #3e3e40;
padding: 0 20px;
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
visibility: visible;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
#media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
#media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
Home
</li>
<li class="item">
Store
</li>
<li class="dropdwn item">
<span class="item">Categories</span>
<ul class="dropdwn-content">
<li>Product1</li>
<li>Product2</li>
</ul>
</li>
<li class="item">
Login
</li>
<li class="item">
Signup
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>
I solved it using media queries
Adjust for whatever pixle size you want
Code Pen Link:
Click Here
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
Home
</li>
<li class="item">
Store
</li>
<!-- dropdwn -->
<li class=" item dropdwn">
<span class="item">Categories</span>
<ul class="dropdwn-content disapear">
<li class="disapear">Product1</li>
<li class="disapear">Product2</li>
</ul>
</li>
<li class="item">
Login
</li>
<li class="item">
Signup
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>
nav {
background: #3e3e40;
padding: 0 20px;
}
#media all and (max-width:800px){
.disapear{
display: none;
}
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
#media all and (min-width: 800px){
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
#media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
#media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}

Responsive header not opening or closing header

I'm creating a responsive header for a website I'm creating and I'm not getting this output where when my browser gets small enough the bars icon comes up to press. But for some reason when I try to open up the menu it does not work. I'm looking for some help on this I can't seem to figure it out as I'm not very knowledgeable in JavaScript, CSS, HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="css1/headercss2.css">
<script src="javascript/script.js" defer></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<nav>
<div class="menu-icons">
<i class="fas fa-bars"></i>
</div>
<a href="#" class="logo">
<img class="logo" src="images/logo_trans.png" alt="logo" style="height: 75px;">
</a>
<ul class="nav-list">
<li>
Home
</li>
<li>
<a href="#">Services
<i class="fas fa-sort-down"></i>
</a>
<ul class="sub-menu">
<li>
Business Printing
</li>
<li>
Canvas Printing
</li>
<li>
Embroidery
</li>
<li>
Signs
</li>
</ul>
</li>
<li>
Partners
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li class="move-right btn">
Cart
</li>
</ul>
</nav>
</div>
</header>
<script src="javascript/script.js"></script>
</body>
</html>
CSS
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.containter {
width: 100%;
max-width: 117rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.menu-icons{
color: #eee;
font-size: 4rem;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 1500;
display: none;
}
nav {
display: flex;
align-items: center;
width: 100%;
height: 8rem;
border-bottom: 1px solid rgba(225,225,225, 0.1);
}
.logo {
display: flex;
margin-right: 5rem;
}
.nav-list {
display: flex;
width: 100%;
align-items: center;
}
.nav-list li {
line-height: 8rem;
position: relative;
}
.sub-menu li {
line-height: 4rem;
}
.nav-list a {
display: block;
color: white;
background-color: #1E90FF;
padding: 0 1.5rem;
font-size: 1.4rem;
text-transform: uppercase;
transition: color 650ms;
}
.nav-list a:hover {
color: black;
background-color: yellow;
}
.btn {
padding: 1.3rem;
display: inline-block;
background-color: #1E90FF;
border: 2px solid #1E90FF;
border-radius: 5rem;
}
.btn:hover {
color: black;
background-color: yellow;
}
.sub-menu {
width: 20rem;
display: block;
position: absolute;
border-top: 3px solid #00BFFF;
z-index: 100;
top: 16rem;
transition: all 650ms ease;
opacity: 0;
visibility: hidden;
}
.sub-menu::before {
content: '';
position: absolute;
top: -2.5rem;
left: 3rem;
border: 1.2rem solid transparent;
border-bottom-color: #00BFFF;
}
.sub-menu .sub-menu::before {
top: .9rem;
left: -2.5rem;
border: 1.2rem solid transparent;
border-right-color: #00BFFF;
}
.sub-menu .sub-menu{
border-top: none;
border-left: 3px solid #00BFFF;
top: 0;
left: 160%;
}
.nav-list li:hover > .sub-menu {
top: 8rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover > .sub-menu {
top: 0;
left: 100%;
}
li.move-right {
margin: auto 0 auto auto;
line-height: initial;
}
#media screen and (max-width: 850px) {
.nav-list {
position: fixed;
top: 0;
left: 0;
height: 100vh;
display:none;
align-items: initial;
flex-direction: column;
background-color: #1E90FF;
z-index: 1000;
}
.nav-list li {
line-height: 6rem;
}
.sub-menu {
position: initial;
border: 3px solid transparent;
border-left-color: #00BFFF;
margin-left: 1rem;
max-height: 0;
}
.sub-menu::before {
display: none;
}
.nav-list li:hover > .sub-menu{
opacity: 1;
visibility: visible;
max-height: initial;
}
li.move-right {
margin: 0 auto 0 0;
line-height: initial;
}
.menu-icons {
display: block;
}
.fas fa-times {
display: none;
}
nav.active .fas fa-times{
display: block;
}
nav.active .fas fa-bars{
display: none;
}
nav.active .nav-list {
display:flex;
}
}
JavaScript
const selectElement = (element) => document.querySelector(element);
selectElement('.menu-icons').addEventListener('click', () => {
selectElement{'nav').classList.toggle('active');
);
You have an extra { where you should have a (:
document.querySelector('.menu-icons').addEventListener('click', () => {
document.querySelector('nav').classList.toggle('active');
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.containter {
width: 100%;
max-width: 117rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.menu-icons {
color: #eee;
font-size: 4rem;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 1500;
}
nav {
display: flex;
align-items: center;
width: 100%;
height: 8rem;
border-bottom: 1px solid rgba(225, 225, 225, 0.1);
}
.logo {
display: flex;
margin-right: 5rem;
}
.nav-list {
display: flex;
width: 100%;
align-items: center;
}
.nav-list li {
line-height: 8rem;
position: relative;
}
.sub-menu li {
line-height: 4rem;
}
.nav-list a {
display: block;
color: white;
background-color: #1E90FF;
padding: 0 1.5rem;
font-size: 1.4rem;
text-transform: uppercase;
transition: color 650ms;
}
.nav-list a:hover {
color: black;
background-color: yellow;
}
.btn {
padding: 1.3rem;
display: inline-block;
background-color: #1E90FF;
border: 2px solid #1E90FF;
border-radius: 5rem;
}
.btn:hover {
color: black;
background-color: yellow;
}
.sub-menu {
width: 20rem;
display: block;
position: absolute;
border-top: 3px solid #00BFFF;
z-index: 100;
top: 16rem;
transition: all 650ms ease;
opacity: 0;
visibility: hidden;
}
.sub-menu::before {
content: '';
position: absolute;
top: -2.5rem;
left: 3rem;
border: 1.2rem solid transparent;
border-bottom-color: #00BFFF;
}
.sub-menu .sub-menu::before {
top: .9rem;
left: -2.5rem;
border: 1.2rem solid transparent;
border-right-color: #00BFFF;
}
.sub-menu .sub-menu {
border-top: none;
border-left: 3px solid #00BFFF;
top: 0;
left: 160%;
}
.nav-list li:hover>.sub-menu {
top: 8rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover>.sub-menu {
top: 0;
left: 100%;
}
li.move-right {
margin: auto 0 auto auto;
line-height: initial;
}
#media screen and (max-width: 850px) {
.nav-list {
position: fixed;
top: 0;
left: 0;
height: 100vh;
display: none;
align-items: initial;
flex-direction: column;
background-color: #1E90FF;
z-index: 1000;
}
.nav-list li {
line-height: 6rem;
}
.sub-menu {
position: initial;
border: 3px solid transparent;
border-left-color: #00BFFF;
margin-left: 1rem;
max-height: 0;
}
.sub-menu::before {
display: none;
}
.nav-list li:hover>.sub-menu {
opacity: 1;
visibility: visible;
max-height: initial;
}
li.move-right {
margin: 0 auto 0 0;
line-height: initial;
}
.menu-icons {
display: block;
}
.fas fa-times {
display: none;
}
nav.active .fas fa-times {
display: block;
}
nav.active .fas fa-bars {
display: none;
}
nav.active .nav-list {
display: flex;
}
}
<header>
<div class="container">
<nav>
<div class="menu-icons">
<i class="fas fa-bars"></i> text
</div>
<a href="#" class="logo">
<img class="logo" src="images/logo_trans.png" alt="logo" style="height: 75px;">
</a>
<ul class="nav-list">
<li>
Home
</li>
<li>
<a href="#">Services
<i class="fas fa-sort-down"></i>
</a>
<ul class="sub-menu">
<li>
Business Printing
</li>
<li>
Canvas Printing
</li>
<li>
Embroidery
</li>
<li>
Signs
</li>
</ul>
</li>
<li>
Partners
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li class="move-right btn">
Cart
</li>
</ul>
</nav>
</div>
</header>

Can a header slide under a sticky navbar?

I want the heading to "slide" along under the navbar. But now it looks like the picture.
I have just started and would be very happy about some support. I already have some experience with HTML and CSS but now I don't know what to do.
My goal is to have the heading slide under the navbar.
sorry for the long CSS:)
HTML (shorted)
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
text-align: center;
}
.nav div.logo {
float: left;
width: auto;
height: auto;
padding-left: 3rem;
}
.nav div.logo a {
text-decoration: none;
color: #fff;
font-size: 3.5rem;
}
.nav div.main_list {
height: 65px;
float: right;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav div.main_list ul li {
width: auto;
height: 65px;
padding: 0;
padding-right: 3rem;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
font-size: 2.4rem;
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-image: url(./../img/hero.jpg);
background-position: center-top;
background-size: cover;
}
div.home h1 {
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 15rem;
}
.navTrigger {
display: none;
}
.nav {
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
<nav class="nav">
<div class="container">
<div class="logo">
Leon Vu
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<span class="navTrigger">
</span>
</div>
</nav>

My href attribute in my dropdown menu list is not working

I'm trying to create a dropdown menu list for my website that I'm working on my own. While I was making a dropdown list for my website, I ran into some problems. When I try to click one of the list in my dropdown menu, it doesn't head or open to the page where the href attribute is referencing it to. The same goes to all of my lists in my dropdown menu. How can I solve this problem so that my href links will work for each of my list?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Bebas Neue', cursive;
font-weight: 600;
font-size: 30;
background-color: #5D5C61;
background-size: cover;
}
.dropdown {
position: absolute;
height: 9%;
width: 100%;
top: 0%;
background: #C5C6C7;
display: flex;
justify-content: space-around;
align-items: center;
}
.dropdown h2 {
font-size: 60;
position: relative;
left: 30px;
top: 3;
padding: 0px;
}
.brands,
.sneakers,
.gears {
position: relative;
}
.brands ul,
.sneakers ul,
.gears ul {
position: absolute;
top: 155%;
background: #C5C6C7;
margin-top: 18px;
width: 200px;
height: 210px;
display: flex;
overflow: hidden;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
font-weight: lighter;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: all 0.4s ease;
}
.brands a,
.sneakers a,
.gears a {
color: black;
text-decoration: none;
}
.brands li,
.sneakers li,
.gears li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.brands li:hover,
.sneakers li:hover,
.gears li:hover {
background: #c6c0dd;
}
.dropdown button {
background: none;
border: none;
color: black;
font-size: 20px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.dropdown button:hover {
color: grey;
}
.dropdown h2 a {
color: black;
text-decoration: none;
}
.brands button:focus+ul,
.sneakers button:focus+ul,
.gears button:focus+ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}
.brands button {
position: relative;
left: 53px;
}
.sneakers button {
position: relative;
left: 48px;
}
.gears button {
position: relative;
left: 10px;
}
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script>
<nav>
<div class="dropdown">
<h2>RBZ</h2>
<div class="brands">
<button>BRANDS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="sneakers">
<button>SNEAKERS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="gears">
<button>GEAR & APPAREL</button>
<ul>
<li>BACKPACK</li>
<li>CLOTHES</li>
<li>ACCESSORIES</li>
</ul>
</div>
</div>
</nav>
Your problem is pointer-events, specifically pointer-events:all, which is experimental and only applies to SVG anyway. Use pointer-events:auto instead.
Also as John mentioned in his answer, you are going to get race conditions on click of another element like a link with the use of focus on the button. Your overall approach to this should be reconsidered.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Bebas Neue', cursive;
font-weight: 600;
font-size: 30;
background-color: #5D5C61;
background-size: cover;
}
.dropdown {
position: absolute;
height: 9%;
width: 100%;
top: 0%;
background: #C5C6C7;
display: flex;
justify-content: space-around;
align-items: center;
}
.dropdown h2 {
font-size: 60;
position: relative;
left: 30px;
top: 3;
padding: 0px;
}
.brands,
.sneakers,
.gears {
position: relative;
}
.brands ul,
.sneakers ul,
.gears ul {
position: absolute;
top: 155%;
background: #C5C6C7;
margin-top: 18px;
width: 200px;
height: 210px;
display: flex;
overflow: hidden;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
font-weight: lighter;
opacity: 0;
/*pointer-events: none;*/
transform: translateY(-10px);
transition: all 0.4s ease;
}
.brands a,
.sneakers a,
.gears a {
color: black;
text-decoration: none;
}
.brands li,
.sneakers li,
.gears li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.brands li:hover,
.sneakers li:hover,
.gears li:hover {
background: #c6c0dd;
}
.dropdown button {
background: none;
border: none;
color: black;
font-size: 20px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.dropdown button:hover {
color: grey;
}
.dropdown h2 a {
color: black;
text-decoration: none;
}
.brands button:focus+ul,
.sneakers button:focus+ul,
.gears button:focus+ul {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
.brands button {
position: relative;
left: 53px;
}
.sneakers button {
position: relative;
left: 48px;
}
.gears button {
position: relative;
left: 10px;
}
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script>
<nav>
<div class="dropdown">
<h2>RBZ</h2>
<div class="brands">
<button>BRANDS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="sneakers">
<button>SNEAKERS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="gears">
<button>GEAR & APPAREL</button>
<ul>
<li>BACKPACK</li>
<li>CLOTHES</li>
<li>ACCESSORIES</li>
</ul>
</div>
</div>
</nav>
The issue comes from your css . Remove this line pointer-events: none;
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible
Your issue is with using focus to display your dropdown menu. The moment you click away from your button, i.e. you click your link on your menu, it is no longer in focus and thus your dropdown menu disappears. I would recommend using an onclick function or using a checkbox instead of a button to achieve what you want.
Here's an example using the checkbox method.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Bebas Neue', cursive;
font-weight: 600;
font-size: 30;
background-color: #5D5C61;
background-size: cover;
}
.dropdown {
position: absolute;
height: 9%;
width: 100%;
top: 0%;
background: #C5C6C7;
display: flex;
justify-content: space-around;
align-items: center;
}
.dropdown h2 {
font-size: 60;
position: relative;
left: 30px;
top: 3;
padding: 0px;
}
.brands,
.sneakers,
.gears {
position: relative;
}
.brands ul,
.sneakers ul,
.gears ul {
position: absolute;
top: 155%;
background: #C5C6C7;
margin-top: 18px;
width: 200px;
height: 210px;
display: none;
overflow: hidden;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
font-weight: lighter;
transform: translateY(-10px);
transition: all 0.4s ease;
}
.brands a,
.sneakers a,
.gears a {
color: black;
text-decoration: none;
}
.brands li,
.sneakers li,
.gears li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.brands li:hover,
.sneakers li:hover,
.gears li:hover, .box:hover {
background: #c6c0dd;
}
.box {
background: none;
border: none;
color: black;
font-size: 20px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.box:hover {
color: grey;
}
.dropdown h2 a {
color: black;
text-decoration: none;
}
.box input {
display: none;
}
.box input:checked +ul{
display: flex;
pointer-events: all;
transform: translateY(0px);
}
.brands button {
position: relative;
left: 53px;
}
.sneakers button {
position: relative;
left: 48px;
}
.gears button {
position: relative;
left: 10px;
}
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script>
<nav>
<div class="dropdown">
<h2>RBZ</h2>
<div class="brands">
<label class="box">BRANDS
<input type="checkbox" >
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</label>
</div>
<div class="sneakers">
<label class="box">SNEAKERS
<input type="checkbox" >
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</label>
</div>
<div class="gears">
<label class="box">GEAR & APPAREL
<input type="checkbox" >
<ul>
<li>BACKPACK</li>
<li>CLOTHES</li>
<li>ACCESSORIES</li>
</ul>
</label>
</div>
</div>
</nav>

Make menu in CSS like in the picture

I have questions about how to reproduce the following:
I would like to know how I should proceed to make this menu conform to the picture above. I do not want anything ready, but a way to get the expected result.
So far, I have the following code:
body{
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
}
nav:after{
content: '';
border-bottom: 10px solid black;
width: 100%;
position: fixed;
margin-top: 5px;
}
nav li {
display: inline-block;
list-style: none;
}
nav li a {
color: #fff;
display: inline-block;
font-weight: bold;
padding: 20px 15px 15px 15px;
text-decoration: none;
}
nav li a:hover {
background: red;
color: #fff;
}
nav li a:hover:after {
content: '';
border-bottom: 10px solid yellow;
position: fixed;
width: auto;
margin-top: 54px;
left: 0;
right: 0;
z-index: 1;
}
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
I hope someone can help me. Thank you in advance!
You can try this solution should be helpful
body {
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav li:last-child a:before {
display: none;
}
nav li a {
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav li a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav li a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #ffaf1a;
z-index: 2;
}
nav li a:hover {
background: red;
color: #fff;
}
nav li a:hover:after {
display: block;
}
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 23</li>
<li>Menu 345</li>
<li>Menu 44567</li>
<li>Menu 567889</li>
</ul>
</nav>
Here it is: https://jsfiddle.net/97cyvmcy/
Simply, just use two linear gradients to achieve the desired effect:
One with red and yellow stripes:
li a:hover {
background: linear-gradient(to bottom, red 0%, red 90%, yellow 90%, yellow 100%);
}
And the other with black and white stripes at the bottom:
nav:after {
content:' ';
width: 100%;
height: 15px;
position: absolute;
bottom: 10px;
background:linear-gradient(to bottom, black 0%, black 50%, white 50%, white 100%);
}
Stick the elements out of the bottom of the nav with this code: https://jsfiddle.net/d379Lagm/
body{
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
outline: 5px solid #000;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
list-style: none;
}
nav li a {
color: #fff;
display: inline-block;
font-weight: bold;
padding: 20px 15px 15px 15px;
text-decoration: none;
position: relative;
border-bottom: 5px solid transparent;
}
nav li a:hover {
background: red;
color: #fff;
}
nav li a:after {
position: absolute;
left: 0;
right: 0;
background: transparent;
height: 5px;
content: "";
transform: translateY(950%);
}
nav li a:hover:after {
background: yellow;
}

Categories