Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #51 (permalink)  
Старый 22.06.2020, 16:46
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Да они и будут скрыты, если меню кнопкой ≡ не раскрывалось.
Ответить с цитированием
  #52 (permalink)  
Старый 22.06.2020, 16:54
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Сообщение от laimas Посмотреть сообщение
Да они и будут скрыты, если меню кнопкой ≡ не раскрывалось.
Вы не поняли. Я не про скрытые пункты. Я про само поле на котором находится ≡ , лого и кнопка поиска. Все это поле активно (кликабельно).
Ответить с цитированием
  #53 (permalink)  
Старый 22.06.2020, 16:55
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ну тут я не знаю как вы сделали, что-то во что-то не так вставлено у вас.
Ответить с цитированием
  #54 (permalink)  
Старый 22.06.2020, 16:58
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Сообщение от laimas Посмотреть сообщение
Ну тут я не знаю как вы сделали, что-то во что-то не так вставлено у вас.
в Вашем примере тоже так. Вставьте свой код в хтмл и уменьшите экран и Вы увидите, что меню раскрывается при нажатии на любое место поля, а не только на ≡
Ответить с цитированием
  #55 (permalink)  
Старый 22.06.2020, 17:00
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Метка на которой находится кнопка меню на моб. устройстве имеет стиль block, то есть будет заниматься всю ширину области экрана, плюс отступы и т.п. Видимо об этом вопрос? У вас это должна быть отдельная кнопка (не такие стили иметь как в примере) со стилями которые вы для div ранее прописывали.
Ответить с цитированием
  #56 (permalink)  
Старый 22.06.2020, 17:01
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от zulfukar
меню раскрывается при нажатии на любое место поля
Читайте выше, вы не сделали того, что написано в html комментарии рядом с кнопкой.
Ответить с цитированием
  #57 (permalink)  
Старый 23.06.2020, 00:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

.arrow {
    cursor: default;
}


Это удалить из стилей
Ответить с цитированием
  #58 (permalink)  
Старый 23.06.2020, 08:21
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Сообщение от laimas Посмотреть сообщение
Метка на которой находится кнопка меню на моб. устройстве имеет стиль block, то есть будет заниматься всю ширину области экрана, плюс отступы и т.п. Видимо об этом вопрос? У вас это должна быть отдельная кнопка (не такие стили иметь как в примере) со стилями которые вы для div ранее прописывали.
кнопка toggle не работает (на маленьком/мобильном экране). На Вашем примере работает, а на сайте нет. Подозреваю, что конфликтует с label, input или еще с чем-то.
Ответить с цитированием
  #59 (permalink)  
Старый 23.06.2020, 08:48
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Работа такого меню основана на верстке и стилях. За флажком находится его метка связанная с ним по атрибуту 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;
}

Последний раз редактировалось laimas, 23.06.2020 в 10:11.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь яваскриптеров 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