Left hand panel for Cesiumjs.


»
$(function(){
	$('.slider-arrow').click(function(){
        if($(this).hasClass('show')){
	    $( ".slider-arrow, .panel" ).animate({
          left: "+=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('«').removeClass('show').addClass('hide');
        }
        else {   	
	    $( ".slider-arrow, .panel" ).animate({
          left: "-=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('»').removeClass('hide').addClass('show');    
        }
    });

});
.panel {
	width:300px;
	float:left;
	height:550px;
	background:#d9dada;
	position:relative;
	left:-300px;

}
.slider-arrow {
	padding:5px;
	width:10px;
	float:left;
	background:#d9dada;
	font:400 12px Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	position:relative;
	left:-300px;
}

https://jsfiddle.net/phpmind/2gj84235/

Share

Leave a Reply

Your email address will not be published. Required fields are marked *