I want to create a stylish bottom drawer slider that features a unique circular button fixed at the bottom of the page. When the drawer is closed, only half of the button should be visible (half a circle), and clicking on it will expand the drawer.
Here's a basic representation:
_____________________________
| Web Page |
| |
| |
| ____ |
|__________/ /\ \___________| < Closed (bottom of browser window)
_____________________________
| Web Page |
| ____ |
|__________/ /\ \___________| < Opened
| \____/ |
|___________________________|
For code demonstration, check out this JsFiddle link: https://jsfiddle.net/ppgab/wcec9gc6/4/ (Note: Semantic UI may not be necessary).
The goal is to show only one half of the button when the drawer is closed.
HTML
<div>Page content</div>
<div id="map" class="down">
<div>
<i class="ui circular link expand big inverted icon"></i>
</div>
bottom slider content
</div>
CSS
#map {
background-color: #303030;
width: 100%;
text-align: center !important;
height: 4%;
bottom: 0;
position: fixed;
}
JavaScript/jQuery
$('.icon').click(function() {
if ($("#map").hasClass("down")) {
$("#map").removeClass("down");
$("#map").animate({
height: "50%"
}, 600);
} else {
$("#map").animate({
height: "4%"
}, 350);
$("#map").addClass("down");
}
});
It would be ideal to use percentage dimensions for better responsiveness.