23.06.2020, 10:15
|
Аспирант
|
|
Регистрация: 10.06.2020
Сообщений: 43
|
|
Сообщение от laimas
|
Работа такого меню основана на верстке и стилях. За флажком находится его метка связанная с ним по атрибуту 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;
}
|
те стили, которые есть я их изучил методом тыка и знаю что за что отвечает.
Мне трудно самому писать стили, а те что есть я легко меняю.
Вы добавили В для лого, но дело не в нем. Я даже удалил лого с сайта (сам хтмл код) и поиск удалил, но меню все равно не раскрывается. Там сейчас кроме кнопки тогл ничего больше нет.
|
|
23.06.2020, 10:30
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Ищите проблему в верстке и стилях, нет в этом меню никаких JS, которые его раскрывают, все на CSS.
|
|
23.06.2020, 11:49
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Меню находится в теге nav, а у вас стилями в файле responsive.css d медиа-запросе @media (max-width:56.24375em) определен ему размер 40px. Меню раскрывается, но его не видно из-за размера родителя - nav. Уберите это размер из медиа-запроса и увидите свое меню.
|
|
23.06.2020, 11:49
|
Аспирант
|
|
Регистрация: 10.06.2020
Сообщений: 43
|
|
Сообщение от laimas
|
Ищите проблему в верстке и стилях, нет в этом меню никаких JS, которые его раскрывают, все на CSS.
|
нашел. В файле /responsive.css
Код:
|
/* < 900 */
@media (max-width:56.24375em) {
nav {
height: 40px; left: 0; position: absolute;
}
} |
убираем position: absolute; и меню раскрывается. Но теперь кнопка тогл не позиционируется по левому краю когда экран меньше 900пх. Вот такие пироги.
|
|
23.06.2020, 11:51
|
Аспирант
|
|
Регистрация: 10.06.2020
Сообщений: 43
|
|
Сообщение от laimas
|
Меню находится в теге nav, а у вас стилями в файле responsive.css d медиа-запросе @media (max-width:56.24375em) определен ему размер 40px. Меню раскрывается, но его не видно из-за размера родителя - nav. Уберите это размер из медиа-запроса и увидите свое меню.
|
так не работает. дело в position: absolute;
|
|
23.06.2020, 11:57
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
У меня все работает.
В общем выбирайте элементы, справа будут его стили, разметка показывает размеры, где можно было убедиться, что меню раскрывается и искать причину.
Разбирайтесь.
|
|
25.09.2020, 20:13
|
Новичок на форуме
|
|
Регистрация: 25.09.2020
Сообщений: 1
|
|
Доброго времени суток всем)
Ребята, очень-очень нужна помощь:
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, 25.09.2020 в 20:24.
|
|
25.09.2020, 20:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Olga Zdorenko,
выбросить все jquery кроме одной версии!!!
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
25.09.2020, 20:31
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Удалите свой вопрос и создайте свою, новую, тему. Поместите свой код в ней в теги HTML, что можно сделать кнопкой <> в форме добавления сообщения.
Последний раз редактировалось laimas, 25.09.2020 в 20:34.
|
|
25.09.2020, 20:33
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
рони,
пора бы добавить форме то что давно предлагалось, подсказки, а то через раз "Пожалуйста, отформатируйте свой код! Для этого его...". Ну негоже help держать за километр от объекта.
|
|
|
|