index.html
<!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>
<link href="https://fonts.googleapis.com/css?family=Psoppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="#">Atech Seva</a></li>
<li class="item"><a href="#">Home</a></li>
<li class="item"><a href="#">About</a></li>
<li class="item has-submenu">
<a tabindex="0">Services</a>
<ul class="submenu">
<li class="subitem"><a href="#">Design</a></li>
<li class="subitem"><a href="#">Development</a></li>
<li class="subitem"><a href="#">SEO</a></li>
<li class="subitem"><a href="#">Copywriting</a></li>
</ul>
</li>
<li class="item has-submenu">
<a tabindex="0">Plans</a>
<ul class="submenu">
<li class="subitem"><a href="#">Freelancer</a></li>
<li class="subitem"><a href="#">Startup</a></li>
<li class="subitem"><a href="#">Enterprise</a></li>
</ul>
</li>
<li class="item"><a href="#">Blog</a></li>
<li class="item"><a href="#">Contact</a>
</li>
<li class="item button "><a href="" class="p-0"><button class="reg">Sign up</button></a></li>
<li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
}
nav {
background: rgb(255, 255, 255);
padding: 0 15px;
border-bottom: 1px solid gainsboro;
box-shadow: 0px 8px 26px -12px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0px 8px 26px -12px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 8px 26px -12px rgba(0, 0, 0, 0.75);
}
a {
color: rgb(37, 37, 37);
text-decoration: none;
}
.reg {
color: white;
background-color: rgba(104, 85, 224, 1);
}
.p-0 {
padding: 0 !important;
}
button {
cursor: pointer;
border: 0;
border-radius: 4px;
font-weight: 600;
margin: 0;
width: 100px;
padding: 10px 0;
box-shadow: 0 0 20px rgb(104 85 224 / 20%);
transition: 0.4s;
}
button:hover {
color: white;
box-shadow: 0 0 20px rgba(104, 85, 224, 0.6);
background-color: rgba(104, 85, 224, 1);
}
.menu,
.submenu {
list-style-type: none;
}
.logo {
font-size: 20px;
padding: 7.5px 10px 7.5px 0;
}
.item {
padding: 10px;
cursor: pointer;
user-select: none;
}
.item.button {
padding: 9px 5px;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.menu li a {
display: block;
padding: 15px 5px;
}
.menu li.subitem a {
padding: 15px;
color: rgb(0 0 0);
font-size: 13px;
}
.toggle {
order: 1;
font-size: 20px;
}
.item.button {
order: 2;
}
.item {
order: 3;
width: 100%;
text-align: center;
display: none;
}
.active .item {
display: block;
}
.item a:hover {
color: black;
}
/* Submenu up from mobile screens */
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.submenu-active a:hover {
color: white;
}
.submenu-active a {
color: white;
}
.has-submenu i {
font-size: 12px;
}
.has-submenu>a::after {
font-family: "Font Awesome 5 Free";
font-size: 12px;
line-height: 16px;
font-weight: 900;
content: "\f078";
color: rgb(37, 37, 37);
padding-left: 5px;
}
.submenu-active>a::after {
font-family: "Font Awesome 5 Free";
font-size: 12px;
line-height: 16px;
font-weight: 900;
content: "\f078";
color: rgb(255, 255, 255);
padding-left: 5px;
}
.subitem a {
padding: 10px 15px;
}
.submenu-active {
background-color: #111;
border-radius: 3px;
}
.subitem {
border-bottom: 1px solid;
}
@media only screen and (max-width: 700px) {
.menu li.subitem a {
color: white;
}
}
/* Tablet menu */
@media all and (min-width: 700px) {
.menu {
justify-content: center;
}
.logo {
flex: 1;
}
.item.button {
width: auto;
order: 1;
display: block;
}
.toggle {
flex: 1;
text-align: right;
order: 2;
}
}
/* Desktop menu */
@media all and (min-width: 960px) {
.menu {
align-items: center;
flex-wrap: nowrap;
background: none;
}
.logo {
order: 0;
}
.item {
order: 1;
position: relative;
display: block;
width: auto;
}
.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background: #f1f1f1;
border: 1px solid #afafaf;
width: 200px;
}
.toggle {
display: none;
}
.submenu-active {
color: rgb(255, 255, 255);
border-radius: 0;
}
}main.js
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
const items = document.querySelectorAll(".item");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Activate Submenu */
function toggleItem() {
if (this.classList.contains("submenu-active")) {
this.classList.remove("submenu-active");
} else if (menu.querySelector(".submenu-active")) {
menu.querySelector(".submenu-active").classList.remove("submenu-active");
this.classList.add("submenu-active");
} else {
this.classList.add("submenu-active");
}
}
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
if (menu.querySelector(".submenu-active")) {
let isClickInside = menu
.querySelector(".submenu-active")
.contains(e.target);
if (!isClickInside && menu.querySelector(".submenu-active")) {
menu.querySelector(".submenu-active").classList.remove("submenu-active");
}
}
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
if (item.querySelector(".submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
17.52 KB