If the div overflows half of it at the top of its parent

Question

I am trying to make the bottom drawer slider with a good look.

A round button will be fixed at the bottom of the page, and only half of it should be shown when the box is closed (half circle), and click on it to expand the box

Silent Chart:

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

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

JsFiddle: https://jsfiddle.net/ppgab/wcec9gc6/4/ (I use semantic ui, but this is optional)

How can I show only half 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 even better to use percentage sizes.

Answer 1

, :

1.

margin-top: 28px, ( 56 ) transform: translateY(-50%) ( ).

2. .

overflow: hidden #map, animate() jQuery. overflow: visible #map.

3. #map

height 0 CSS, JS.

---

:

$('.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>

Hide result

: JSFiddle

Answer 2

, .

$('#circle').click(function() {

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

  } else {

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

});

#map {
  overflow: visible !important;
  background: #303030;
  width: 100%;
  text-align: center !important;
  height: 0%;
  bottom: 0;
  position: fixed;
  color: #fff;
}

#circle {
  background-color: #303030;
  height: 70px;
  width: 70px;
  border-radius: 35px;
  margin: -35px auto;
}

<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>
      <div id="circle">
      
      </div>
  </div>
  bottom slider content
</div>

Hide result

Answer 3

.icon #map div

CSS

.icon {
    position:absolute;
        top:0;
        left:50%;
    transform: translate(-50%, -50%);
}