alexivchenko Опубликовано 20 мая, 2020 Жалоба Поделиться Опубликовано 20 мая, 2020 Адаптивный шаблон в мобильной версии, имеет горизонтальное меню категорий закрепленное в нижней части экрана. Знаю, что нужно рассчитать ширину от начала пункта меню и от конца до краев экрана. Как сделать, чтобы текущий пункт меню всегда оказывался по центру? Цитата Ссылка на сообщение Поделиться на другие сайты
simpla24 Опубликовано 20 мая, 2020 Жалоба Поделиться Опубликовано 20 мая, 2020 На форуме Okay Вам не помогли, и Вы решили тут написать (правильно: один хрен система одна и та же) Покажите сайт, где это нужно сделать Цитата Ссылка на сообщение Поделиться на другие сайты
alexivchenko Опубликовано 20 мая, 2020 Автор Жалоба Поделиться Опубликовано 20 мая, 2020 На форуме Okay Вам не помогли, и Вы решили тут написать (правильно: один хрен система одна и та же) Покажите сайт, где это нужно сделатьПричём тут система? И сайт показывать не нужно. Написал там где сижу и сидят верстальщики. Вопрос не к функционалу, а к тем кто занимается версткой и знает JavaScript. Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 20 мая, 2020 Жалоба Поделиться Опубликовано 20 мая, 2020 На форуме Okay Вам не помогли, и Вы решили тут написать (правильно: один хрен система одна и та же) Покажите сайт, где это нужно сделать Странно почему не помогли?) Цитата Ссылка на сообщение Поделиться на другие сайты
simpla24 Опубликовано 20 мая, 2020 Жалоба Поделиться Опубликовано 20 мая, 2020 Причём тут система? И сайт показывать не нужно. Написал там где сижу и сидят верстальщики.Вопрос не к функционалу, а к тем кто занимается версткой и знает JavaScript. обычно такого рода задачи решаются так, что человек заходит на сайт, включает инспектор кода и пробует сделать, то что Вы просите. Если принципиально не показываете сайт, то ответить можно примерно след. образом: "просто отцентруйте текущий пункт меню" Пс. Ну камон, каждый случай уникальный - ванговать очень сложно Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 20 мая, 2020 Жалоба Поделиться Опубликовано 20 мая, 2020 Адаптивный шаблон в мобильной версии, имеет горизонтальное меню категорий закрепленное в нижней части экрана. Знаю, что нужно рассчитать ширину от начала пункта меню и от конца до краев экрана.Как сделать, чтобы текущий пункт меню всегда оказывался по центру? нифига не понятно может вам надо сначала определить разрешение экрана а от него уже и плясать Цитата Ссылка на сообщение Поделиться на другие сайты
simpla24 Опубликовано 20 мая, 2020 Жалоба Поделиться Опубликовано 20 мая, 2020 Странно почему не помогли?) одновременно увидел и тут, и там. Решил тут помочь Цитата Ссылка на сообщение Поделиться на другие сайты
alexivchenko Опубликовано 22 мая, 2020 Автор Жалоба Поделиться Опубликовано 22 мая, 2020 (изменено) Вроде нашел решение, но что-то не работает https://codepen.io/vpolovnyov/pen/jeYZLg class Menu { constructor(el) { this.el = el this.el.addEventListener('click', this.handleClick.bind(this)) window.addEventListener('resize', this.scrollToActiveItem.bind(this)) this.scrollToActiveItem() } get activeEl() { return this.el.querySelector('.is__active') } handleClick(e) { e.preventDefault() this.el.querySelector('.is__active') .classList .remove('is__active') e.target.parentNode .classList .add('is__active') this.scrollToActiveItem() } scrollToActiveItem() { if (!this.activeEl) return const scrollParent = this.el.parentNode const scrollParentWidth = scrollParent.clientWidth const activeElWidth = this.activeEl.clientWidth const activeElLeftOffset = this.activeEl.offsetLeft const isActiveElInvisible = activeElLeftOffset + activeElWidth > scrollParentWidth if (isActiveElInvisible) { scrollParent.scrollLeft = activeElLeftOffset - (scrollParentWidth / 2) + (activeElWidth / 2) } else { scrollParent.scrollLeft = 0 } } } new Menu(document.querySelector('.menu')) Меню становится не кликабельным <aside class="aside"> <div class="menu"> <div class="menu-list__track"> {* Рекурсивная функция вывода дерева категорий *} {function name=categories_tree} {if $categories} {foreach $categories as $c} {* Показываем только видимые категории *} {if $c->visible} <a class="category-nav__item {if $category->id == $c->id}is__active{/if}" href="catalog/{$c->url}" data-category="{$c->id}"> {if $c->image} <div class="category-nav__icon"> <img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name|escape}"> </div> {/if} {$c->name|escape} </a> {categories_tree categories=$c->subcategories} {/if} {/foreach} {/if} {/function} {categories_tree categories=$categories} </div> <!-- /.category-list__track --> </div> <!-- /.category-list --> </aside> <!-- /.aside --> Изменено 22 мая, 2020 пользователем alexivchenko Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 22 мая, 2020 Жалоба Поделиться Опубликовано 22 мая, 2020 Попробуйте убрать вот эту строчку this.el.addEventListener('click', this.handleClick.bind(this)) И тогда и вот это все handleClick(e) { e.preventDefault() this.el.querySelector('.is__active') .classList .remove('is__active') e.target.parentNode .classList .add('is__active') this.scrollToActiveItem() } Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.