HTML List / Menu - можно ли изменить ширину автоматически? (для зависания / скольжения) - PullRequest
0 голосов
/ 03 февраля 2012

Я использую HTML-список для вертикального выпадающего меню с различными подменю. Каждая точка навигации является элементом списка в неупорядоченном списке.

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

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

Extra width

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

Есть ли способ сделать так, чтобы этот верхний элемент навигации не имел полной ширины всех его дочерних элементов?

EDIT:

На самом деле мне, наконец, удалось это исправить - проблема заключалась в том, что я объявил ширину во всем списке, потому что без него, скольжение заставляло меню «подпрыгивать» внизу после скольжения вниз, я полагаю, текст «разворачивался» сам или что-то. При применении ширины к элементам субнавигации список не появляется, а «целевая» область точно является только верхней точкой.

1 Ответ

0 голосов
/ 03 февраля 2012

Если я правильно понимаю, ваша навигация выглядит так:

<ul>
    <li>Nav Point 1
        <ul>
            <li>navigation item 1</li>
            <li>navigation item 2</li>
            <li>navigation item 3</li>
        </ul>
    </li>
    <li>Nav Point 2
        <ul>
            ....

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

Возможно, вы могли бы работать с двумя отдельными списками списков? Первый список - это навигационные точки верхнего уровня, второй - с элементами навигации. Вы бы использовали скрипт и CSS, чтобы скрыть второй список и расположить элементы для отображения под соответствующей навигацией верхнего уровня. Ваш сценарий будет показывать и скрывать меню, как требуется в соответствующих местах. Вашему сценарию может потребоваться разбить списки элементов навигации на отдельные структуры, если вы хотите отображать более одного за раз (т. Е. Если меню «задерживаются» после того, как мышь выдвигается).

Это не так просто, как типичная структура "списков списков", но это также более сложный дисплей, поэтому вы платите сложнее.

...