0
私のウェブサイトの上部には、連絡先の情報が入ったバナーがあります。ユーザーがバーをクリックすると、バーが展開され、その内容が表示されます。しかし、拡張されたdivはウェブサイト上に表示され、divで拡大縮小することは可能でしょうか？サイトの上部が拡張されたdivの下に始まるようにします。トップバナーが展開されたときにサイトを縮小する
div：私はposition：relativeを使いましたが、何もしませんでした。
マイコード：
HTML：
<div class="bannertop">
<div id="cont">
<a href="#" id="buttonphone"><i class="fa fa-chevron-down telefoontje" aria-hidden="true"></i></a>
<ul class="bannertopcontact">
<li class="banneritem">
<a style="color:#fff;" href="tel:+2523532523532"><i class="fa fa-phone" aria-hidden="true"></i>352353252</a>
</li>
<li class="banneritem">
<a style="color:#fff;" href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i> [email protected]</a>
</li>
<li class="banneritem">
<a style="color:#fff;" href="contact.php"><i class="fa fa-external-link" aria-hidden="true"></i> Contactpagina</a>
</li>
</ul>
</div>
</div>
のjQuery：
<script>
$(document).ready(function()
{
$.fn.animateRotate = function(angle, duration, easing, complete) {
var args = $.speed(duration, easing, complete);
var step = args.step;
return this.each(function(i, e) {
args.step = function(now) {
$.style(e, 'transform', 'rotate(' + now + 'deg)');
if (step) return step.apply(this, arguments);
};
$({deg: 0}).animate({deg: angle}, args);
});
};
$("#buttonphone").click(function(){
if (!$(this).hasClass("expanded")){
$("#cont").animate({height: '160px',},340);
$('.telefoontje').animate({ marginTop: "140px" }, 300)
$(".telefoontje").animateRotate(180, 400, "linear", function(){
});
$(this).addClass("expanded");
}
else {
$("#cont").animate({height: '35px',},300);
$('.telefoontje').animate({ marginTop: "10px" }, 300)
$(".telefoontje").animateRotate(-180, 400, "linear", function(){
});
$(this).removeClass("expanded");
}
});
});
</script>
そして最後に、いくつかのCSS：
.bannertop{
font-size: 15px;
height:40px;
text-align:center;
display: none;
position:relative;
z-index:999999999999999999!important;
}
.telefoontje{
color: #fff;
display:inline-block;
margin-top:10px;
position:absolute;
font-size: 16px!important;
z-index:999999999999999999;
}
.bannertopcontact{
list-style: none;
color: #fff;
margin-top:30px;
z-index:999999999999999999!important;
}
.banneritem{
margin-top:13px;
}
#cont{
background-color:#85BD3E;
height: 35px;
overflow:hidden;
z-index:999999999999999999!important;
position:relative;
}