CODEWITHSUNDEEP
javascriptjqueryhtmlcsspanel
Justin
Justin

Reputation: 51

How to collapse left side panel?

I'm looking for a way to make this left side panel collapse. I not looking to have anything else on the map/site to move or adjust. Just to have the left panel collapsable. Ideally with a sliding animation rather than popping in and out. Here's a link to my website with the panel in question

Would be immensely appreciated!

Upvotes: 1

Views: 1478

Answers (2)

ChrisKsag
ChrisKsag

Reputation: 134

The first thing you might want to do is use an api like Font Awesome to get some cool icons. You could add it with jQuery by the following cdn.

$('head').append('<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">');

Then create the div, css to hold the hamburger displayed using BS hidden-lg, hidden-md, hidden-sm. To hide it on anything larger than a phone. This would look like this.

<div class="mobile_bars hidden-lg hidden-md hidden-sm">
<button id="hide_menu">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>

You can add this via jQuery, or simply add to your html.

Add the following CSS to your sites CSS to accommodate this element. 

<style>
.mobile_bars {
    margin-left: 262px;
    margin-top: -32px;
}

/* NOTE* you don't need to write the CSS like this, sense you'll add with jquery 

.left-side-bar.is-out */

.push-in {
left: -16.666%; /* equal to the sidebar's width */
}

</style>

Then write your script using @keithjgrant code. 

<script>
// Include Ready function
ALL is .TOUCH deprecated?? 
$('button#hide_menu').on( function(){

$('.left-side-bar').toggle('push-in animated fadeOutLeft');

// For some fun add animated.css to your header and add the following classes as well,

or visit https://daneden.github.io/animate.css/ to choose a class!

});

<script>

This wouldn't be my final result but it would get you close. Also I'm assuming your wanting this as a solution for a mobile website, however if your looking to use this a desktop option id simply change the icon, or add a left arrow icon to the right of the logo. Somewhere visible but out of the way!

Upvotes: 0

keithjgrant
keithjgrant

Reputation: 12749

You can do this with a CSS transition on the left property to make changes to this value animate smoothly. Then add and remove a class that changes the left value to toggle the sidebar's visibility.

.left-side-bar {
    transition: left .8s ease-in;
}

.left-side-bar.is-out {
    left: -16.666%; /* equal to the sidebar's width */
}

It will be visible by default. Use JavaScript to add/remove the is-out class to make it hide.

Upvotes: 1

Related Questions