К тому же, с возможностью добавлять/убирать пункты, резиновое.
Делимся методиками…
Горизонтальное меню с равными расстояниями между пунктами.
[05.08.2011 | 00:59]Комментариев (9)
Оставить комментарий
Для отправки комментария вам необходимо авторизоваться.
Таблицей =)
ну это понятно. код в студию)))
Легко :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title>TITLE</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <style> .header { background:#000;} .main_menu {width:50%;} .main_menu td {vertical-align:top; width:1px; white-space:nowrap;} .main_menu a {color:#fff; white-space:nowrap;} .main_menu .space {width:auto !important;} </style> </head> <body> <div class="header"> <table class="main_menu"> <tr> <td><a href="#">Продукты</a></td> <td class="space"></td> <td><a href="#">Услуги</a></td> <td class="space"></td> <td><a href="#">Проекты</a></td> <td class="space"></td> <td><a href="#">Поддержка</a></td> <td class="space"></td> <td><a href="#">О компании</a></td> </tr> </table> </div> </body> </html>класс!!! сам таким пользуюсь. только: как подсветить вместе с пунктом и половину соседних разделителей? и как сделать выпадающее меню с НЕЗАДАННОЙ шириной (ИЕ7 считает ширину детей, равной 1пикс)? и как задать ширину разделителей перед первым пунктом и после последнего (обычно она вполовину меньше, чем остальные)?
Не ну это уже коцмас какой-то )). Даже не знаю, что и ответить, попробую так:
1. >как подсветить вместе с пунктом и половину соседних разделителей
Средствами ЦСС/ХТМЛя — думаю никак. Возможно как-то скриптами высчитывать ширину, потом выносить через минусовые маргины в разные стороны блок. Это только в теории, в скриптах я не силен.
2. >как сделать выпадающее меню с НЕЗАДАННОЙ шириной (ИЕ7 считает ширину детей, равной 1пикс)?
Пусть контент сам тянет ширину, чтоб не было переносов на новую строку используй свойство white-space:nowrap;
3. >как задать ширину разделителей перед первым пунктом и после последнего (обычно она вполовину меньше, чем остальные)?
Прописать классы и задать ширину ручками. Либо фиксированные отступы без %.
1. ну я ж о том же — через анус. https://www.woodenlife.ru/ — геморроя было на неделю!
2. контент-то переноситься не будет. только, если юзер сделает подраздел на сайте с названием в 30 слов — будет по-уродски. бывает nowrap вылазит боком. кроме того, грабли в том, что ие6-7 будет считать ширину по минимуму и фон под ПОДпунктами будет прилипать к правым краям контента
3. речь же о hi-end-вёрстке. куда ж тут гвоздями-то бить? пустые < t d > не всегда отображаются, иногда схлопываются. я в них пишу & n b s p ; так вот для случая, когда нужна ширина вполовину меньше, я пишу ОДИН пробел, в остальные дивайдеры — под ДВА.
https://www.woodenlife.ru/ — тут же, кстати, перед первым пунктом и после последнего — полноразмерные отступы. что они мне напоминают — даже боюсь сказать
Есть варианты на базе inline-block для пунктов плюс text-align: justify для контейнера. Правда, проблему «подсветки половины отступов» он тоже слету решает не совсем кроссбраузерно… хотя много ли сейчас того IE7 осталось? :)
+1000
да хрен с ней, с той подстветкой. главное, что нет явного указания ширины в 1 пикс, из-за которого ие6-7 рвёт, как тузик тряпку.
кроме того, отстутствие таблиц также радует
есть обновление:) сегодня сделал так: таблица с тдшками шириною в 1 пикс, в которых пункты первого уровня и с тдшками-разделителями. в тдшках с пунктами лежит див с position:relative, внутри него — выпадающий второй уровень. через яваскрипт считаю ширину всех тдшек-разделителей и половину этой ширины вычитаю из левой координаты второго уровня. кроме того, внутри дива с position:relative лежит ещё блок шириной равной ширине родителя (это ширина ссылки), который закрашен (как выделенный пункт) и ложится под ссылку первого уровня. тем же яваскриптом расширяю этот блок на половину тдешки-разделителя. приложенный пример не работает в ие6, т.к. не хотелось использовать для выпадения менюхи яваскрипт, а использовано th:hover
638_123zip.zip