Как создать DHTML-меню?

Мне нужно создать DHTML-меню с указанными функциями, но я не могу понять, как это сделать. Вот что мне нужно:

Все элементы расположены горизонтально. Если бы они были шире экрана, в правой части меню появились бы две маленькие стрелочки, позволяющие его прокручивать. Что-то вроде этого:

+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+

Пункты меню должны быть кликабельными в любом месте ячейки. Они должны тянуться как по вертикали, так и по горизонтали к содержимому. Текст в пунктах должен быть центрирован как по вертикали, так и по горизонтали. Меню должно работать в IE7/Opera/FF/Safari.

Прокрутка — это простая часть: я просто помещаю все это в контейнер (скажем, <div>), устанавливаю контейнер в overflow: hidden, а затем играю в Javascript с clientWidth, scrollWidth и scrollLeft. Это я понял и уже попробовал.

Но как сделать пункты меню такими растянутыми, кликабельными в любом месте и центрированным текстом?


menu dhtml
person Vilx-    schedule 09.12.2008    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Попробуйте CSS ниже:

#menu {
  display: table; 
}   
#menu a {
    display:table-cell; 
    vertical-align:middle;
}

А затем отформатируйте свое меню следующим образом:

<div id="menu">
    <a href="#">normal text</a>
    <a href="#"><big>large text</big></a>
    <a href="#"><span style="line-height:100px;">very tall text</span></a>
</div>

Это приведет к принудительному вертикальному выравниванию и предотвратит перенос ссылок. Дайте нам знать, как это работает.

person Chris Van Opstal    schedule 09.12.2008
comment
Если я это сделаю, поплавки начнут складываться, когда пространство станет слишком узким. Мне нужно, чтобы они переполнялись, чтобы я мог использовать прокрутку. - person Vilx-; 09.12.2008
comment
Кроме того, они не все будут одинаковой высоты, поэтому вертикальное центрирование идет к черту. - person Vilx-; 09.12.2008
comment
Понял. Вы можете сделать это с помощью display:table, я обновлю свой ответ. - person Chris Van Opstal; 09.12.2008
comment
display: table не будет работать в разных браузерах - person annakata; 09.12.2008
comment
Почти там. За исключением того, что IE7 не понимает display:table. :( Я мог бы сделать таблицу стилей только для IE, если бы был способ заставить IE работать таким образом. - person Vilx-; 09.12.2008

arrow_upward
1
arrow_downward

Хорошо, я поговорил со своим начальством, и они решили, что это может быть нормально, что вы не можете щелкнуть правой кнопкой мыши пункт меню и выбрать «Открыть в новом окне». Если это требование будет снято, то я не буду привязан к <a> элементам для ссылок. С помощью JavaScript я могу превратить что угодно в ссылку. Итак, я выбираю тебя, пикачу <table>!

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

  • Центрировать текст по горизонтали и вертикали;
  • Растянуть содержимое по горизонтали и вертикали;
  • Не переходить на следующую строку, когда элементы начинают переполняться.

Все остальное, что может сделать то же самое, вероятно, в любом случае будет более конвульсивным. И прежде чем кто-нибудь догадается - нет, мне не нужна поисковая поддержка. Это внутреннее веб-приложение. Было бы очень плохо, если бы Google мог это проиндексировать...

person Vilx-    schedule 09.12.2008
comment
это делает решение для особого случая, это не путь для веб-сайта - person annakata; 09.12.2008
comment
Как я уже сказал - внутреннее веб-приложение. Черт, мы на самом деле ориентируемся только на IE и FF. Остальные браузеры - моя собственная инициатива. Кроме того, если вы беспокоитесь о зависимости от Javascript - в любом случае это неизбежно, поскольку это AJAX. ;) - person Vilx-; 09.12.2008

arrow_upward
-2
arrow_downward

кликнуть в любом месте легко: вы можете либо привязать триггер события onclick (и, надеюсь, некоторый стиль курсора) к атомарному элементу ячейки, либо вы можете сделать элементы атомарной ячейки тегами ‹a› (или, что более вероятно, обернуть их в ‹li›) и ссылку и соответствующий стиль (padding, margin, foo).

например Дело 1:

<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>

(очевидно, я не очень рекомендую встроенные стили или обработчики сценариев, но вы поняли идею)

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

person annakata    schedule 09.12.2008
comment
Я не знаю, сколько строк текста будет, поэтому я бы хотел, чтобы они ВСЕ растягивались по вертикали И центрировались по вертикали после этого. Таким образом, отступы для вертикального центрирования не годятся. - person Vilx-; 09.12.2008