Javascript-форум - Нужна помощь!

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Нужна помощь! (https://javascript.ru/forum/jquery/80397-nuzhna-pomoshh.html)

Цитата:

Сообщение от laimas (Сообщение 526326)

Работа такого меню основана на верстке и стилях. За флажком находится его метка связанная с ним по атрибуту id. И хотя флажок скрыт, щелчки по его метке изменяют его состояние.

Я добавил в пример тег B с текстом Logo разместив его после метки кнопки меню, которой в режиме малого экрана изменил стиль с block на inline-block. Сейчас в верстке: флажок, за ним метка, за ней логотип, а за ним тег меню UL. Эти элементы имеют одного общего родителя, это элементы братья (родственные).

В CSS есть селектор соседних элементов A + B, и родственных элементов A ~ B, а также псевдокласс :checked.

В мобильном режиме, щелчок по кнопке меню выберет флажок, поэтому будут работать эти CSS правила:

/* соседнему с флажком элементу, а это его метка, т.е. кнопка меню
устанавливается темный фон и светлый шрифт*/
input.toggleMenu:checked + label.toggleMenu{
        background: #000;
        color: #fff;
}
/*братским флажкам элементам UL, 
тут правила для меню и подразделов, 
а селектор братский выбран потому,
что , например, за флажком метка,
а для меню, за ней еще и логотип, и только потом само меню,
определяется позиция и макс. высота*/
input.toggleMenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul{
        position: relative;
        max-height: 5000px;
}
/*а раскрытие меню и его подразделов
определено ранее до медиазапроса
так как горизонтальное меню также раскрывается щелчком*/
input.toggleMenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul li{
    display: block;
}

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

Вы добавили В для лого, но дело не в нем. Я даже удалил лого с сайта (сам хтмл код) и поиск удалил, но меню все равно не раскрывается. Там сейчас кроме кнопки тогл ничего больше нет.

Ищите проблему в верстке и стилях, нет в этом меню никаких JS, которые его раскрывают, все на CSS.

Меню находится в теге nav, а у вас стилями в файле responsive.css d медиа-запросе @media (max-width:56.24375em) определен ему размер 40px. Меню раскрывается, но его не видно из-за размера родителя - nav. Уберите это размер из медиа-запроса и увидите свое меню.

Цитата:

Сообщение от laimas (Сообщение 526328)

Ищите проблему в верстке и стилях, нет в этом меню никаких JS, которые его раскрывают, все на CSS.

нашел. В файле /responsive.css

Код:

/* < 900 */

@media (max-width:56.24375em) {

        nav {

                height: 40px; left: 0; position: absolute;

        }

}

убираем position: absolute; и меню раскрывается. Но теперь кнопка тогл не позиционируется по левому краю когда экран меньше 900пх. Вот такие пироги.

Цитата:

Сообщение от laimas (Сообщение 526330)

так не работает. дело в position: absolute;

У меня все работает.
В общем выбирайте элементы, справа будут его стили, разметка показывает размеры, где можно было убедиться, что меню раскрывается и искать причину.
Разбирайтесь.

Доброго времени суток всем)
Ребята, очень-очень нужна помощь:
1. Почему-то не срабатывает скрипт в модальном окне (плагин popup maker). На обычной странице все работает.
2. И подсветка area срабатывает только на главной, а на остальных страницах area работает, но без подсветки почему-то.

Скрипт такой:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.maphilight.js"></script>
<script type="text/javascript">
$(function() {
$('.map-6').maphilight();
$('#squidheadlink').mouseover(function(e) {
$('#squidhead').mouseover();
}).mouseout(function(e) {
$('#squidhead').mouseout();
}).click(function(e) { e.preventDefault(); });
});
</script>
-----------------------------------------------------------------
В самом модальном окне стоит:
<div id="map-img-6">
<img src="https://logpn.ru/wp-content/uploads/2020/09/Ckhema-2.jpg" usemap="#map-6" class="map-6" id="map-6"></div>
<map name="map-6">
<area shape="rect" data-maphilight='{"alwaysOn":"true", "strokeColor":"ff0000","strokeWidth":0.3,"fillColo r":"ff0000","fillOpacity":0.6}' coords="548,190,658,310" class="test" id="test" alt="test">
</map>

Olga Zdorenko,
выбросить все jquery кроме одной версии!!!
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Удалите свой вопрос и создайте свою, новую, тему. Поместите свой код в ней в теги HTML, что можно сделать кнопкой <> в форме добавления сообщения.

рони,
пора бы добавить форме то что давно предлагалось, подсказки, а то через раз "Пожалуйста, отформатируйте свой код! Для этого его...". Ну негоже help держать за километр от объекта. :)