// 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; } } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter