0

I made this side menu, which has the icons fixed on the screen on the side, when clicking on the bars opens the full menu. I just can't think of a way to make it responsive, I'd like to make only the menu bars appear in the header when it's 990px, but I can't think of a way to show the icons and the full menu when I click, how can I do that that?

Menu open

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/[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="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>

2
  • your css in @media screen and (max-width: 990px) { display:block } this bracket. and outside of this bracket menu class hide Commented Nov 4, 2022 at 11:57
  • Why are you writing your own version of offcanvas? You can easily show the labels only for larger screens with display classes.
    – isherwood
    Commented Nov 4, 2022 at 13:18

1 Answer 1

0

Expecting that this class opens the menu.

.offcanvas-menu.active {
    transform: translateX(60px);
}

Can add a media prop to your css like so

@media (max-width:990px) {
    .offcanvas-menu {
        transform: translateX(60px) !important;
    }
}

which will open the menu when window is larger than 990px.
Try omitting the !important keyword if it works without it.

Having multiple same values in css can be annoying at times. Can use :root directive to help with that.

As an exmaple

:root {
    --menu-translate-x: 60px;
}

.offcanvas-menu.active {
    transform: translateX(var(--menu-translate-x));
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.