Меню CSS без JavaScript - PullRequest
Новая
       18

Меню CSS без JavaScript

4 голосов
/ 02 февраля 2011

Кто-нибудь может дать ссылку или возможно создать меню полностью в зависимости от CSS и not a single bit of javascript?

Требование - это выпадающее меню, в котором может быть много children ( submenu ).

Будет ли что-нибудь, если оно будет создано таким образом, cross browser compatible?

Буду признателен за любую помощь по этой теме!

EDIT

Спасибо за ваш вклад еще одно сомнение

Может ли это быть реализовано вместо использования ul li

скажем div span комбинация, поскольку это может помочь мне создать меню, которое не изменит мою текущую структуру HTML!

Ответы [ 6 ]

9 голосов
/ 02 февраля 2011

Хитрость в псевдоклассе :hover. 

<ul class="menu">
  <li>
    <a href="...">Menu Item 1</a>
    <ul class="submenu">
      <li><a href="...">Submenu 1</a></li>
      <li><a href="...">Submenu 2</a></li>
    </ul>
  </li>
  <li>
    <a href="...">Menu Item 2</a>
    <ul class="submenu">
      <li><a href="...">Submenu 3</a></li>
      <li><a href="...">Submenu 4</a></li>
    </ul>
  </li>
</ul>

Хорошо?Таким образом, все ваше подменю должно находиться внутри <li> пункта главного меню, которому он соответствует.Затем для CSS: 

.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }

Сделайте немного стайлинга, и работа сделана.

Edit: Для другого слоя меню это действительно просто.Используйте этот CSS: 

.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }

Обратите внимание, что я заменил .menu>li:hover на .menu li:hover.Это говорит браузеру найти все элементы li под главным меню (не только непосредственные потомки) и показать их подменю при наведении курсора.Я также избавился от использования класса подменю, потому что он на самом деле не нужен, если вы основываете CSS на потомках.Это позволит вам добавить столько уровней, сколько вы хотите.

3 голосов
/ 02 февраля 2011

Проверьте этот сайт: http://www.cssplay.co.uk/menus/, которые имеют множество различных меню с только CSS . Справочник.

2 голосов
/ 02 февраля 2011
2 голосов
/ 02 февраля 2011
0 голосов
/ 03 февраля 2016

Я только что закончил разработку CSS-меню для мобильных устройств, используя абсолютно нулевой Javascript. По сути, применяя атрибут tabindex="-1" ко всему, что вы хотите, вы позволяете этому элементу реагировать на свойство CSS :focus, фактически не являясь частью порядка табуляции (поэтому вы не можете получить доступ к этому элементу при помощи табуляции). Применение этого к принятому в настоящее время решению: 

<ul class="menu">
  <li tabindex="-1">
    Menu Item 1
    <ul class="submenu">
      <li><a href="...">Submenu 1</a></li>
      <li><a href="...">Submenu 2</a></li>
    </ul>
  </li>
  <li tabindex="-1">
    Menu Item 2
    <ul class="submenu">
      <li><a href="...">Submenu 3</a></li>
      <li><a href="...">Submenu 4</a></li>
    </ul>
  </li>
</ul>

Я удалил теги <a> (потому что теперь наши выпадающие меню можно щелкать, мы вставляем tabindex во все, что хотим щелкнуть, и CSS изменяется на следующее: 

.menu > li:not(:focus) > .submenu { display: none; }

Проверьте это Codepen для моего мобильного меню:

  • НЕТ JavaScript
  • Адаптивный
  • 1020 *, допускающее применение стиля *
  • Символ меню HTML Гамбургер!
0 голосов
/ 02 февраля 2011

Безусловно, выпадающие меню можно создавать только в CSS, и многие сайты сейчас используют его.

То, что вы не получите (пока) с CSS, это любые анимированные выпуски и т. Д. - меню будет просто переключаться между видимым и скрытым. Если вы хотите анимированные выпуски, jQuery может быть лучшим вариантом. Тем не менее, CSS-анимация существует. Он реализован только в одном или двух браузерах, но вы все равно можете добавить его в таблицу стилей; это не сломает браузеры, которые его не поддерживают; они просто не получат анимацию.

Кросс-браузерная совместимость для CSS-меню относительно проста, если вы игнорируете IE6. IE7 / 8 можно заставить работать без особых хлопот, но IE6 плохо работает практически для всех техник меню, работающих только с CSS. Если это вообще возможно, постарайтесь не поддерживать IE6. Это старый браузер, и его действительно нужно оставить в покое.

Другие уже предоставили ссылки на несколько хороших примеров, поэтому я не буду повторять их здесь.

...