Меню с dropdown в родительском absolute и sticky как?

Question

[myakuhin]

Было меню рабочее, без родителя (ну только body), я его переместил в секцию header, которая прилипает sticky при скроле, также контейнер с меню чтобы отобразить там где надо сделал absolute. И всё меню перестало скролиться. Нашел как сделать, чтобы у контейнера появился скрол по y, указанием определенного height, но li второго, третьего уровня не раздвигаются никак. Вот тут можно посмотреть https://screenfly.org/#u=https%3A//kupi-zamok.ru&w...

Answer 1

[Pavel-ww]

У вас весьма странная конструкция меню. Ее надо переделать. На li висит событие клика, ссылка перекрывает клик по li. Причем еще и отдельные li используются только для иконок. И внутри этих li с иконками нет ничего, что бы раскрывалось. clearfix вообще там не нужен. Для внутреннего уровня используется div. В общем нажестили вы с меню )). По коду видны остатки нормальной конструкции, над которой вы поиздевались и навешали костылей, вместо того что бы адаптировать под ваши нужды. (копипастнули откуда-то что ли?)
Конструкция должна быть примерно такой

<ul class="menu">
    <li class="menu-parent">
        <a href="#">Главная
            <span class="menu-toggler"><!-- Здесь событие клик -->
                <i class="fa fa-plus"></i>
            </span> 
        </a>
        <ul class="menu-child"> <!-- Второй уровень -->
            <li>
                <a href="#">О нас</a>
            </li>
        </ul>
    </li>
</ul>

Answer 2

[myakuhin]

Это меню тут и было только под секцией header . И оно работает как надо.
Задача была просто сделать его компактней на мобильных устройствах в одну строку с логотипом, поэтому я скопировал всё меню в header, абсолютным позиционированием настроил отображение кнопки там где надо и всё.
И поэтому получились отличия от оригинала в том что:
1. У меню родителем стал header который прилипает к top: 0;
2. И самой верхнему контейнеру меню добавлено postition: absolute;

Вот ниже код касаемо меню из общего скрипта сайта..
Хотел узнать может полный путь указать вместо #menu .dropdown-menu... Или без разницы - будет найден всё равно #menu .dropdown-menu - неважно куда вложен?

// Menu
	$('#menu .dropdown-menu').each(function() {
		var menu = $('#menu').offset();
		var dropdown = $(this).parent().offset();

		var i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());

		if (i > 0) {
			$(this).css('margin-left', '-' + (i + 5) + 'px');
		}
	});

P.S. провел сейчас эксперимент - удалил второе меню вообще (которое display: none;) на мобильных всё заработало как нужно. Видимо мешает display: none; только как - не пойму.

В связи с чем вопрос - есть ли возможность js удалить элемент и все его вложения при определенной ширине экрана, и соответственно показать при другой широте экрана?
То есть не просто добавлять display: none;, а полностью убирать элемент из DOM.

Comments

[Pavel-ww]

Видимо мешает display: none; только как - не пойму.

Мешает дубль ID. ID не должен повторяться где либо на странице, даже если элемент скрыт.

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

Смотрите в jQuery API .width(), .resize(), .remove() или здесь https://ruseller.com/jquery.php?id=50