Код:Как масштабировать DIV на нажатие кнопки
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
});
});
.ham-layer {
height: 50px;
width: 50px;
background: #fff;
margin: 0px;
top: 0;
left: 0;
position: fixed;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0;
}
#nav-icon {
position: fixed;
left: 35px;
top: 0px;
width: 32px;
height: 20px;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #fff;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(2) {
top: 9px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(3) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon.open span {
background: #111111;
}
#nav-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -1px;
left: 1px;
}
#nav-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 22px;
left: 2px;
}
#nav-icon.open .ham-layer {
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
opacity: 1;
}
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="ham-layer"></div>
<!-- <i class="fa fa-bars hamburger"></i> -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
<p id="_intro" class="text-center"></p>
<hr width=40%>
<p id="belowIntro" class="text-center"></p>
</div>
</div>
</div>
</section>
Я хотел сделать так, чтобы, когда значок гамбургер щелкают, слой масштабирует себя вверх таким образом показывая меню , Но масштабная часть не происходит. Что я должен делать, чтобы это произошло? Прямо сейчас значок гамбургера оживляет, но круговой div не расширяется.
Добавить вашу html-разметку или jsfiddle будет лучше, гораздо лучше – Gintoki
'$ (this)' относится к '$ ('# nav-icon')', но то, что вы действительно хотите, это что-то вроде '$ ('.img-circle'). toggleClass ('open') 'на основе вашего css. Но это сложно сказать без HTML. – Sablefoste
Должен ли я добавить полную html-страницу или это хорошо? –