dio-v
10/17/2013 - 11:08 AM
Mobile menu (ook voor grote/diepe menu's)
Mobile menu (ook voor grote/diepe menu's)
/*uses mixins!*/
@import "mixins.less";
/*mobile menu*/
@topmenuBg:#bebebe;
@topmenuFontColor:#7a7a7a;
.toggleMenu {
background: #3e3e3e;
padding: 10px 15px;
color: #fff;
z-index:9999;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
width: 100%;
padding-left: 47px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
&:before {
content: "";
position: absolute;
left: 15px;
top: 15px;
width: 1em;
height: 0.15em;
background: #FFF;
box-shadow: 0 6px 0 0 #FFF, 0 12px 0 0 #FFF;
}
&:hover {
background: #b0b0b0;
text-decoration:none;
}
&.active {
background: #666;
}
}
.mobileMenu {
display:none;
list-style: none;
*zoom: 1;
background:#b0b0b0;
margin:0;
padding:0;
overflow:hidden;
font-size:15px;
width:100%;
position:absolute;
z-index:9999;
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
ul {
list-style: none;
width: 100%;
margin:0;
padding:0;
li:first-child{
.inner-shadow(0, 3px, 3px, 0.25) ;
}
}
a {
padding: 10px 15px;
color:#fff;
text-decoration:none;
text-transform:uppercase;
&:hover{
background:#9c9c9c;
}
&.selected{
border-left: 3px solid #e77543;
}
}
li {
position: relative;
margin:0;
width: 100%;
ul {
position: absolute;
left: -9999px;
}
li.hover ul {
left: 100%;
top: 0;
}
li{
background: @topmenuBg;
a {
display: block;
padding:9px 10px 9px 20px;
color:@topmenuFontColor;
position: relative;
z-index: 100;
border-top: 1px solid darken(@topmenuBg,25%);
}
li{
background:lighten(@topmenuBg,7%);
a {
z-index:200;
padding:7px 10px 7px 25px;
font-size:14px;
text-transform:lowercase;
border-top: 1px solid darken(@topmenuBg,18%);
}
li{
background:lighten(@topmenuBg,14%);
a {
z-index:300;
padding:7px 0px 7px 35px;
border-top: 1px solid darken(@topmenuBg,11%);
}
li{
background:lighten(@topmenuBg,21%);
a {
z-index:400;
border-top: 1px solid darken(@topmenuBg,7%);
}
li{
background:lighten(@topmenuBg,28%);
a {
z-index:500;
border-top: 1px solid darken(@topmenuBg,4%);
}
}
}
}
}
}
}
li.hover > ul {
left: 0;
}
&>li {
float: left;
border-top: 1px solid #6a6a6a;
.parent {
position:relative;
&:after{
content:'';
border-style: solid;
border-width: 9px;
border-color: #f7f7f7 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
position:absolute;
right:10px;
top:50%;
margin-top:-4px;
}
}
&>a {display: block;}
}
}
@media screen and (max-width: 768px) {
nav{display:none!important;}
.active {
display: block;
}
.mobileMenu{
display:block;
}
.mobileMenu > li {
float: none;
}
.mobileMenu > li > .parent {
background-position: 95% 50%;
}
.mobileMenu li li .parent {
}
.mobileMenu ul {
display: block;
width: 100%;
}
.mobileMenu > li.hover > ul , .mobileMenu li li.hover > ul{
position: static;
}
} .funcDropShadow(@color: #000000) {
-webkit-text-shadow: 0px 1px 0px @color;
text-shadow: 0px 1px 0px @color;
filter: dropshadow(color=@color, offx=0, offy=1);
}
.removeText() {
text-indent:-9999px;
text-transform:uppercase;
}
.gradient( @start, @end ) {
background: @start;
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@start', endColorstr='@end',GradientType=0 )";
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@end));
background: -webkit-linear-gradient(top, @start 0%, @end 100%);
background: -moz-linear-gradient(top, @start 0%, @end 100%);
background: -ms-linear-gradient(top, @start 0%, @end 100%);
background: -o-linear-gradient(top, @start 0%, @end 100%);
background: linear-gradient(top, @start 0%, @end 100%);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
background-color: @startColor;
background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @endColor);
background-image: -ms-linear-gradient(left, @startColor, @endColor);
background-image: -o-linear-gradient(left, @startColor, @endColor);
}
.opacity( @opacity: 0.8 ) {
@ieopacity: @opacity * 100;
filter: ~"alpha(opacity = @{ieopacity} )";
-khtml-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
}
.border-radius(@radius: 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.border-radiuses(@topright: 3px, @bottomright: 3px, @bottomleft: 3px, @topleft: 3px) {
-webkit-border-top-right-radius: @topright;
-webkit-border-bottom-right-radius: @bottomright;
-webkit-border-bottom-left-radius: @bottomleft;
-webkit-border-top-left-radius: @topleft;
-moz-border-radius-topright: @topright;
-moz-border-radius-bottomright: @bottomright;
-moz-border-radius-bottomleft: @bottomleft;
-moz-border-radius-topleft: @topleft;
border-top-right-radius: @topright;
border-bottom-right-radius: @bottomright;
border-bottom-left-radius: @bottomleft;
border-top-left-radius: @topleft;
}
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
-webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}
.box-shadow(@arguments) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.box-sizing(@sizing: border-box) {
-ms-box-sizing: @sizing;
-moz-box-sizing: @sizing;
-webkit-box-sizing: @sizing;
box-sizing: @sizing;
}
.ph(@color: #ccc) {/*placeholder*/
input::-webkit-input-placeholder { color: @color; }
input:-moz-placeholder { color: @color; }
textarea::-webkit-input-placeholder { color: @color; }
textarea:-moz-placeholder { color: @color; }
}
.scale (@factor) {
-webkit-transform: scale(@factor);
-moz-transform: scale(@factor);
-ms-transform: scale(@factor);
-o-transform: scale(@factor);
transform: scale(@factor);
}
.rotate (@deg) {
-webkit-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-ms-transform: rotate(@deg);
-o-transform: rotate(@deg);
transform: rotate(@deg);
}
.skew (@deg, @deg2) {
-webkit-transform: skew(@deg, @deg2);
-moz-transform: skew(@deg, @deg2);
-ms-transform: skew(@deg, @deg2);
-o-transform: skew(@deg, @deg2);
transform: skew(@deg, @deg2);
}
.translate (@x, @y: 0) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-ms-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
-webkit-perspective: @value;
-moz-perspective: @value;
-ms-perspective: @value;
perspective: @value;
}
.transform-origin (@x: center, @y: center) {
-webkit-transform-origin: @x @y;
-moz-transform-origin: @x @y;
-ms-transform-origin: @x @y;
-o-transform-origin: @x @y;
transform-origin: @x @y;
}$(window).bind("load resize orientationchange", function () {
ww = document.body.clientWidth;
mobileSwitch();
});
$(document).ready(function () {
//mobile menu
ww = document.body.clientWidth;
if ($('.mobileReady').length){
var mobMenu = $('.mobileReady').first();//.find('.mobileReady').removeClass('mobileReady');
mobMenu.clone().addClass('mobileMenu').removeClass('supermenu').prependTo('body');
$('.mobileReady').removeClass('mobileReady');
$('.mobileMenu').removeAttr('style')// als er span ipv van a's staan > .html($('.mobileMenu').html().replace('<span', '<a href="#"').replace('</span>', '</a>'));
$('.mobileMenu').find('.supermenu').removeClass('supermenu');
$('body').prepend('<a class="toggleMenu" href="#">Menu</a>');
$(".mobileMenu a").each(function () {
if ($(this).next().length > 0) {
$(this).addClass("parent");
}
})
$(".toggleMenu").click(function (e) {
e.preventDefault();
$(this).toggleClass("active");
$(".mobileMenu").toggle();
});
mobileSwitch();
}
});
var mobileSwitch = function () {
if (ww <= 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".mobileMenu").hide();
} else {
$(".mobileMenu").show();
}
$(".mobileMenu li").unbind('mouseenter mouseleave');
$(".mobileMenu li a.parent").unbind('click').bind('click', function (e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
var vT = $(this);
vT.blur();
vT.parent("li").siblings().removeClass('hover').find('.opened').removeClass('opened');
if (vT.hasClass('opened')) {
window.location.href = $(this).attr('href');
vT.removeClass('opened');
} else {
vT.parent("li").toggleClass("hover");
vT.addClass('opened');
}
$('html,body').animate({
scrollTop: vT.offset().top - 10
});
});
}
else{
$(".toggleMenu").css("display", "none");
$(".mobileMenu").hide();
$(".mobileMenu li").removeClass("hover");
$(".mobileMenu li a").unbind('click');
$(".mobileMenu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function () {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}