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

голоса
0

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

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

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

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

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

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

Задан 09/12/2008 в 15:11
источник пользователем
На других языках...                            


3 ответов

голоса
2

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

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

Ответил 09/12/2008 в 15:18
источник пользователем

голоса
1

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

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

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

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

Ответил 09/12/2008 в 16:12
источник пользователем

голоса
-2

кликабельно в любом месте легко: вы можете связать триггер OnClick события (и, надеюсь, некоторый курсор стиль) к элементу атомной ячейки, или вы можете сделать Клетку элементы атомно-<a> тег (или, скорее, завернуть их в <li>) и ссылка и стиль соответственно (набивка, запас, Foo).

например, случай 1:

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

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

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

Ответил 09/12/2008 в 15:21
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more