Jump to content

Recommended Posts

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

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

Link to post
Share on other sites

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

 

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

Link to post
Share on other sites

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

 

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

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

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

Link to post
Share on other sites

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

 

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

 

 

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

Link to post
Share on other sites

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

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

 

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

 

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

 

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

Link to post
Share on other sites

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

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

 

 

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

Link to post
Share on other sites

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

 

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 -->
Edited by alexivchenko
Link to post
Share on other sites

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

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()
  }
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...