CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Twix
Twix

Reputation: 387

Open sidebar window with jQuery

I am trying to make the something like this.

But somehow I am not able to make it same.

What I have tried

I am able to create replica of this but issue is that the button are fixed.

Is that possible by putting left property in CSS ?

If any can guide me with this then it would be great.

Thanks.

( function($) {
	
		var map = new google.maps.Map(document.getElementById('new_map_canvas'), {
					zoom: 4,
					center: new google.maps.LatLng(57.658339,-102.918287),
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					mapTypeControl: false,
					streetViewControl: false,
					panControl: false,
					zoomControlOptions: {
						position: google.maps.ControlPosition.LEFT_BOTTOM
					}
				});
  
	$("#store_").click(function(){
		//$(".side_window_content").show("slide", { direction: "left" }, 1000 );
        $(".side_window_content").slideToggle();
	});
} )(jQuery);
#new_map_canvas{
	border:5px solid;
}
#store_, #direction_{
	position:absolute;
	z-index:5;
	-webkit-transform: rotate(90deg);   
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.side_window, .side_window_content{
	position:absolute;
	z-index:6;
}
.side_window_content{
	width:300px;
	height:660px;
	background:white;
	display:none;
}
.side_window{
	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="side_window_content">
	<input type="text" id="searchStore" placeholder="Search address" />
</div>
<div class="side_window">
	<input type="button" id="store_" value="Store" />
	<input type="button" id="direction_" value="Direction" />
</div>
<div id="new_map_canvas" style="height:660px; width:auto;"></div>

Upvotes: 1

Views: 1984

Answers (3)

Vikrant
Vikrant

Reputation: 5036

Here is my code for my own blog. Hope, you want similar one:

$('#icox').on('click', function() {
    $(this).children().toggleClass('active');
    $('#menux').toggleClass('active');
});

Then in CSS you just have to play with margin-left: -300px; or with css3 transform: translate.

After Edit:

Here is the Working Demo

Upvotes: 2

Diode
Diode

Reputation: 25135

with some modifications in @Vikrant example :

#icox {
    float: left;
    width: 60px;
    height: 60px;
    background-color: rgb(218, 218, 218);
}

http://jsfiddle.net/6H8xr/9/

Upvotes: 1

stanze
stanze

Reputation: 2480

you can use animate width to toggle. $('.side_window_content').animate({width: 'toggle'});

Upvotes: 1

Related Questions