#jquery #resize
#jquery #изменение размера
Вопрос:
У меня проблема с моим кодом jQuery.
Я бы хотел, чтобы, когда мое окно выше 768 пикселей, отображалось мое меню, а когда я изменяю размер окна, чтобы оно было ниже 768 пикселей, мое меню не отображается. Но здесь либо мое меню отображается в обоих случаях, либо ни в одном: когда я нажимаю крест (nav__burger), меню должно появляться, когда я ниже 768 пикселей, но не тогда, когда я выше.
Сердечно.
if (window.innerWidth >= 768 amp;amp; !$('.nav__menu').hasClass('is-open')) {
$('.nav__menu').addClass('is-open');
} else {
if ($('.nav__menu').hasClass('is-open')) {
$('.nav__burger').addClass('is-active');
}
$('.nav__burger').on('click', function() {
if ($(this).hasClass('is-active')) {
$(this).removeClass('is-active');
$('.nav__menu').removeClass('is-open');
} else {
$('.nav__menu').addClass('is-open');
$(this).addClass('is-active');
}
});
}
.header .nav__burger {
height: 37px;
background: none;
border: none;
outline: none;
cursor: pointer;
z-index: 2;
position: absolute;
}
.header .nav__burger.is-active span {
background: transparent;
}
.header .nav__burger.is-active span::before {
transform: translateY(-2px) rotate(45deg);
}
.header .nav__burger.is-active span::after {
transform: rotate(-45deg);
}
.header .nav__burger span {
position: relative;
}
.header .nav__burger span,
.header .nav__burger span::before,
.header .nav__burger span::after {
content: '';
width: 20px;
height: 3px;
background: #000;
display: block;
transition: transform 0.5s, background 0.3s;
}
.header .nav__burger span::after,
.header .nav__burger span::before {
position: absolute;
}
.header .nav__burger span::before {
transform-origin: 0 50%;
top: -6px;
}
.header .nav__burger span::after {
bottom: -6px;
transform-origin: 0 50%;
}
.header .nav__menu {
z-index: 1;
display: flex;
position: fixed;
background: #e9bf2b;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.header .nav__menu a {
transition: color 0.2s;
text-decoration: none;
letter-spacing: 0.07em;
color: #000;
text-transform: uppercase;
font: 700 125% mostra-nuova, sans-serif;
position: relative;
display: inline-block;
}
.header .nav__menu a:after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background: #952929;
content: '';
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
transform: translateY(13px);
}
.header .nav__menu a:hover::after {
opacity: 1;
transform: translateY(3px);
}
.header .nav__menu>* {
transform: translateY(-10px);
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
}
.header .nav__menu>*:nth-child(2n) {
transition-delay: 0.1s;
}
.header .nav__menu>*:nth-child(3n) {
transition-delay: 0.1s;
}
.header .nav__menu>*:nth-child(4n) {
transition-delay: 0.1s;
}
.header .nav__menu.is-open {
opacity: 1;
pointer-events: auto;
}
.header .nav__menu.is-open>* {
opacity: 1;
transform: translateY(0px);
}
.header .nav__menu>* * {
margin-left: 0;
margin-top: 40px;
}
@media (min-width: 768px) {
.header .nav__burger {
display: none;
}
.header .nav__menu {
opacity: 0;
background: none;
flex-direction: row;
justify-content: normal;
align-items: normal;
position: absolute;
top: 20px;
left: 20px;
bottom: initial;
right: initial;
}
.header .nav__menu a {
color: #000;
font-size: 87.5%;
}
.header .nav__menu>* * {
margin-top: 0;
margin-left: 30px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="header">
<div class="container">
<button class="nav__burger">
<span></span>
</button>
<header class="nav">
<ul class="nav__menu">
<li class="menu-item">
<a href="#">Home</a>
</li>
<li class="menu-item">
<a href="#">Services</a>
</li>
<li class="menu-item">
<a href="#">Portfolio</a>
</li>
</ul>
</header>
</div>
</section>
Ответ №1:
Кажется, что ваш код в порядке, требуется небольшое изменение, но ваша логика неверна. Когда окно resize
открывается, вам нужно следить за изменением размера event
с помощью jQuery.
Мы можем обернуть if (window.innerWidth >= 768) {})
логин в функцию и вызвать эту функцию в окне resize
.
//Resize window
function resize() {
if (window.innerWidth >= 768) {
$('.nav__menu').addClass('is-open');
} else {
$('.nav__menu').removeClass('is-open');
$('.nav__burger').removeClass('is-active');
}
}
//watch window resize
$(window).on('resize', function(){
resize()
});
При открытии страницы loads
вы можете снова вызвать $( document ).ready(function() {})
ту же функцию, чтобы проверить, есть ли innerwidth
>= 768
она, если она есть, затем продолжить с логикой или удалить is-open
класс.
$( document ).ready(function() {
resize() //load on document ready
})
Вы размещаете свою click
функцию переключения меню вне своего, если где угодно, потому что это будет работать только тогда, когда меню переключается visible
.
Живая рабочая демонстрация: (запустите snippet и нажмите full screen
и закройте весь экран, чтобы увидеть, что все работает)
$(document).ready(function() {
resize() //load on document ready
})
//Resize window
function resize() {
if (window.innerWidth >= 768) {
$('.nav__menu').addClass('is-open');
} else {
$('.nav__menu').removeClass('is-open');
$('.nav__burger').removeClass('is-active');
}
}
//watch window resize
$(window).on('resize', function() {
resize()
});
//Click function
$('.nav__burger').on('click', function() {
// console.log('fdfd')
if ($(this).hasClass('is-active')) {
$(this).removeClass('is-active');
$('.nav__menu').removeClass('is-open');
} else {
$('.nav__menu').addClass('is-open');
$(this).addClass('is-active');
}
});
.header .nav__burger {
height: 37px;
background: none;
border: none;
outline: none;
cursor: pointer;
z-index: 2;
position: absolute;
}
.header .nav__burger.is-active span {
background: transparent;
}
.header .nav__burger.is-active span::before {
transform: translateY(-2px) rotate(45deg);
}
.header .nav__burger.is-active span::after {
transform: rotate(-45deg);
}
.header .nav__burger span {
position: relative;
}
.header .nav__burger span,
.header .nav__burger span::before,
.header .nav__burger span::after {
content: '';
width: 20px;
height: 3px;
background: #000;
display: block;
transition: transform 0.5s, background 0.3s;
}
.header .nav__burger span::after,
.header .nav__burger span::before {
position: absolute;
}
.header .nav__burger span::before {
transform-origin: 0 50%;
top: -6px;
}
.header .nav__burger span::after {
bottom: -6px;
transform-origin: 0 50%;
}
.header .nav__menu {
z-index: 1;
display: flex;
position: fixed;
background: #e9bf2b;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.header .nav__menu a {
transition: color 0.2s;
text-decoration: none;
letter-spacing: 0.07em;
color: #000;
text-transform: uppercase;
font: 700 125% mostra-nuova, sans-serif;
position: relative;
display: inline-block;
}
.header .nav__menu a:after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background: #952929;
content: '';
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
transform: translateY(13px);
}
.header .nav__menu a:hover::after {
opacity: 1;
transform: translateY(3px);
}
.header .nav__menu>* {
transform: translateY(-10px);
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
}
.header .nav__menu>*:nth-child(2n) {
transition-delay: 0.1s;
}
.header .nav__menu>*:nth-child(3n) {
transition-delay: 0.1s;
}
.header .nav__menu>*:nth-child(4n) {
transition-delay: 0.1s;
}
.header .nav__menu.is-open {
opacity: 1;
pointer-events: auto;
}
.header .nav__menu.is-open>* {
opacity: 1;
transform: translateY(0px);
}
.header .nav__menu>* * {
margin-left: 0;
margin-top: 40px;
}
@media (min-width: 768px) {
.header .nav__burger {
display: none;
}
.header .nav__menu {
opacity: 0;
background: none;
flex-direction: row;
justify-content: normal;
align-items: normal;
position: absolute;
top: 20px;
left: 20px;
bottom: initial;
right: initial;
}
.header .nav__menu a {
color: #000;
font-size: 87.5%;
}
.header .nav__menu>* * {
margin-top: 0;
margin-left: 30px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="header">
<div class="container">
<button class="nav__burger">
<span></span>
</button>
<header class="nav">
<ul class="nav__menu">
<li class="menu-item">
<a href="#">Home</a>
</li>
<li class="menu-item">
<a href="#">Services</a>
</li>
<li class="menu-item">
<a href="#">Portfolio</a>
</li>
</ul>
</header>
</div>
</section>
Комментарии:
1. Можете ли вы помочь мне в последней части, пожалуйста?
2. @Syniscoborn В
resize
функцию вам просто нужно добавить этот кодif (window.innerWidth <= 768) {
, чтобы проверить, не меньше ли размер окна 768 пикселей, а затем вы можете делать все, что вам нужно.3. Это
>=768
когда я должен делать каждый.4. @Syniscoborn Извините, я вас не улавливаю. Я не уверен, что вы пытаетесь сделать сейчас. Похоже, это еще одна вещь, которую вы хотите сделать — не могли бы вы задать другой вопрос. Чтобы можно было дать правильный ответ.
5. Вы можете увидеть мой вопрос внизу этого сообщения с каждым, но я должен опубликовать еще один?
Ответ №2:
Это работает, но теперь я хотел бы, чтобы, когда размер окна составляет 768 пикселей или меньше, и я нажимаю на одну из ссылок, это приведет меня в нужное место. В настоящее время он только отключается, но меню остается открытым, а крест остается активированным.
$(document).ready(function() {
resize()
});
function resize() {
if (window.innerWidth >= 768) {
$('.nav__menu').addClass('is-open');
} else if ($('.nav__menu').hasClass('is-open')) {
$('.nav__menu').removeClass('is-open');
}
}
$(window).on('resize', function() {
resize()
});
$('.nav__burger').on('click', function() {
if ($(this).hasClass('is-active')) {
$(this).removeClass('is-active');
$('.nav__menu').removeClass('is-open');
} else {
$('.nav__menu').addClass('is-open');
$(this).addClass('is-active');
}
});
$('.menu-item').each(function() {
$(this).click(function() {
$('.nav__menu').removeClass('is-open')
$('.nav__burger').removeClass('is-active');
})
});
Я добавил последнюю часть с каждым, но она не работает должным образом и заставляет мое меню исчезать, когда я нажимаю на ссылку и в случае, когда окно больше 768 пикселей