HTML CSS 드래그 바 슬라이드를 상단에 표시하여 추가 정보 표시

질문

따라서 화면 하단에 표시되는 막대를 원하고 클릭하면 위로 슬라이드하여 더 자세한 정보를 표시 한 다음 다시 클릭하여 아래로 슬라이드 할 수 있습니다. 설명하기가 매우 어렵습니다!

이것은 그것을 전시하는 그림입니다. 이 button을 클릭하면 위로 슬라이드하고 주문에 대한 정보 (예 : 가격의 출처)로 화면 (오버레이처럼)을 채운 다음 다시 클릭하여 아래로 슬라이드 할 수 있습니다.

이것이 무엇인지 잘 모르겠으므로 비슷한 것을 찾는 데 어려움이 있습니다! 따라서 이와 같은 링크는 매우 높이 평가됩니다. 할 수 있으면 도와주세요. 감사합니다.

답변1

이러한 유형의 component는 일반적으로 모바일 앱에서 볼 수 있습니다.

바닐라 자바스크립트를 사용하여 웹 앱에서 구현할 수 있습니다. 클릭 할 때 위로 이동되는 절대 위치 요소 만 있으면됩니다.

const slider = document.querySelector('.slider');
const sliderHead = document.querySelector('.slider .head');

slider.addEventListener('click', () => {
  slider.classList.toggle('slideUp');
});

// initially, only show slider head from the bottom of the page
function setSliderPosition(slider) {
  let sliderPaddingTop = parseInt(window.getComputedStyle(slider).paddingTop);
  const offset = slider.offsetHeight - sliderHead.offsetHeight - sliderPaddingTop;
  slider.style.bottom = `-${offset}px`;
}

setSliderPosition(slider);

p, h2 { margin: 0; }
body { overflow: hidden; background: #eee; }

.slider,
.slider::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
}

.slider {
  background: #fff;
  padding: 20px;
  width: 80%;
  cursor: pointer;
  transition: bottom 0.4s ease;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.slideUp {
  bottom: 0 !important;
}

.slider::before {
  content: '';
  background: #eee;
  width: 75px;
  height: 5px;
  top: 8px;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  margin-bottom: 15px;
}

<div class="slider">
  <div class="head">
    <h2>Your Order</h2>
    <span>$123</span>
  </div>
  <div class="moreInfo">
  <h2>
   More Information:
  </h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  </div>
</div>

Expand snippet

답변2

jQuery 및 CSS를 사용하여이 효과를 쉽게 만들 수 있으며 카드를 만들고 부모 오버플로를 숨긴 다음 필요에 따라 클릭시 카드를 이동할 수 있습니다.

$(document).ready(function(){
            $('.bar').click(function(){
                $('.card').toggleClass("showMe");
            });
        });

.wrapper {
            overflow: hidden;
            height: 175px;
            width: 200px;
            border: 1px solid #ccc;
            position: relative;
        }
        .card {
            position: absolute;
            top: 75%;
            transition: top 0.5s;
        }
        .card.showMe {
            top: 10px;
        }
        .shownInfo {display: flex;justify-content: space-between;}
        .bar {
            height: 8px;
            width: 50%;
            border-radius: 5px;
            background-color: #333;
            margin: 0 auto; 
      cursor: pointer;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="card">
        <div class="bar"></div>
        <div class="shownInfo">
            <p>Your order</p>
            <p>$123</p>
        </div>
        <div class="additionInfo">
            <h2>Show whaterve you want here.</h2>
        </div>
    </div>
    </div>

Expand snippet

답변3

이것은 "오프 캔버스 모델"의 범주에 속합니다. 여기서 .order-summary 와 같이 class가있는 div를 만들고 다음과 같이 설정합니다.

.order-summary {
  position: fixed;
  top: calc(100vh - 80px);
}

여기 top계산에서 빼는 80px 는 스크린샷에 따라 div의 보이는 높이입니다 (정확한 높이를 업데이트 할 수 있습니다. 대략적으로).

간단한 JavaScript로 top속성을 전환하는 button을 가질 수 있습니다.

 

 

 

 

출처 : https://stackoverflow.com/questions/63112825/html-css-drag-bar-slide-at-the-top-to-display-more-information