Info/Presentation - sliding side menu

Preview: start08.webtool.lt

Additional modules used in preview: additional languages, advanced slideshow, responsive mobile.

Copy/paste the code below into corresponding fields:

 Custom CSS

/***********************************/
/*CUSTOM GOOGLE FONT - DEMO SETINGS*/
/***********************************/
/*Import the font in HEAD section*/
/*Set the font*/
*{font-family: 'Open Sans', sans-serif !important;}

/******************************************************************/
/*IFRAME BLOCK ENABLER - DEMO SETINGS (i.e. google maps, youtube) */
/******************************************************************/
iframe {pointer-events: none; opacity:0.5; transition: all 0.3s ease; background-image:url('/uploads/userfiles/data/preload.gif'); background-position:center center; background-repeat:no-repeat; background-size:auto;}

/*******************************************************************************************************************************/
/*IFRAME WINDOW FULL WIDTH / 50% WINDOW HEIGHT - DEMO SETINGS (i.e. google maps in Contacts, change tags to use it elsewhere)*/
/*******************************************************************************************************************************/
.it5 /* forms id*/ .iframeHolder iframe {height:100%}
.it5 /* forms id*/ .iframeHolder {left: 50%; margin-left: -50vw;  width: 100vw; height:50vh;}
.it150 /* layers id*/ .iframeHolder iframe {height:100%}
.it150 /* layers id*/ .iframeHolder {left: 50%; margin-left: -50vw;  width: 100vw; height:50vh;}

/********************************************************************/
/*AUTO RESIZE HEIGHT OF SLIDES according to VIEWPORT  - DEMO SETINGS*/
/********************************************************************/
/*slides in background*/
.sliderReservedHeight {height: 60vh !important;}
/*slides in content*/
/*div.slider_cont div.viewport div.slider, div.slider_cont, div.slider_cont div.slides_block, div.slider_cont div.viewport, div.slider_cont div.viewport div.slider div.slide, div.slider_cont div.slide a.normal, div.slider_cont div.viewport
{height: 60vh !important;}*/
/*mobile VH fix - it has to be in px*/
.mobileLayout .sliderReservedHeight {height: 400px !important;}
/*fck zone positioning*/
html body#bdy div.widthClip table.layer.blockCnt div.sliderReservedHeight div.fck, div.sliderCrop div.slide div.fck
{box-sizing: border-box;  height: auto !important;  margin-top: -200px !important; max-height: 400px; padding-left: 10px; padding-right: 10px;  position: absolute; top: 50%;}


/**** **** **** **** **** **** **** ****/
/****  LAYOUT/DEFAULT RELATED CSS   ****/
/**** **** **** **** **** **** **** ****/

/*show Client zone heading in sepparate line*/
.user_zone > b {display: block;}

/*Photo gallery style*/
div.album_block {margin-right: 1%;  padding: 20px; width: 32%;}
div.album_block div.thumb_side {width:100%;padding-right: 0;}
div.album_block div.data_side {padding-left: 0%; width: 100%!important;}

/*News style*/
div.news_block {float: left;width: 49%; margin-right: 1%;  padding: 20px; box-sizing:border-box;}
div.news_block div.thumb_side {width:100%;padding-right: 0;}
div.news_block div.thumb_side a {height:210px;}
div.news_block div.data_side {padding-left: 0%; width: 100% !important;}

/*header color on inner pages and mobile*/
.innerpage .header_cont {background-color:white;}
.mobileLayout .header_cont {background-color:white;}

/*Side (mobile like) menu from right*/
div.mainBlock {width:100% !important;}
div.sideBlock {background-size: 30px auto;padding-left: 50px; position: fixed; right: -305px; padding-top:50px; top: 0px; z-index:7700;height:100vh;transition: all 0.2s ease;background-position: 10px 20px;}
div.sideBlock:hover {padding-left: 5px; right: 0px; background-color:white; background-position: 10px 10px;}

/*Side (mobile like) menu from left*/
/*
div.mainBlock {width:100% !important;}
div.sideBlock {background-size: 30px auto;padding-right: 50px; position: fixed; left: -305px; padding-top:50px; top: 0px; z-index:7700;height:100vh;transition: all 0.2s ease;background-position: right 20px;}
div.sideBlock:hover {padding-right: 5px; left: 0px; background-color:white; background-position: right 10px;}}
*/

 
Custom JS

$(document).ready(function() {   

/*  
/////youtube, vimeo iframe wrapper - in case its needed/////

$('iframe[src*="youtube.com"]').each(function() {
        var url = $(this).attr("src")
       $(this).add( $(this).andSelf() ).wrapAll('<div class="iframeVideoHolder" ></div>');
        
    });
$('iframe[src*="vimeo.com"]').each(function() {
        var url = $(this).attr("src")
        $(this).add( $(this).andSelf() ).wrapAll('<div class="iframeVideoHolder" ></div>');
    });   
*/

/////iframe wrapper//////////////////////////////////////////////////////////////////////////////////////////  
 $(document).ready(function(){
 $('iframe').each(function(){
  $(this).add( $(this).andSelf()).wrapAll('<div class="iframeHolder" ></div>');
 })
});

/////youtube, vimeo iframe wrap remover/////  
$('iframe[src*="youtube.com"]').each(function() {
        var url = $(this).attr("src")
       $('iframe').css({'pointer-events':'auto', 'opacity':'1'});      
       $(this).remove( $(this).andSelf() ).wrapAll();
        
    });
$('iframe[src*="vimeo.com"]').each(function() {
        var url = $(this).attr("src")
       $('iframe').css({'pointer-events':'auto', 'opacity':'1'});      
       $(this).remove( $(this).andSelf() ).wrapAll();
    });  
 
    
 
/////select wrapper/////////////////////////////////////////////////////////////////////////////////////////  
 $(document).ready(function(){
 $('select').each(function(){
  $(this).add( $(this).andSelf() ).wrapAll('<div class="selectHolder"></div>');
 })
});
 
////////next prev product animation on click////////////////////////////////////////////////////////////////  
 
$('.next > a').click(function (e) {
    e.preventDefault();                   
    var goTo = this.getAttribute("href");
    $("body").css("transition","all 0.5s ease");
    $("body").css("opacity","0");

    setTimeout(function(){
         window.location = goTo;
    },500);       
});
 
$('.prev > a').click(function (e) {
    e.preventDefault();                   
    var goTo = this.getAttribute("href");
    $("body").css("transition","all 0.5s ease");
    $("body").css("opacity","0");

    setTimeout(function(){
         window.location = goTo;
    },500);       
});  
 
}); //////// .ready end ///////////////////////////////////////////////////////////////////////////////////////


window.onload = function () {

/////iframe enabler/////  
$('div.iframeHolder').click(function () {  
  $('iframe').css({'pointer-events':'auto', 'opacity':'1'});  
});

}; //////// .onload end ///////////////////////////////////////////////////////////////////////////////////////
 

HEAD tag

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>