Перейти к содержанию
Официальный форум поддержки Simpla

Рекомендуемые сообщения

Адаптивный шаблон в мобильной версии, имеет горизонтальное меню категорий закрепленное в нижней части экрана. Знаю, что нужно рассчитать ширину от начала пункта меню и от конца до краев экрана.

Как сделать, чтобы текущий пункт меню всегда оказывался по центру?

Ссылка на сообщение
Поделиться на другие сайты

На форуме Okay Вам не помогли, и Вы решили тут написать (правильно: один хрен система одна и та же)

 

Покажите сайт, где это нужно сделать

Ссылка на сообщение
Поделиться на другие сайты

На форуме Okay Вам не помогли, и Вы решили тут написать (правильно: один хрен система одна и та же)

 

Покажите сайт, где это нужно сделать

Причём тут система? И сайт показывать не нужно. Написал там где сижу и сидят верстальщики.

Вопрос не к функционалу, а к тем кто занимается версткой и знает JavaScript.

Ссылка на сообщение
Поделиться на другие сайты

На форуме Okay Вам не помогли, и Вы решили тут написать (правильно: один хрен система одна и та же)

 

Покажите сайт, где это нужно сделать

 

 

Странно почему не помогли?)

Ссылка на сообщение
Поделиться на другие сайты

Причём тут система? И сайт показывать не нужно. Написал там где сижу и сидят верстальщики.

Вопрос не к функционалу, а к тем кто занимается версткой и знает JavaScript.

 

обычно такого рода задачи решаются так, что человек заходит на сайт, включает инспектор кода и пробует сделать, то что Вы просите.

 

Если принципиально не показываете сайт, то ответить можно примерно след. образом: "просто отцентруйте текущий пункт меню"

 

Пс. Ну камон, каждый случай уникальный - ванговать очень сложно

Ссылка на сообщение
Поделиться на другие сайты

Адаптивный шаблон в мобильной версии, имеет горизонтальное меню категорий закрепленное в нижней части экрана. Знаю, что нужно рассчитать ширину от начала пункта меню и от конца до краев экрана.

Как сделать, чтобы текущий пункт меню всегда оказывался по центру?

 

 

нифига не понятно может вам надо сначала определить разрешение экрана а от него уже и плясать

Ссылка на сообщение
Поделиться на другие сайты

Вроде нашел решение, но что-то не работает

 

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 -->
Изменено пользователем alexivchenko
Ссылка на сообщение
Поделиться на другие сайты

Попробуйте убрать вот эту строчку

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()
  }
Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...