Являются ли меню на основе CSS простым переключением отображения none / block и z-index? - PullRequest
3 голосов
/ 26 февраля 2009

Просто пытаюсь понять, как заставить работать выпадающие меню (теория за ними). ​​

Из того, что я видел, это просто игра с CSS с использованием display: none и block вместе с z-index.

События присоединяются к mouseover и mouseout для переключения класса CSS.

Это в принципе так?

Ответы [ 4 ]

3 голосов
/ 26 февраля 2009

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

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

это означает, что вы можете создавать меню, просто используя

<ul id="menu">
    <li>
        some item
        <ul><li>sub item</li></ul>
    </li>
    <li>
        some other item
    </li>
<ul>

Очевидно, вы захотите добавить больше стилей, классов и т. Д., Чтобы предотвратить его применение ко всем спискам, но это общая концепция, стоящая за меню css.

1 голос
/ 26 февраля 2009

Строка меню является горизонтальной <ul> с <li> для каждого выпадающего меню

Вертикальные выпадающие списки <ul>

Требуется специальный материал .css:

  • Для <li> используйте «list-style: none», чтобы избавиться от пуль и т. Д.

  • Для <li> используйте «display: inline;» для горизонтальной компоновки вместо вертикали по умолчанию

  • Для <a> внутри <li> для актуальных интерактивных пунктов меню используйте «padding: 10px 20px;» (или другие размеры), чтобы увеличить целевую область мыши

1 голос
/ 26 февраля 2009

CSS-меню также могут использовать свойство: hover тега привязки, которое будет работать так же, как событие mouseover / mouseout.

Редактировать: вероятно, я должен сказать, что свойство: hover не всегда должно быть в теге привязки, но оно наиболее широко используется.

0 голосов
/ 26 февраля 2009

Это может помочь получить общую картину, чтобы понять, почему события onmouse (out | over) и / или класс hover применяются только к элементам меню, которые имеют дочерние элементы, а не к обычным элементам меню. Это потому, что они, будучи визуально вдали от своих родителей, по-прежнему семантически остаются внутри своих родителей. Поэтому, когда ваша мышь перемещается из родительского пункта меню в его дочерние элементы, считается, что родительская мышь наведена на них.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...