Vert A

Versie 2.105 - 13/3/15

Uitleg

Zet het menuontwerp van de site op w 033.4
Kopieer de code
(klik in de box en doe vervolgens ctrl+A)
plak de code in de HTML Hoofdtekst
Sla de wijzigingen in de HTML Hoofdtekst op

<script>
$(window).ready(function() {
	var headHeight = $('#identityWrapper').height() + 80;
	var screenHeight = $(window).height();
	var menuHeight = screenHeight - headHeight;

$("#topNav").css('height', menuHeight);
		//logo en naam in tablet boven het menu plaatsen
	$('body').prepend('<div class="topHead"></div>')
	$('#identityContact').clone().prependTo('.topHead');
		//Header div toevxoegen    
	$( '.header-container, .nav-primary, .breadcrumb-container' ).wrapAll( "<div class='menuSlide' />");
		//Klikbare balk toevoegen    
	$('.header').append('<div id="info"></div><div id="menuBar"><a id="menubutton" class="btn-nav hidden-large">m</a></div>');
		//Menu openklappen
	$( "#menuBar #menubutton" ).click(function() {
	 if($('.header').css("margin-left")=="0px") {
	    $(".header").animate({marginLeft: '-=200px'}, 300);
     	$(".dark").animate({opacity: "0"}, 300).animate({zIndex: "0"}, 300).hide(0);
	 };
	 if($('.header').css("margin-left")=="-200px") {
		$('.dark').show();
	    $(".dark").animate({zIndex: "3"}, 100);
		$(".header").animate({marginLeft: '+=200px'}, 300);
		$(".dark").animate({opacity: "0.5"}, 300); 
	 };
	});
});
</script>

/* Groter dan mobiel */
@media screen and (min-width: 672px) { 
	.has-header-subline .header-title, .has-header-subline .logo { top: 0; }
	.footer-social { text-align: center; padding-bottom: .5em; }
	#contact { display: none; }
	#identityContact { background-image: none; }
	.has-header-background #identityContact img { margin-top: 0; }
	.header { margin-bottom: 0; width: 15%; height: 100%; position: fixed; z-index: 1; }    
	.logo, .header-title { overflow: visible; }
	.logo {	max-width: 160px; display: block; margin: 0 auto; position: relative; }
	.logo img {  max-width: 160px; display: inline-block; vertical-align: middle; }
	.header-title .h1 { height: auto; }
	.top-container, .header-content { width: 100%; }
	.header-content { top: 10px; height: auto; }
	.has-header-title #identity {	display: block; left: 0px; width:100%; }
	.has-header-title #companyName { position: relative; float: left; width:100%; top: 20px; text-align: center; line-height: 1; padding: 0 20px; }
	.has-header-title #companyTagline { text-align: center; position: relative; width: 100%; float: left; padding: 0 20px; top: 25px; }
	.nav-primary { width: 100%; height: auto; margin-top: 20px; }
	.nav-primary a { white-space: normal; padding: 5px 10px; display: block; } 
	.nav-primary > ul { margin: 0; width: 100%; float: left; text-align: left; padding: 0 20px; }
	.nav-primary ul > li { width: 100%; margin-left: 0; display: inline-block; float: left; line-height: 1;}
	.nav-primary ul li li { width: 100%; display: list-item; list-style: inside; padding-left: 10px; } 	
	.nav-primary  ul ul { display: block; position: relative; background: transparent; height: 100%; width: 100%; top: 0; }
	.nav-primary > ul ul:after, .nav-primary > ul ul:before { display: none; }
	.nav-primary .has-children { padding-bottom: 0px; }
	.main-container, .footer-container { width: 85%; left: 15%; position: relative; }
	.main-container	{ padding-bottom: 12px; }
	.topHead { display: none; }
}
/* Tablet formaat */
@media screen and (min-width: 672px) and (max-width: 1119px) {
	.header { width: 350px; height: 100%; top: 0; position: fixed; margin: 0; margin-left: -200px; padding: 0; z-index: 4; background: transparent; }
	.dark { display: none; width: 100%; height: 100%; position: fixed; opacity: 0; z-index: 0; }
	#info { width: 200px; height: auto; position: absolute; bottom: 0; }
	.nav-primary > ul, .header-content { margin: 0; width: auto; }
	.menuSlide { width: 200px; height: 100%; float: left; }
	#menuBar { width: 50px; height: auto; position: relative; top: 7px; float: left; }
	#menuBar #menubutton { display: block !important; top: 0; margin-top: 0; padding: 20px 10px; text-align: center; font-family: "Fontello"; cursor: pointer; transition: all .2s ease-in-out; font-size: 1.5625em; }
	#menubutton:hover { text-decoration: none; }
	.main-container, .footer-container { width: 100%; left: 0; }
	.header .footer-social { position: absolute; bottom: 0; left: 8%; }
	.menuSlide #identityContact { display: none; }
	.topHead { display: block; position: relative; width: 100%; z-index: 2; }
	.topHead #identityContact { width: 200px; margin: 0 auto; top: 0; }
	#identity { display: none; width: auto; line-height:1; left:0; top: 0; }
	#companyName, #companyTagline { text-align:center; display:block; position: relative; }
}
/* Mobiel formaat */
@media screen and (max-width: 671px) {
	.header .footer-social, #menuBar, .topHead { display: none; }
}
</style>