Как создать меню DHTML? - PullRequest
Новая
       31

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

0 голосов
/ 09 декабря 2008

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

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

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 09 декабря 2008

Попробуйте 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>

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

1 голос
/ 09 декабря 2008

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

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

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

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

0 голосов
/ 09 декабря 2008

кликать в любом месте легко: вы можете либо связать триггер события onclick (и, возможно, немного стилизации курсора) с элементом атомарной ячейки, либо вы можете сделать теги элементов атомной ячейки (или, более вероятно, заключить их в ) и ссылку и стиль соответственно (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>

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

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

...