Jquery Beispiele
Mobile Menu, Menu .fadeToggle(), Responsive, window.matchMedia
Menu .fadeToggle(),
$(document).ready(
function() {
$("#nav-top-detail").click(function() {
$("#menu-panel").toggle( 'slide',{direction: 'right'} );
$("#menu-panel-close").fadeToggle();
});
});
HTML
######### HTML BEGINN ###########
<!-- menu panel start -->
<div id="menu-panel">
<div class="content-menu-panel">
<div class="content">
<div class="sidebar-navigation">
{all-in-one-menu}
</div>
</div>
</div>
</div>
<div id="menu-panel-close"></div>
<!-- menu panel end -->
######### HTML END #############
css
######### CSS BEGIN #############
#menu-panel{position: fixed; z-index:10; top:0; right:0;width:30%; height:100vh; padding:0% 0 0 0;background:#ffffff;display: none}
.content-menu-panel{ position:relative; margin:0 auto;width:70%; height: 100vh;overflow: auto}
.menu-main li{list-style:none; display:block; font-size: 2.4vw; line-height:2.4vw;padding:3% 0 3% 2%; margin:2% 0; text-align:left; }
.menu-main a{color:#111; font-weight:300; text-transform:uppercase}
.menu-main a:hover{color:#999; font-weight:300; text-transform:uppercase}
.act a{color:#999; font-weight:300; text-transform:uppercase}
######### CSS END #############
window.matchMedia
if (window.matchMedia("(max-width: 480px)").matches) {
/* The viewport is smaller than 480 pixels wide */
} else {
/* The viewport is greater than 480 pixels wide */
}
