Using the Mobile Menu Concept for All variants - Experimental Responsive Video Header

Sometimes a designer might want to create a banner heading, be it a video, slider or such and avoid having a classic horizontal menu bar that sits across it. This example uses the mobile menu concept with, in this case, a standard ‘hamburger’ that links to a sliding menu bar. The trick to making the menu slide (without code) is to create the animations on the MouseOff and MouseOver layers, and to copy them to their corresponding layers; in this example ‘SidebarMenu(lock)’ and ‘MouseOverSidebarMenu’- this is only necessary because Xara objects to popups with animated content, but doesn’t object to the designer placing previously animated objects onto a popup layer. The start point is to create a MouseOff and a MouseOver button and to animate each before placing them on the popup Sidebar layers. The banner video is placed, in this case, is placed in the Page HTML code(head) and made responsive across any variants. <style> .video-wrapper { position: relative; width: 100%; overflow: hidden; padding-top:13.19%; /* Slider Height - Aspect Ratio */ z-index: -1; } .responsive-video{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } </style> <div class="video-wrapper"> <video class="responsive-video" width="100%" height="100%" controls autoplay loop muted playsinline> <source src="https://initiostar.co.uk/assets/ice_video_slider.mp4" type="video/mp4"> </video> </div>