К тому же, с возможностью добавлять/убирать пункты, резиновое.
Делимся методиками…

Оценить:|
  
Комментировать
Раздел: CSS    
Просмотров: 3995
Комментариев (9)
  1. Greg
    Григорий Кочнев [Greg]
    19.08.2011 в 14:24

    Таблицей =)

  2. Greg
    Григорий Кочнев [Greg]
    20.08.2011 в 00:03

    Легко :)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://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>
  3. Deff
    Андрей Данилов [Deff]
    20.08.2011 в 00:11

    класс!!! сам таким пользуюсь. только: как подсветить вместе с пунктом и половину соседних разделителей? и как сделать выпадающее меню с НЕЗАДАННОЙ шириной (ИЕ7 считает ширину детей, равной 1пикс)? и как задать ширину разделителей перед первым пунктом и после последнего (обычно она вполовину меньше, чем остальные)?

    • Greg
      Григорий Кочнев [Greg]
      20.08.2011 в 00:30

      Не ну это уже коцмас какой-то )). Даже не знаю, что и ответить, попробую так:
      1. >как подсветить вместе с пунктом и половину соседних разделителей
      Средствами ЦСС/ХТМЛя — думаю никак. Возможно как-то скриптами высчитывать ширину, потом выносить через минусовые маргины в разные стороны блок. Это только в теории, в скриптах я не силен.

      2. >как сделать выпадающее меню с НЕЗАДАННОЙ шириной (ИЕ7 считает ширину детей, равной 1пикс)?
      Пусть контент сам тянет ширину, чтоб не было переносов на новую строку используй свойство white-space:nowrap;

      3. >как задать ширину разделителей перед первым пунктом и после последнего (обычно она вполовину меньше, чем остальные)?

      Прописать классы и задать ширину ручками. Либо фиксированные отступы без %.

      • Deff
        Андрей Данилов [Deff]
        20.08.2011 в 00:42

        1. ну я ж о том же — через анус. http://www.woodenlife.ru/ — геморроя было на неделю!

        2. контент-то переноситься не будет. только, если юзер сделает подраздел на сайте с названием в 30 слов — будет по-уродски. бывает nowrap вылазит боком. кроме того, грабли в том, что ие6-7 будет считать ширину по минимуму и фон под ПОДпунктами будет прилипать к правым краям контента

        3. речь же о hi-end-вёрстке. куда ж тут гвоздями-то бить? пустые < t d > не всегда отображаются, иногда схлопываются. я в них пишу & n b s p ; так вот для случая, когда нужна ширина вполовину меньше, я пишу ОДИН пробел, в остальные дивайдеры — под ДВА.
        http://www.woodenlife.ru/ — тут же, кстати, перед первым пунктом и после последнего — полноразмерные отступы. что они мне напоминают — даже боюсь сказать

  4. SelenIT
    SelenIT
    22.08.2011 в 20:30

    Есть варианты на базе inline-block для пунктов плюс text-align: justify для контейнера. Правда, проблему «подсветки половины отступов» он тоже слету решает не совсем кроссбраузерно… хотя много ли сейчас того IE7 осталось? :)

    • Deff
      Андрей Данилов [Deff]
      24.08.2011 в 00:17

      +1000
      да хрен с ней, с той подстветкой. главное, что нет явного указания ширины в 1 пикс, из-за которого ие6-7 рвёт, как тузик тряпку.
      кроме того, отстутствие таблиц также радует

  5. Deff
    Андрей Данилов [Deff]
    02.05.2012 в 00:09

    есть обновление:) сегодня сделал так: таблица с тдшками шириною в 1 пикс, в которых пункты первого уровня и с тдшками-разделителями. в тдшках с пунктами лежит див с position:relative, внутри него — выпадающий второй уровень. через яваскрипт считаю ширину всех тдшек-разделителей и половину этой ширины вычитаю из левой координаты второго уровня. кроме того, внутри дива с position:relative лежит ещё блок шириной равной ширине родителя (это ширина ссылки), который закрашен (как выделенный пункт) и ложится под ссылку первого уровня. тем же яваскриптом расширяю этот блок на половину тдешки-разделителя. приложенный пример не работает в ие6, т.к. не хотелось использовать для выпадения менюхи яваскрипт, а использовано th:hover

Оставить комментарий