Как создать горизонтальное меню, растягиавающееся на всю ширину?

Подскажите пожалуйста, как сверстать горизонтальное меню, используя списки, которое тянется равномерно на всю ширину. При этом меню формируется динамически, то есть мы не знаем сколько пунктов будет иметь данное меню. Вопрос болезненный думаю, что многие с данной проблемой сталкивались. Достойного решения я пока не нашел.
  • +2
  • 15 октября 2009, 11:01
  • lunatik

Комментарии (12)

RSS свернуть / развернуть
+
-1
мучился то же с этим вопросом на проекте пришлось гвоздями прибивать некоторые косяки.

точка отсчета была такая у меня


<html>
<head>
<title>test</title>
<style type="text/css">
*
{
padding:0;
margin:0;
}
body{margin:0;padding:0;}
div{}


.menu ul {width:100%;display:table;margin:0;padding:0;}
.menu ul li {background-color:red; 
display:table-cell;margin:0;padding:0;list-style:none;text-align:center;border-left: 2px solid #fff; //float:left;width:expression(Math.round(100/this.parentNode.getElementsByTagName('li').length)-0.3+'%');}


</style>

</head>
<body>
<div>Список из 5 пунктов</div>
<div class="menu"><ul>
  <li>текст 1</li><li>текст 1</li><li>текст 1</li><li>текст 1</li>
  <li>текст 2</li> <li>текст 2</li> <li>текст 2</li>
  <li>текст 3</li>
  <li>текст 4</li>
  <li>текст 5</li>
</ul>
<div>Список из 3 пунктов</div>
<ul>
  <li>текст 1</li>
  <li>текст 2</li>
  <li>текст 3</li>
</ul></div>
</body>
</html>
avatar

Dopler

  • 15 октября 2009, 11:14
+
-1
мучился то же с этим вопросом на проекте пришлось гвоздями прибивать некоторые косяки.

точка отсчета была такая у меня


<html>
<head>
<title>test</title>
<style type="text/css">
*
{
padding:0;
margin:0;
}
body{margin:0;padding:0;}

.menu ul {width:100%;display:table;margin:0;padding:0;}
.menu ul li {background-color:red; 
display:table-cell;margin:0;padding:0;list-style:none;text-align:center;border-left: 2px solid #fff; //float:left;width:expression(Math.round(100/this.parentNode.getElementsByTagName('li').length)-0.3+'%');}


</style>

</head>
<body>
<div>Список из 5 пунктов</div>
<div class="menu"><ul>
  <li>текст 1</li><li>текст 1</li><li>текст 1</li><li>текст 1</li>
  <li>текст 2</li> <li>текст 2</li> <li>текст 2</li>
  <li>текст 3</li>
  <li>текст 4</li>
  <li>текст 5</li>
</ul>
<div>Список из 3 пунктов</div>
<ul>
  <li>текст 1</li>
  <li>текст 2</li>
  <li>текст 3</li>
</ul></div>
</body>
</html>
avatar

Dopler

  • 15 октября 2009, 11:15
+
0
В IE6-7 «display:table» и «display:table-cell» не поддерживаются. Как решал эту проблему?
avatar

Neolot

  • 15 октября 2009, 11:28
  • ↑
+
+1
expression там есть как бы

работает в IE5.5-8
avatar

Dopler

  • 15 октября 2009, 12:59
  • ↑
+
-2
Я в свое время тупо сверстал таблицей. Это вполне реально можно сделать и для динамического меню.
На списках нормально не получится, потому что
    блочный элемент, а значит должен иметь ширину для центровки.
avatar

Neolot

  • 15 октября 2009, 11:31
+
-1
идея такова:
ul width 100%
li margin o auto
avatar

farik

  • 15 октября 2009, 17:42
+
+2
O_o омг
пример в студю.
avatar

Dopler

  • 15 октября 2009, 18:11
  • ↑
+
+1
Даже не знаю можно ли тут помочь, всё что я мог бы сделать, так это отцентрировать меню по центру, и что бы оно всегда центрировалось в зависимости от того сколько списков меню, и можно сделать что бы текст в элементе «li» тоже центрировался, но при этом надо знать сколько конкретно элементов «li» будет (то есть списков меню), и при этом просто задать ширину «li» в "%" (процентах). Другой способ центрирования мне к сожалению не известен. Возможно это реально сделать только таблицей, как описал выше Neolot… Но я практически убежден что нет ничего невозможного, и поэтому буду следить за развитием данной темы, уж очень интересный вопрос задал автор…
avatar

AlexandeR

  • 15 октября 2009, 18:56
+
0
а это?
avatar

Dopler

  • 15 октября 2009, 19:45
  • ↑
+
+1
Да, это действительно выход из ситуации… Но всё таки Вы используете такое CSS свойство как display:table, и display:table-cell. То есть по сути делаете таблицами :) Хотя HTML код при этом выглядит не плохо :) И интересно подойдёт ли этот способ если меню имеет не просто бэкграунд, а скажем имеет какой то узор, и при этом должно тянуться… В общем по свободе попробую поиграться с кодом, но всё таки то что Вы предложили это уже выход, могу сказать только одно — молодец ;)
avatar

AlexandeR

  • 16 октября 2009, 17:24
  • ↑
+
0
у меня меню с бэкграундами (градиетн правда), с навешанным hover эффектом. спасибо.
и спасибо гуглу )
avatar

Dopler

  • 18 октября 2009, 00:45
  • ↑
+
0
Спасибо ЗА ПОМОЩЬ. Решение красивое. Еще раз спасибо!
avatar

lunatik

  • 18 октября 2009, 11:59

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.