Mojimi Mojimi - 1 year ago 45
CSS Question

Have div overflow half of it through the top of its parent

I'm trying to make a good looking bottom drawer slider.

There will be a circular button fixed at the bottom of the page, that only half of it should be shown when the drawer is closed (half a circle), and click it to expand the drawer

Silly diagram :

_____________________________
| Web Page |
| |
| |
| ____ |
|__________/ /\ \___________| < Closed (bottom of browser window)

_____________________________
| Web Page |
| ____ |
|__________/ /\ \___________| < Opened
| \____/ |
|___________________________|


JsFiddle : https://jsfiddle.net/ppgab/wcec9gc6/4/ (I'm using semantic ui but that isn't necessary)

How can I have only one half the button show 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");
}

});


Would be even better if using percentage dimensions.

Answer Source

To achieve the effect you wanted, I made three changes:

1. Move the icon upwards

You can do this with a simple margin-top: 28px to move it halfway up (it has a total height and padding of 56px) or use transform: translateY(-50%) (for the bonus points).

2. Prevent transparency of icon.

Transparency is caused by an overflow: hidden in the #map element caused by the animate() jQuery function. Add a overflow: visible to the #map element.

3. Totally hide the #map

Simply change height to 0 in both the CSS and the JS.


In summary:

$('.icon').click(function() {

  if ($("#map").hasClass("down")) {
    $("#map").removeClass("down");
    $("#map").animate({
      height: "50%"
    }, 600);

  } else {

    $("#map").animate({
      height: "0%"
    }, 350);
    $("#map").addClass("down");
  }

});
#map {
  background: #303030;
  width: 100%;
  text-align: center !important;
  height: 0;
  bottom: 0;
  position: fixed;
  overflow: visible !important;
}
i {
  margin-top: -28px;
  transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Demo: JSFiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download