I have an off canvas menu that "according to my client" that appears to not be functioning correctly. There are no errors whatsoever in my console, so I am not sure whats going on here, and i don't have an Iphone/pad to test on. Anyone want to give this a shot? demo
html:
<html>
<body>
<div id="site-wrapper" class="container">
<nav id="site-menu">
<ul class="nav">
<li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
<ul class="nav-child unstyled small">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
<ul class="nav-child unstyled small">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</nav>
<header id="header">
<a class="brand" href="/">My Company</a><br />
</header>
<div id="site-canvas">
<div id="mainbody">
<div class="container-fluid">
<p>main content</p>
</div>
</div>
<footer>
<p>footer</p>
</footer>
</div>
</div>
</body>
</html>
css/less:
header {
position: fixed;
top: 0;
z-index: @z-index * 6;
overflow: hidden;
width: 100%;
height: 65px;
}
#site-wrapper {
.reset-box;
}
#mainbody {
width: @100;
margin: 65px auto 0;
}
#menuToggle {
position: fixed;
top: 15px; left: 0;
z-index: @z-index * 7;
}
#menuButton {
background-color: @black;
margin: 0;
padding: 0;
height: 35px;
width: 50px;
}
#menuButton:hover {background-color: @black-hover;}
#site-menu {
background-color: @black;
height: @100;
position: fixed;
top: 0; left: -340px;
width: 330px;
z-index: @z-index * 5;
}
#site-menu:after {z-index: @z-index * 7;}
#site-canvas {
backface-visibility: hidden;
height: @100;
transform: translateX(0);
transform: translate3d(0, 0, 0);
width: @100;
}
/********************************
/* OFF CANVAS MENU
/*******************************/
.show-nav #site-canvas {
transform: translateX(330px);
transform: translate3d(330px, 0, 0);
}
.reveal #site-menu {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
.reveal .show-nav #site-menu {
transition: 900ms ease all;
transform: translateX(330px);
transform: translate3d(330px, 0, 0);
}
.reveal .show-nav #site-canvas {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
and last but not least the js:
/********************************
/* OFF CANVAS MENU
/*******************************/
$(document).ready(function(){
var special = ['reveal'];
$('.main-menu').click(function() {
var transitionClass = jQuery(this).data('transition');
if ($.inArray(transitionClass, special) > -1) {
$('body').removeClass();
$('body').addClass(transitionClass);
} else {
$('body').removeClass();
$('#site-canvas').removeClass();
$('#site-canvas').addClass(transitionClass);
}
$('#site-wrapper').toggleClass('show-nav');
$('.main-menu i').toggleClass('fa-ellipsis-v fa-ellipsis-h');
$('.main-menu div').toggle();
return false;
});
});
/********************************
/* OFF CANVAS MENU HEIGHT
/*******************************/
$(document).ready(function(){
$('#site-canvas').css({'min-height':($(window).height())+'px'});
$(window).resize(function(){
$('#site-canvas').css({'min-height':($(window).height())+'px'});
});
});
/********************************
/* NAV ACCORDIAN
/*******************************/
$(document).ready(function(){
$('.accordian-toggle').click(function(){
$('#site-menu .nav > .parent > .nav-child').slideUp();
if(!$(this).next().is(':visible')){
$(this).next().slideDown();
}
});
});
I found the problem was missing vendor prefixes...
/********************************
/* OFF CANVAS MENU
/*******************************/
.show-nav #site-canvas {
transform: translateX(-330px);
transform: translate3d(-330px, 0, 0);
-webkit-transform: translateX(-330px);
-webkit-transform: translate3d(-330px, 0, 0);
-ms-transform: translateX(-330px);
-ms-transform: translate3d(-330px, 0, 0);
}
.reveal #site-menu {
transform: translateX(0);
transform: translate3d(0, 0, 0);
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translateX(0);
-ms-transform: translate3d(0, 0, 0);
}
.reveal .show-nav #site-menu {
transition: 900ms ease all;
transform: translateX(-330px);
transform: translate3d(-330px, 0, 0);
-webkit-transform: translateX(-330px);
-webkit-transform: translate3d(-330px, 0, 0);
-ms-transform: translateX(-330px);
-ms-transform: translate3d(-330px, 0, 0);
}
.reveal .show-nav #site-canvas {
transform: translateX(0);
transform: translate3d(0, 0, 0);
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translateX(0);
-ms-transform: translate3d(0, 0, 0);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.