Резиновое меню

Воскресенье, февраля 22, 2009 18:33

Рубрика CSS

Итак, перед нами стоит следующая задача: создать меню, которое бы тянулось по всей ширине родительского блока. То есть левый пункт меню должен прижиматься к левому краю, а правый к правому. Между пунктами меню должно быть одинаковое расстояние. Вобщем все должно выглядеть как на рисунке ниже.Как же это можно реализовать? Используя отступы между пунктами в процентах или задавая в процентах ширину каждого пункта мы не добъемся желаемого результата. На помощь здесь приходит текстовое выравнивание justify. При таком выравнивании все строки текста в абзаце, за исключением последней, растягиваются по всей ширине блока. Получается, что наша задача заставить растягиваться одну единственную строку текста. Для этого нужно добавить в строку длинный строковый (inline) элемент, который не умещался бы в первой строке и, следовательно, переносился бы на вторую, заставляя тем самым первую (наше меню) растягиваться по всей ширине. В качестве такого элемента можно использовать рисунок или любой строковый элемент с большим значением margin.

HTML

<div class="main-menu">
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">Javascript</a>
    <a href="#">Вебмастеринг</a>
    <img src="blank.gif" width="100%" height="1" alt="" />
</div>

CSS

1
2
3

.main-menu {
  text-align: justify !important;
  }

Кому интересно, можно посмотреть на рабочий пример меню.

UPD: Для того чтобы не разносило пункты меню, состоящие из нескольких слов необходимо вместо пробела использовать символ  .

Вы можете следить за развитием темы при помощи ленты RSS 2.0 .

Метки: CSS, Верстка

16 коммент. к “Резиновое меню”

Юрий пишет:

24 февраля 2009 в 17:34

То что нужно!!! ненадо никаких процентов задавать и без всяких хаков. Элегантно и просто!
Ksail aka Maxim пишет:

18 марта 2009 в 3:14

Спс, очень помогло, пригодилось буквально сегодня же для интернет магазина. Сделаю в блоге заметку
jibster пишет:

26 марта 2009 в 15:31

очень спасибо, сэр!
все гениальное - просто.
blank пишет:

8 апреля 2009 в 11:51

есть проблема - если пункты меню состоят не из одного слова, то все слова растягиваются равномерно.
для firefox решилась добавлением .main-menu a {text-align:center;}. в ie6.0 не помогает..
Dimon пишет:

9 апреля 2009 в 11:42

@blank
Проблему решает использование   вместо обычного пробела
blank пишет:

9 апреля 2009 в 14:54

как все просто. спасибо, очень помогло для cms.
Павел пишет:

29 апреля 2009 в 12:48

Спасибо за решение, очень помогло. Только у меня в Firefox не происходит растяжение меню на весь экран! Есть идеи как это можно исправить?
Dimon пишет:

29 апреля 2009 в 23:20

@Павел, не совсем понял что именно у вас не получается?
Павел пишет:

30 апреля 2009 в 1:58

В браузерах Chrome и EI меню растягивается по всей ширине окна, а в FireFox все пункты прилипают к левому краю окна.
Дмитрий пишет:

2 мая 2009 в 5:14

Спасибо за отличное решение наболевшей проблемы
Anstak пишет:

10 мая 2009 в 22:45

Нифига себе 0_o. Никогда о таком не думал. Всю жизнь верстал следующим образом: UL, в нем допустим 5 элементов (LI), всем задается float:left. и по 20% ширины. Но из за IE, приходится давать последнему элементу 18% или 19%. Спасибо, при случае обязательно попробую! Складываю в багаж знаний.
German пишет:

4 июня 2009 в 9:27

полезно почитать спасибо.
dwork пишет:

4 июня 2009 в 16:57

Не понял чего все так радуются Активную область с ховером тут не сделаешь красиво, чтоб растягивалась..
Dimon пишет:

4 июня 2009 в 17:56

@dwork, ну так предложите свой вариант. Никто ж не против
White пишет:

13 июня 2009 в 4:39

@Павел , косяк в Файрфоксе возникает если графический файл используемый как инлайн не существует.
Dmitry Starkoff пишет:

31 августа 2010 в 13:45

@Dimon, еще желательно добавить для .main-menu cursor:default; т.к. промеж пунктов будет курсор “text”. Хороший способ, спасибо)

Блог вебмастера