Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #61 (permalink)  
Старый 23.06.2020, 10:15
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 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;
}
те стили, которые есть я их изучил методом тыка и знаю что за что отвечает.
Мне трудно самому писать стили, а те что есть я легко меняю.

Вы добавили В для лого, но дело не в нем. Я даже удалил лого с сайта (сам хтмл код) и поиск удалил, но меню все равно не раскрывается. Там сейчас кроме кнопки тогл ничего больше нет.
Ответить с цитированием
  #62 (permalink)  
Старый 23.06.2020, 10:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ищите проблему в верстке и стилях, нет в этом меню никаких JS, которые его раскрывают, все на CSS.
Ответить с цитированием
  #63 (permalink)  
Старый 23.06.2020, 11:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Меню находится в теге nav, а у вас стилями в файле responsive.css d медиа-запросе @media (max-width:56.24375em) определен ему размер 40px. Меню раскрывается, но его не видно из-за размера родителя - nav. Уберите это размер из медиа-запроса и увидите свое меню.
Ответить с цитированием
  #64 (permalink)  
Старый 23.06.2020, 11:49
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 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пх. Вот такие пироги.
Ответить с цитированием
  #65 (permalink)  
Старый 23.06.2020, 11:51
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Сообщение от laimas Посмотреть сообщение
Меню находится в теге nav, а у вас стилями в файле responsive.css d медиа-запросе @media (max-width:56.24375em) определен ему размер 40px. Меню раскрывается, но его не видно из-за размера родителя - nav. Уберите это размер из медиа-запроса и увидите свое меню.
так не работает. дело в position: absolute;
Ответить с цитированием
  #66 (permalink)  
Старый 23.06.2020, 11:57
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

У меня все работает.
В общем выбирайте элементы, справа будут его стили, разметка показывает размеры, где можно было убедиться, что меню раскрывается и искать причину.
Разбирайтесь.
Ответить с цитированием
  #67 (permalink)  
Старый 25.09.2020, 20:13
Новичок на форуме
Отправить личное сообщение для Olga Zdorenko Посмотреть профиль Найти все сообщения от Olga Zdorenko
 
Регистрация: 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.
Ответить с цитированием
  #68 (permalink)  
Старый 25.09.2020, 20:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #69 (permalink)  
Старый 25.09.2020, 20:31
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Последний раз редактировалось laimas, 25.09.2020 в 20:34.
Ответить с цитированием
  #70 (permalink)  
Старый 25.09.2020, 20:33
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь яваскриптеров espltd Элементы интерфейса 2 03.03.2017 10:38
Нужна помощь по javascript darklend Общие вопросы Javascript 0 12.01.2014 23:33
Нужна помощь: Slider wheel Alex555 Мобильный JavaScript 0 15.05.2013 18:06
Нужна помощь по слайдеру seoguru Работа 3 28.01.2013 22:02
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17