Задать вопрос
@iPoher

Закрытие меню при клике по якорю?

На этой странице в мобильной версии при нажатии на пункты меню (якори) не закрывается меню. Что дописать, чтобы закрывалось?

<nav id="fh5co-menu-wrap" role="navigation">
						<ul class="sf-menu" id="fh5co-primary-menu">
                            <li class="active"><a href="tel:+7 (917) 253-26-00"><i class="icon-phone2"></i> +7 (917) 253-26-00</a></li>
                            <li><a class="smoothscroll anchor" href="index.html#1">Главная</a></li>
                            <li><a class="smoothscroll anchor" href="index.html#fh5co-features">Преимущества</a></li>
                             <li><a class="smoothscroll anchor" href="index.html#profils">Характеристики</a></li>
							<li><a class="smoothscroll anchor" href="index.html#profils1">Доставка и оплата</a></li>
						</ul>
					</nav>


// Offcanvas and cloning of the main menu
	var offcanvas = function() {

		var $clone = $('#fh5co-menu-wrap').clone();
		$clone.attr({
			'id' : 'offcanvas-menu'
		});
		$clone.find('> ul').attr({
			'class' : '',
			'id' : ''
		});

		$('#fh5co-page').prepend($clone);

		// click the burger
		$('.js-fh5co-nav-toggle').on('click', function(){

			if ( $('body').hasClass('fh5co-offcanvas') ) {
				$('body').removeClass('fh5co-offcanvas');
			} else {
				$('body').addClass('fh5co-offcanvas');
			}
			// event.preventDefault();

		});

		$('#offcanvas-menu').css('height', $(window).height());

		$(window).resize(function(){
			var w = $(window);


			$('#offcanvas-menu').css('height', w.height());

			if ( w.width() > 769 ) {
				if ( $('body').hasClass('fh5co-offcanvas') ) {
					$('body').removeClass('fh5co-offcanvas');
					
				}
			}

		});	

	}

	

	// Click outside of the Mobile Menu
	var mobileMenuOutsideClick = function() {
		$(document).click(function (e) {
	    var container = $("#offcanvas-menu, .js-fh5co-nav-toggle");
	    if (!container.is(e.target) && container.has(e.target).length === 0) {
	      if ( $('body').hasClass('fh5co-offcanvas') ) {
				$('body').removeClass('fh5co-offcanvas');
			}
	    }
		});
	};
  • Вопрос задан
  • 2852 просмотра
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 1
@AntowaKartowa
Чето как-то слишком дофига всего в js происходит и не очень ясно что и почему. Лень разбираться так что я коротко опишу способ как сделать тож самое без javascript

Можно якоря обернуть в label с атрибутом for="#menu-toggle" На одном уровне с блоком меню который должен прятаться расположить input type=checkbox id="menu-toggle" задать ему позицию абсолют, опасити 0, з-индекс -1
Точно таким же лейблом обернуть бургер который должен меню делать видимым.

Ну а для блока меню по умолчанию определить стили чтоб он был скрыт,
но при #menu-toggle:checked ~ .some-menu-block определить стили чтоб он был открыть.

Вот тут https://jsfiddle.net/AntowaKartowa/b3ueU/ и тут https://jsfiddle.net/AntowaKartowa/BcMVP/ можно посмотреть как подобный подход работает
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы