Многоуровневое меню списка в стиле Accordion Style

Question

Я огляделся и пока не нашел решения этой проблемы.У меня есть список меню с разметкой, например:

<div id="menu">
  <ul>
    <li>Category #1
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #2
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #3
      <ul>

        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #4
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
  </ul>
</div>

Я пытаюсь сделать так, чтобы меню было полностью горизонтальным, при наведении курсора на категорию, она будет выдвигаться рядом с ней.,Визуальный пример здесь

Очень важно, что он построен на структурированном списке, и, как я уже сказал, насколько я могу судить, ни один из аккордеонов, которые я проверял до сих пор, не поддерживает эту функцию.Есть идеи?

Answer 1

Есть ли ссылки в элементах Lite? Если это так, вы можете попробовать что-то вроде этого:

li ul {
    display:none;
}
li, ul, a {
    float:left;
    margin:0;
    padding:0;
    outline:1px solid;
}
li:hover ul {
    display:block;
}

Это не включает в себя функциональность «выдвигания», но показывает, что вам, вероятно, понадобится отдельный элемент вокруг текста непосредственно перед каждым вложенным ul. (Общее оформление здесь, конечно, просто подтверждение концепции, не стесняйтесь пропустить схему, например;)

Answer 2

Что-то вроде

.menu ul {margin: 0; отступ: 0; стиль списка: нет;} .menu li {float: left; top: 0;} .menu li ul{display: none; top: 0;} .menu li: hover ul {display: inline; top: 0;}

сделает то, что вы хотите, но проблема не в создании, но в использовании.Это будет сделано в практических целях - беспокойство при переходе от дочернего к другому родителю справа и непригодные / невыбираемые ссылки, если вы сделаете его многоуровневым за пределами вставленного вами кода.Подвешенный элемент переместится из позиции (и, следовательно, из-под наведения) и в некоторых случаях потеряет свой стиль и фокус, например, при наведении курсора с #Item 3 на #Category 2 в вашем примере элемент 3 потеряет фокус, итаким образом, категория 1 теряет фокус, и поэтому элементы 1,2 и 3 станут невидимыми, а категория 2 появится на месте элемента 1.

Это может работать, если у вас только один уровень подссылок,Для более чем одного уровня характер меню таков, что многие ссылки будут недоступны, потому что они будут менять положение / скрываться, прежде чем их можно будет щелкнуть.

Чтобы по-прежнему заставить его работать, вы можете использовать css3и / или javascript для создания медленной анимации появления и исчезновения ссылок, и, возможно, кто-то с быстрыми рефлексами может выбрать некоторые .....

Не такая уж хорошая идея.

Может быть лучшечтобы создать меню типа аккордеона и использовать щелчки для переключения на разворачивание и свертывание, а не наведение.

PS: На самом деле я не проверял код, который дал вам.Возможно, вам придется протестировать и настроить.

PPS: «top: 0» для в любом случае «display: none», потому что если вы в конечном итоге используете переходы, вы не хотите, чтобы он выпрыгивал из места, какэто исчезает.Необязательно.

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

Answer 3

Здесь горизонтальная аккордеонная реализация

http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

Горизонтально или вертикально, это зависит от того, как вы плаваете элементы.

Я нашел пример из приведенного ниже местоположения

http://www.catswhocode.com/blog/8-amazing-jquery-accordions