Css выпадающее меню по клику: Выпадающее по клику меню на css

Leave a Comment / Css / By /

html — Выпадающие меню по клику (без JS)

Здравствуйте,

Мне нужно сделать выпадающие меню по клику использую только HTML/CSS. В принципе, я его создал, но есть проблема в том что я не использую id, а без него не получилось.

Вопрос: Как сделать такой вариант меню без использования id?

Спасибо!

Код HTML:

<nav>
    <label for="checkbox"><img src="http://placehold.it/59x59" alt="Icon of menu"></label>
    <input type="checkbox">
        <ul>
            <li><a href="#">Страница</a></li>
            <li><a href="#">Страница</a></li>
            <li><a href="#">Страница</a></li>
        </ul>
</nav>
  • html
  • css
  • меню
1 

label {cursor: pointer;}
ul {list-style: none;}
. list {display: none;}
.checkbox {display: none;}

.checkbox:checked ~ .list {
  display: block;
}
<nav>
  <label><img src="http://placehold.it/59x59" alt="Icon of menu">
    <input type="checkbox">
 
    <ul>		
      <li><a href="#">Страница</a></li>
      <li><a href="#">Страница</a></li>
      <li><a href="#">Страница</a></li>
    </ul> 
  </label>
</nav>

не самий лутший вариант но я думаю подойдет

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h2~p стиль будет применяться ко всем элементам

, располагающихся после заголовка . При этом и

должны иметь общего родителя, так что если

вставить внутрь , то стили применяться уже не будут.

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как заменить меню выпадающее при наведении на выпадающее при клике? – QA PR-CY

  1. Сообщество
  2. Как заменить меню выпадающее при наведении на выпадающее при клике?

Ответы на пост (14) Написать ответ

Исправлю за 1000р. )

Мне кажется дороговато

А мне кажется, у Вас на сайте огромная куча косяков, в том числе и по верстке
Перепишите в main.css, следующий стиль, который начинается в строке 286:
#site-navigation ul ul {
background: #fd9e00;
box-shadow: none;
top: 1.4em;
padding: 20px;
padding-left: 10px;
padding-top: 10px;
margin-top: 19px;
}
И Вы увидите, как на вторых уровнях выпадающее меню не перекрывает главное уровень верхнего меню)

Да это ерунда. Лучше подскажите, как сделать меню выпадающим по клику 🙂

Я такого ни разу не делал, надо ковырять, а работы и без этого огромная куча)

Жаль, ну ладно, может еще кто-нибудь отзовется.

Да и не получится, так как по клику- будет переходит по ссылке первого уровня меню, сразу же)

ну я загуглил несколько решений, там вроде все как надо отображается, но попробовал на свой сайт прикрутить — не получилось

Вопрос- зачем Вам это?)

выпадающее меню получилось слишком объёмным, хочется попробовать, с вариантом открывающимся по клику

Не получится- объясняю почему и даже не пытайтесь пробовать- только время зря потеряете) У вас в появляется выпадающее меню при наведение на элемент списка- li. Но в этом самом li находится ссылка, которая занимает всю площадь родительского li. Соответственно при клике на li, Вы будете автоматом кликать по ссылке и браузер перейдет по ссылке, Вы даже не успеете просмотреть толком меню.

Не будет так работать. Но, подскажу- после ссылки в li можно поставить знак плюсика или еще чего- при клике на плюсик- открывается выпадающее меню, при клике на ссылку, которую надо выделить, чтобы посетитель понимал, что это отдельный элемент- браузер переходит на страницу. НО- все будут путаться, так как пользователи привыкли видеть на всех сайтах одно и то же- навел на меню, увидел подменю, а это уже плохое юзабилити и большое кол-во отказов. Решать Вам, конечно же) Но не советую так делать и городить огороды- исправьте верстку, лучше)

да это исправлю, попозже. Сейчас надо подумать, как лучше переделать меню.

Думайте) По клику, сделать можно, но это не целесообразно, не так уж и мало работы и у нормального программиста стоит даже не 1000)

Похожие посты

  • Как сделать что бы меню выделялся? (dle 10. 1)
    2

  • Выпадающее меню на сайте. Как провести анализ кликов?
    5

  • Как такое сделать на сайте wordpress?
    3

  • При живом поиске не выпадает список товаров opencart 1.5.
    3

  • Сделать выпадающее вертикальное меню.
    1

Анализ сайта

Поможем улучшить ваш сайт.

Создание интерактивного выпадающего меню с помощью HTML и CSS

Задавать вопрос

спросил

1 год, 4 месяца назад

Изменено 1 год, 4 месяца назад

Просмотрено 2к раз

В настоящее время я работаю над проектом, используя только HTML и CSS. Я хочу, чтобы кнопка меню отображала выпадающие элементы только при нажатии и имела кнопку «x», которая закрывала их при нажатии. Я могу сделать раскрывающееся меню при наведении, но мне не повезло с ним при нажатии без JavaScript.

Кто-нибудь знает, как мне это сделать, используя только HTML и CSS? Вот HTML и CSS, которые у меня есть на данный момент:

 .header-menu {
  цвет фона: #fff;
  семейство шрифтов: "Noto Sans", без засечек;
  размер шрифта: 18 пикселей;
}
.header-элементы меню {
  дисплей: нет;
  z-индекс: 1;
  максимальная ширина: 100%;
  overflow-wrap: break-word;
  вес шрифта: 900;
}
.а {
  цвет: #000;
  отступ: 10 пикселей;
  текстовое оформление: нет;
}
.поиск {
  дисплей: нет;
}
.search-значок {
  дисплей: нет;
}
.header-menu-items час {
  цвет: #d0d0d0;
  цвет фона: #d0d0d0;
  высота: 1 пиксель;
  граница: нет;
}
.header-меню-кнопка {
  выравнивание текста: по левому краю;
  цвет фона: #ff3b3b;
  цвет: #fff;
  размер шрифта: 20px;
  вес шрифта: 600;
  отступ: 10px 0;
  граница: нет;
  курсор: указатель;
  ширина: 100%;
  нижняя граница: 10px;
  отступ слева: 10px;
}
.header-menu: hover .
 
 
 header-menu-items {
  дисплей: блок;
} 
 

  
  

    <дел>
      
         Рубашки
         
      <ч />
      
         Брюки
         
  <ч />
      
         Обувь
         
      <ч />
      
         футболки
         
      <ч />
      
         Аксессуары
         
      <ч />
  • html
  • css
  • раскрывающееся меню
  • клик
0

Прежде всего это должен быть class , а не className .

То, что вы хотите сделать, может быть достигнуто с помощью флажка и селектора родственного элемента ~ .

 .header-меню {
  цвет фона: #fff;
  семейство шрифтов: "Noto Sans", без засечек;
  размер шрифта: 18 пикселей;
}
. header-элементы меню {
  дисплей: нет;
  z-индекс: 1;
  максимальная ширина: 100%;
  overflow-wrap: break-word;
  вес шрифта: 900;
}
.а {
  цвет: #000;
  отступ: 10 пикселей;
  текстовое оформление: нет;
}
.поиск {
  дисплей: нет;
}
.search-значок {
  дисплей: нет;
}
.header-menu-items час {
  цвет: #d0d0d0;
  цвет фона: #d0d0d0;
  высота: 1 пиксель;
  граница: нет;
}
.header-меню-кнопка {
  выравнивание текста: по левому краю;
  цвет фона: #ff3b3b;
  цвет: #fff;
  размер шрифта: 20px;
  вес шрифта: 600;
  отступ: 10px 0;
  граница: нет;
  курсор: указатель;
  ширина: 100%;
  нижняя граница: 10px;
  отступ слева: 10px;
  дисплей: блок;
}
#переключаемое меню {
  дисплей: нет;
}
#toggle-menu:checked ~ .header-menu-items {
  дисплей: блок;
}
#toggle-menu ~ ярлык .hide {
  дисплей: нет;
}
#toggle-menu:checked ~ label .show {
  дисплей: нет;
}
#toggle-menu:checked ~ label .hide {
  дисплей: встроенный;
} 
 <дел>
  
  <дел>
    <дел>
      <а href="">
         Рубашки
         
      <ч />
  <а href="">
         Брюки
         
      <ч />
      <а href="">
         Обувь
         
      <ч />
      <а href="">
         футболки
         
      <ч />
      <а href="">
         Аксессуары
         
      <ч />

Выпадающее меню только CSS | Блог RIMdev

Автор: Тед Крюгер

Как человек, который в основном справляется с написанием Javascript, я склонен смотреть на вещи с точки зрения «Держу пари, я мог бы сделать это с помощью CSS». В этом посте я покажу вам, как можно добиться большего с помощью CSS и меньшего количества JavaScript или вообще без него.

В начале своей карьеры разработчика я сильно полагался на jQuery, чтобы получить то, что мне было нужно. В такой ситуации я бы, вероятно, воспользовался функцией slideDown() или чем-то подобным.

Теперь мы используем старый добрый ванильный JS, чтобы получить то, что нам нужно. Позвольте мне показать вам, как сделать довольно красивую выпадающую навигацию, используя в основном CSS. Секрет перехода на максимальную высоту.

См. раскрывающийся список Pen Simple Nav с переходом CSS от Теда Крюгера (@PhiloBeddoe) на CodePen.

Обратите внимание, что в приведенном выше примере при выборе действия раскрывающегося списка отображается раскрывающееся меню. Выпадающий список имеет максимальную высоту : 0; по умолчанию. После клика добавляем класс active в раскрывающийся список и измените свойство max-height . Я установил его на 100vh , когда он активен. Помните, что это всего лишь max-height , поэтому, делая это, я говорю, что раскрывающийся список будет не выше высоты окна. Отсюда вы можете добавить некоторые стили переполнения, чтобы пользователи могли прокручивать и видеть весь контент в раскрывающемся списке, или вы можете изменить номер. Важной частью является то, что число должно быть конкретным. Надеюсь, это то, что мы увидим в будущем для CSS, но пока max-height это.

Чтобы обеспечить приятный и плавный переход при открытии и закрытии меню, мы добавим easy-in-out для нашей функции синхронизации перехода . Код будет выглядеть следующим образом:

 transition: max-height var(--speed) easy-in-out;

Примечание: var(--speed) задан выше как 0,3 с . Функция синхронизации является ключом к тому, чтобы меню красиво анимировалось при открытии и закрытии. Если бы мы установили легкость в , то он бы открывался красиво, но «защелкивался» при закрытии меню.

Обратите внимание, что JS используется только для переключения класса в раскрывающемся списке и в раскрывающемся списке. Это довольно легко, поэтому я задумался… Можем ли мы заставить это выпадающее меню работать без javascript и использовать только CSS? Давайте попробуем. Думаю, это было бы здорово.

Когда я думал о том, как это сделать, первое, о чем я подумал, это использовать флажок. Это кажется единственным способом, которым вы все еще можете настроить таргетинг на состояние в своем коде и вызвать переход максимальной высоты вашего меню.

Я не уверен в доступности того, что ваше мобильное меню активируется флажком, а не кнопкой, но это не совсем то, что я пытаюсь донести. Я пытаюсь сказать, что мыслите нестандартно и расширяйте границы того, что вы можете делать с помощью CSS.