Header Side Menu - Custom Component

PHOTO EMBED

Wed Jan 08 2025 06:18:25 GMT+0000 (Coordinated Universal Time)

Saved by @vishalsingh21

// Custom Component
<div class="side-menu">
    <div class="side-menu-top">
        <div class="side-menu-logo">
            <img src="//published-assets.ari-build.com/Content/Published/Site/{{Site.Id}}/images/dealer-logo.png" alt="{{Locations.0.Name}}" />
        </div>
        <div class="side-menu-close">
            <span>&#x2716</span>
        </div>
    </div>
    <div class="side-menu-items">
        <a href="/" title="Home">Home</a>
        <a href="/new-models" title="New Models">New Models</a>
        <a href="/search/inventory" title="Inventory">Inventory</a>
        <a href="/servicereq" title="Services">Services</a>
        <a href="/aboutus" title="Company Info">Company Info</a>
        <a href="/contactus" title="Contact Us">Contact Us</a>
    </div>
</div>

// Side Menu - Script
$('.side-menu-close').on('click', function(e){
    $('.side-menu').toggleClass('open');
});
$('.icon-menu').on('click', function(e){
    $('.side-menu').toggleClass('open');
});

// Side Menu - Style
.side-menu{
    background: $brand-primary;
    position: fixed;
    right: -100%; top: 0;
    z-index: 101;
    width: _res(200,400); height: 100%;
    transition: all .6s ease-in-out;
    &.open{
        right: 0;
    }
    &-top{
        padding: _res(30);
        @include _flex();
    }
    &-logo{
        width: 70%;
        img{ width: 100%; }
    }
    &-close{
        color: #fff;
        cursor: pointer;
        font-size: _res(10,20);
        position: absolute;
        top: 10px; right: 20px;
    }
    &-items{
        @include _flex($dir: column, $halign: flex-start);
        a{
            color: #fff;
            font-family: $headings-font-family;
            font-weight: 600;
            font-size: _res(15,25);
            letter-spacing: .020em;
            text-transform: uppercase;
            line-height: 2;
            transition: all .3s ease-in-out;
            text-decoration: none;
            padding: 0 _res(30);
            &:hover{
                color: #fff;
                background: $brand-secondary;
            }
        }
    }
}
content_copyCOPY