#javascript #html #css #wordpress #divi
Вопрос:
На веб-сайте ниже, когда я закрываю боковое меню в мобильном телефоне, я вижу, что текст меню закрывается быстрее, чем текст и значок поиска. Почему это произошло? Почему они не сближаются? Я использовал плагин Divi на WordPress, но я думаю, что здесь нет никакого конфликта. Он плавно и хорошо открывается и закрывается на рабочем столе.
https://wordpress-602494-1949747.cloudwaysapps.com/
<script>
let isMenuOpen = false;
const menuHandler = document.querySelector('.menu_left_handler');
const menuTitle = document.querySelector('.menu_left_title');
const menuRight = document.querySelector('.menu_right');
menuHandler.addEventListener('click', () => {
isMenuOpen ? menuRight.classList.remove('menu_right__open') : menuRight.classList.add('menu_right__open');
isMenuOpen = !isMenuOpen;
menuHandler.innerText === '☰' ? (menuHandler.innerText = '✕') : (menuHandler.innerText = '☰');
menuTitle.innerText === 'MENY' ? (menuTitle.innerText = 'STÄNG') : (menuTitle.innerText = 'MENY');
});
let x = window.matchMedia("(max-width: 768px)")
function mediaQ(x) {
if (x.matches) {
menuHandler.addEventListener('click', () => {
let mobileMenu = document.getElementById("menuId")
mobileMenu.classList.toggle("menu_right__open");
});
}
} #menuId {
background: #171717;
border-radius: 0 1rem 1rem 0;
padding: 1rem;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: stretch;
color: #fff;
font-family: 'museo-sans', sans-serif !important;
height: 30rem;
}
.menu {
height: 25rem;
}
#menu a {
color: #fff;
}
.menu_right {
max-width: 0;
overflow: hidden;
transition: max-width 0.3s;
}
.menu_right__open {
max-width: 100rem !important;
height: 25rem;
transition: max-width 2s;
}
.menu_right ul {
list-style: none;
width: 20rem;
padding-top: 5rem;
padding-left: 2rem;
line-height: 35px;
}
.menu_right ul a {
display: block;
text-decoration: none;
margin: 1rem 0;
font-size: 20px;
}
.menu_right ul a:hover {
color: #F7B660 ;
}
.menu_left {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
align-content: center;
font-size: 20px;
}
.menu_left_title {
font-family: 'museo-sans', sans-serif !important;
font-size: 20px;
writing-mode: tb-rl;
transform: rotate(-180deg);
margin-top: 1rem;
padding: 0.3rem;
}
.menu_left_handler {
padding: 0.5rem;
cursor: pointer;
font-size: 35px;
}
@media screen and (max-width: 768px) {
#menuId {
height: 5rem;
}
.menu {
height: 5rem;
}
.menu_left_title {
display: none;
}
.menu_right__open {
height: 26rem !important;
overflow-y: none !important;
border-radius: 2px;
transition: max-width 4s;
}
.menu_right {
transition: max-width 0.3s;
}
.menu_right ul a {
}
.menu_left_handler {
padding: 0.5rem;
cursor: pointer;
font-size: 18px;
}
} <body>
<div id="menuId" class="menu">
<div class="menu_left">
<div class="menu_left_handler">☰</div>
<div class="menu_left_title">MENY</div>
</div>
<div class="menu_right">
<div class="et_pb_with_border et_pb_module et_pb_search et_pb_search_0_tb_header et_pb_text_align_left et_pb_bg_layout_light et_pb_hide_search_button">
<form role="search" method="get" class="et_pb_searchform" action="https://wordpress-602494-1949747.cloudwaysapps.com/">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" name="s" placeholder="" class="et_pb_s">
<input type="hidden" name="et_pb_searchform_submit" value="et_search_proccess">
<input type="hidden" name="et_pb_include_posts" value="yes">
<input type="hidden" name="et_pb_include_pages" value="yes">
<input type="submit" value="Search" class="et_pb_searchsubmit" style="">
</div>
</form>
</div>
<nav>
<ul><strong>
<li><a href="/index.php/robotlosningar">Robotlösningar</a></li>
<li><a href="/index.php/made-by-andon">Made by Andon</a></li>
<li><a href="/index.php/eftermarknad">Eftermarknad</a></li>
<li><a href="/index.php/kontakt">Kontakt</a></li>
<li><a href="/index.php/om-andon-robotics">Om Andon Robotics</a></li>
</strong>
</ul>
</nav>
</div>
</div>
</body> Ответ №1:
Это произойдет потому, что вы не меняете высоту, когда закрываете div, что приводит к его закрытию, так как вы просто меняете максимальную ширину, это приведет к проблеме ширины, с которой вы сталкиваетесь.
Во-первых, я бы добавил ваш переход в ваш div с идентификатором MenuId, а не с фактическим классом, который вы добавляете при нажатии. Поиграйте с ним, но вам нужно изменить высоту, а также ширину, иначе высота просто сломается. Может быть, подумайте о том, чтобы делать свои переходы примерно так. Пример, который я вам даю, не является 100% исправлением, но он укажет вам направление, в котором вам нужно идти, чтобы понять вашу проблему
transition:max-width 0.4s, height 0.4s;
Комментарии:
1. Я не мог понять, что ты сказал. Я проверяю высоту, но ничего не произошло
Ответ №2:
как указано ниже @Stevo, в этом в основном и заключается проблема. Однако, если вы намерены анимировать все меню в целом, поскольку оно плавно и последовательно расширяется из одной исходной точки, я бы посоветовал вам либо использовать transform:scale(); для анимации его роста, либо перевести всю панель из левого верхнего угла в правый нижний, чтобы содержимое исчезало по мере его появления в окне просмотра.
Проблема с этим:
transition:max-width 0.4s, height 0.4s;
Заключается в том, что вы указываете только время или анимацию для запуска, но ваша ширина и высота отличаются. Поэтому он не будет последовательно расширяться.
Кроме того, не пытайтесь заставить его расширяться синхронно, редактируя значения времени, потому что это 1) ужасный подход, и 2) все работает нормально, пока вы не добавите что-то в меню и высота не изменится.