Резиновое меню
Воскресенье, февраля 22, 2009 18:33Итак, перед нами стоит следующая задача: создать меню, которое бы тянулось по всей ширине родительского блока. То есть левый пункт меню должен прижиматься к левому краю, а правый к правому. Между пунктами меню должно быть одинаковое расстояние. Вобщем все должно выглядеть как на рисунке ниже.
Как же это можно реализовать? Используя отступы между пунктами в процентах или задавая в процентах ширину каждого пункта мы не добъемся желаемого результата. На помощь здесь приходит текстовое выравнивание justify. При таком выравнивании все строки текста в абзаце, за исключением последней, растягиваются по всей ширине блока. Получается, что наша задача заставить растягиваться одну единственную строку текста. Для этого нужно добавить в строку длинный строковый (inline) элемент, который не умещался бы в первой строке и, следовательно, переносился бы на вторую, заставляя тем самым первую (наше меню) растягиваться по всей ширине. В качестве такого элемента можно использовать рисунок или любой строковый элемент с большим значением margin.
HTML
1 2 3 4 5 6 7 | <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: Для того чтобы не разносило пункты меню, состоящие из нескольких слов необходимо вместо пробела использовать символ .
Юрий пишет:
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”. Хороший способ, спасибо)
Freesky пишет:
25 ноября 2010 в 14:03
Аллилуйя!
Красивое решение. Спасибо!
Дмитрий пишет:
29 декабря 2010 в 13:08
Довольно интересное решение
Никогда не задумывался о верстке таким способом, обычно табличкой вставлял.
Евгений пишет:
13 января 2011 в 21:19
Взял этот прием за основу и немного “допилил”
Дмитрий пишет:
23 января 2011 в 1:49
а можно как-то в это меню добавить list-style-image?
способ действительно хороший, спасибо за то что поделились им))
Кирилл пишет:
4 апреля 2011 в 15:14
Четвёртая мазила в Вашем примере растягивает пробелы, даже не помогает
Dimon пишет:
4 апреля 2011 в 15:26
Кирилл, можно использовать что-то вроде этого:
Два<i></i>слова
Для тега i задать margin. В общем, проблема решаема
FENIX пишет:
27 апреля 2011 в 16:13
Проблема решаема только в том случае, если список не генерируется динамически из админки, при использовании php или smarty.
FENIX пишет:
27 апреля 2011 в 16:17
Да и первый и последние пункты меню липнут к краям, что не есть хорошо. Особенно если нужен бэкграунд у “а” в виде картинки, а само слово должно центрироваться в этом бг
FENIX пишет:
27 апреля 2011 в 16:21
И ещё один минус, по крайне мере в хроме, если пунктов меню больше чем 5, то при зжатии окна пропадают пункты меню в небытие, мне кажется что всё надежнее и меньше проблем будет реализации с использованием таблицы.
Андрей пишет:
3 января 2012 в 22:58
Железобетонное решение в таблице
http://divhack.com/node/45
Сергей пишет:
2 февраля 2012 в 14:44
В хроме пробелы между словами растягиваются (если пункт состоит из нескольких слов. проблему в Хроме не решает.