我制作了这个侧边菜单，它的图标固定在屏幕的一侧，当点击菜单栏时会打开完整的菜单。我只是想不出一个方法来使它响应，我想在990px的时候只让菜单栏出现在标题中，但是我想不出一个方法来显示图标和完整的菜单，当我点击的时候，我该怎么做呢？
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');
}
});
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")
}))
});.header-area {
background: #111;
display: flex;
height: 40px;
align-items: center;
justify-content: space-between;
}
a{
text-decoration: none !important;
color: #fff !important;
}
.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{
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.offcanvas-menu a{
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: start;
}
.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;
}
a.hover{
color: #000 !important;
background-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/bootstrap@5.2.2/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="home">
<i class="fa-solid fa-house"></i>
</a>
<a class="plants">
<i class="fa-solid fa-solar-panel"></i>
</a>
<a class="calendar">
<i class="fa-solid fa-calendar-days"></i>
</a>
<a class="form">
<i class="fa-solid fa-table-list"></i>
</a>
<a class="reports">
<i class="fa-solid fa-file-invoice-dollar"></i>
</a>
<a class="credit">
<i class="fa-solid fa-circle-dollar-to-slot"></i>
</a>
<a class="plantUcs">
<i class="fa-solid fa-building-user"></i>
</a>
<a class="invoice">
<i class="fa-solid fa-barcode"></i>
</a>
<a class="ucs">
<i class="fa-solid fa-city"></i>
</a>
<a class="client">
<i class="fa-solid fa-users"></i>
</a>
<a class="analysis">
<i class="fa-solid fa-magnifying-glass-chart"></i>
</a>
<a class="signature">
<i class="fa-solid fa-file-signature"></i>
</a>
<a class="monitoring">
<i class="fa-solid fa-file-invoice"></i>
</a>
<a class="contact">
<i class="fa-solid fa-headset"></i>
</a>
<a class="config">
<i class="fa-solid fa-gear"></i>
</a>
<a class="user">
<i class="fa-solid fa-user"></i>
</a>
</nav>
<nav class="offcanvas-menu main-menu d-flex flex-column align-items-center gap-3 text-light">
<a href="#" class="home">Home</a>
<a href="#" class="plants">Usinas</a>
<a href="#" class="calendar">Calendário</a>
<a href="#" class="form">Formulários</a>
<a href="#" class="reports">Relatórios</a>
<a href="#" class="credit">Sistema de crédito</a>
<a href="#" class="plantUcs">UCS da usina</a>
<a href="#" class="invoice">Faturas</a>
<a href="#" class="ucs">UCS</a>
<a href="#" class="client">Clientes</a>
<a href="#" class="analysis">Análises</a>
<a href="#" class="signature">Gerenciamento de assinatura</a>
<a href="#" class="monitoring">Portais de monitoramento</a>
<a href="#" class="contact">Contato</a>
<a href="#" class="config">Configurações</a>
<a href="#" class="user">
<i class="fa-solid fa-arrow-right fa-2xs me-3"></i>
Sair
</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>
1条答案
按热度按时间bqujaahr1#
期望此类打开菜单。
可以添加一个媒体 prop 到你的css像这样
当窗口大于990px时将打开菜单。
如果没有
!important关键字也能正常工作，请尝试省略该关键字。在css中有多个相同的值有时会很烦人。可以使用
:root指令来帮助解决这个问题。例如