Header Side Menu - Custom Component
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>✖</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
Comments