我正在尝试制作一个好看的底部抽屉 slider 。
页面底部会固定一个圆形按钮,当抽屉关闭时只显示一半(半圆),点击它展开抽屉
傻图:
_____________________________
| Web Page |
| |
| |
| ____ |
|__________/ /\ \___________| < Closed (bottom of browser window)
_____________________________
| Web Page |
| ____ |
|__________/ /\ \___________| < Opened
| \____/ |
|___________________________|
JsFiddle:https://jsfiddle.net/ppgab/wcec9gc6/4/ (我正在使用语义 ui,但这不是必需的)
如何在抽屉关闭时只显示一半按钮?
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");
}
});
如果使用百分比维度会更好。
最佳答案
为了达到你想要的效果,我做了三处改动:
1。向上移动图标
您可以使用简单的 margin-top: 28px
将其向上移动一半(总高度和内边距为 56px)或使用 transform: translateY(-50% )
(用于奖励积分)。
2。防止图标透明。
透明度是由 #map
元素中的 overflow: hidden
引起的,该元素由 animate()
jQuery 函数引起。将 overflow: visible
添加到 #map
元素。
3。完全隐藏 #map
只需在 CSS 和 JS 中将 height
更改为 0。
总结:
$('.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>
演示:JSFiddle
关于javascript - 让 div 通过其父项的顶部溢出它的一半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42096047/