I made this simple menu below, but I would like to make it more interactive for the user, inserting a hover when hovering both the icon when the menu is closed, and writing and the icon at the same time when the menu is open. I tried to apply the interaction with all the "primeiro" "segundo" classes... but it didn't work, does anyone have any idea of making this menu with a nice hover?
const openBtn = $('.open-btn');
const closeBtn = $('.close-btn');
const offcanvasMenu = $('.offcanvas-menu')
openBtn.on('click', function (e) {
e.preventDefault();
if (offcanvasMenu.hasClass('active')) {
offcanvasMenu.removeClass('active');
} else {
offcanvasMenu.addClass('active');
}
});.header-area {
background: #111;
display: flex;
height: 56px;
align-items: center;
justify-content: space-between;
}
a{
text-decoration: none;
color: #fff;
}
.logo a {
font-size: 30px;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
display: inline-block;
margin-left: 50px;
}
.icons {
position: absolute;
height: 100vh;
width: 60px;
background-color: #111;
top: 0;
left: 0;
z-index: 9;
}
.icons a, .offcanvas-menu a{
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.offcanvas-menu a{
padding: 0 1.5rem;
}
.offcanvas-menu {
padding-top: 56px;
position: fixed;
top: 0;
left: 0;
background: #111;
width: auto;
height: 100vh;
transform: translateX(-100%);
transition: all .4s ease;
z-index: 0;
}
.offcanvas-menu.active {
transform: translateX(60px);
}
.close-btn {
position: absolute;
top: 10px;
right: 30px;
font-size: 20px;
color: #fff;
}<!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">
<title>Off Canvas Menu</title>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
<!-- Header Area Start -->
<header class="header-area">
<nav class="icons d-flex flex-column align-items-center gap-3 text-light">
<a class="open-btn" href="#">
<i class="fa-solid fa-bars"></i>
</a>
<a class="primeiro">
<i class="fa-solid fa-solar-panel"></i>
</a>
<a class="segundo">
<i class="fa-solid fa-solar-panel"></i>
</a>
<a class="terceiro">
<i class="fa-solid fa-solar-panel"></i>
</a>
<a class="quarto">
<i class="fa-solid fa-solar-panel"></i>
</a>
<a class="quinto">
<i class="fa-solid fa-solar-panel"></i>
</a>
<a class="sexto">
<i class="fa-solid fa-solar-panel"></i>
</a>
<a class="sétimo">
<i class="fa-solid fa-solar-panel"></i>
</a>
</nav>
<nav class="offcanvas-menu main-menu d-flex flex-column align-items-center gap-3 text-light">
<a href="#" class="primeiro">Home</a>
<a href="#" class="segundo">About</a>
<a href="#" class="terceiro">Services</a>
<a href="#" class="quarto">Price</a>
<a href="#" class="quinto">Blog</a>
<a href="#" class="sexto">Contact</a>
</nav>
</header>
<!-- Header Area End -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>Add this to your JavaScript
const mouseoverEvent = new Event('mouseenter');
$(".offcanvas-menu a, .icons a").hover(function (obj) {
const classname = obj.target.classList[0];
$("."+classname).each((function (i,obj) {
obj.classList.add("hover")
}))
},
function (obj) {
const classname = obj.target.classList[0];
$("."+classname).each((function (i,obj) {
obj.classList.remove("hover")
}))
});
And this to your .css with the desired hover color
a.hover{
color: #f00;
}