Как создать меню DHTML?
Мне нужно создать меню DHTML с указанными функциями, но я не могу понять, как это сделать. Вот что мне нужно:
Все предметы раскладываются горизонтально. Если они будут шире экрана, в правой части меню появятся две маленькие стрелки, которые позволят прокручивать его. Что-то вроде этого:
+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+
Пункты меню должны быть интерактивными в любом месте ячейки. Они должны тянуться как по вертикали, так и по горизонтали к содержимому. Текст в элементах должен располагаться по центру как по вертикали, так и по горизонтали. Меню должно работать в IE7 / Opera / FF / Safari.
Прокрутка - самая простая часть - я просто помещаю все это в контейнер (скажем, <div>), устанавливаю контейнер на overflow: hidden и затем играю в Javascript с clientWidth, scrollWidth и scrollLeft. Это я выяснил и уже пробовал.
Но как сделать пункты меню такими эластичными, кликабельными в любом месте и центрированным текстом?
Ответы 3
Попробуйте приведенный ниже 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>
Это приведет к вертикальному выравниванию и предотвратит перенос ссылок. Сообщите нам, как это работает.
Кроме того, все они не будут одинаковой высоты, поэтому вертикальное центрирование идет к черту.
Понял. Вы можете сделать это с помощью display: table, я обновлю свой ответ.
display: table не будет кроссбраузерным
Почти там. За исключением того, что IE7 не понимает display: table. :( Я мог бы сделать таблицу стилей только для IE, если бы был способ заставить IE работать таким образом.
clickable в любом месте - это просто: вы можете либо привязать триггер события 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>
(очевидно, я не рекомендую встроенные стили или обработчики скриптов, но вы поняли идею)
Применение отступов будет эффективно центрировать текст, и без назначенной ширины они естественным образом растянутся, чтобы соответствовать своему содержимому.
Я не знаю, сколько там будет строк текста, поэтому я бы хотел, чтобы они ВСЕ растягивались по вертикали И после этого центрировались по вертикали. Таким образом, заполнение для вертикального центрирования недопустимо.
Хорошо, я поговорил со своим начальством, и они решили, что это нормально, если вы не можете щелкнуть правой кнопкой мыши пункт меню и выбрать «Открыть в новом окне». Если это требование будет снято, я не буду привязан к элементам <a> для ссылок. С помощью JavaScript я могу превратить что угодно в ссылку. Итак, выбираю тебя, пикачу<table>!
Ага, это ересь, но работает. В частности, это единственная конструкция, о которой я могу думать, которая может одновременно выполнять все следующие действия:
- Центрировать текст по горизонтали и вертикали;
- Растянуть до содержимого по горизонтали и вертикали;
- Не переходить к следующей строке, когда элементы начинают переполняться.
Все, что может сделать то же самое, вероятно, в любом случае вызовет большее осуждение. И прежде чем у кого-то появится идея - нет, мне не нужна поддержка поисковой системы. Это внутреннее веб-приложение. Было бы очень плохо, если бы Google мог проиндексировать это ...
это делает решение для очень особого случая, это не путь вперед для веб-сайта
Как я уже сказал - внутреннее веб-приложение. Черт, на самом деле мы нацелены только на IE и FF. Остальные браузеры - моя собственная инициатива. Кроме того, если вас беспокоит зависимость от Javascript - это все равно неизбежно, поскольку это AJAX. ;)
Если я это сделаю, поплавки начнут складываться, когда пространство станет сужаться. Мне нужно, чтобы они переполнились, чтобы я мог использовать прокрутку.