Резиновое горизонтальное меню

Zernike · June 9, 2009

Есть горизонтальное меню:

<div id="hor_menu">
		<ul>
			   <li><a href="#"><span>Статьи</span></a></li>
			   <li><a href="#"><span>Контакты</span></a></li>
			   <li><a href="#"><span>О компании</span></a></li>
			   <li><a href="#"><span>Портфолио</span></a></li>
			   <li><a href="#"><span>Услуги</span></a></li>
			   <li class="active"><a href="#"><span>Главная</span></a></li>
		</ul>
</div>

Див резиновый.

Как растянуть пункты меню на всю ширину дива?

Вариант с таблицами не расматривается. Интерес не только практический, но и академический.

psywalker · June 9, 2009

Как вариант, можно даже без div

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0; list-style: none;}
li { float: left; width: 16%; text-align: center;}
</style>
</head>
<body>
<div id="hor_menu">
<ul>
<li><a href="#"><span>Статьи</span></a></li>
<li><a href="#"><span>Контакты</span></a></li>
<li><a href="#"><span>О компании</span></a></li>
<li><a href="#"><span>Портфолио</span></a></li>
<li><a href="#"><span>Услуги</span></a></li>
<li class="active"><a href="#"><span>Главная</span></a></li>
</ul>
</div>
</body>
</html>

Edited June 9, 2009 by psywalker

Zernike · June 9, 2009

В том и заковырка, что таким образом меню тянется не на всю ширину. Только на 96%.

sandro-css · June 9, 2009

А чем так таблицы не по душе в данной ситуации? По-моему тут она как раз и нужна.

Можешь конечно поставить width:16.6% или сделать 4 <li> и поставить width:25% им :lol:

Zernike · June 9, 2009

Вопрос больше образовательный (хотя бывают и клинические случаи, может понадобится на практике).

Opera отказывается понимать дробное значение процентов.

psywalker · June 9, 2009

Zernike

На самом деле sandro-css абсолютно прав, вот в этой ситуации подходят именно таблицы, потому что выполнить задачу, что-бы все пункты были одинаковыми по ширине, при этом везде смотрелись одинаково, и при сужении ничего не разваливалось, подходят именно они - таблицы, так как у них преимущество, они железные и иногда я например в своих проектах жертвую семантикой ради надёжности :lol:

Zernike · June 9, 2009

Я не отрицаю вариант с таблицей. Но интересно существует ли решение без них.

psywalker · June 9, 2009

я предлагаю всёже сделать так ul li { float: left; width: 16.6%; text-align: center;} и пожертвовать оперой, всёже эта ситуация не разрушит там вёрстку, да и опера не заменит все остальные браузеры, их больше, а она одна всё-таки...

Zernike · June 9, 2009

1) оперой жертвовать с учетом ее рейтинга в снг несколько странно

2) если количество пунктов изменится, клиенты будут пинать меня, что не есть хорошо

psywalker · June 9, 2009

Zernike

а вот что-бы количество пунктов изменялось и ещё в опере было всё хорошо, тут уже таблицы вам в помощь и точка. :lol:

s0rr0w · June 9, 2009

Таблицы рулят в таких случаях :lol:

sandro-css · June 9, 2009

Правильно, если количество пунктов изменится, то нужна таблица, без неё в этом случае никак.

Есть вообще определенные вещи, которые лучше и правильнее будет сделать при помощи таблиц, как вот в данной ситуации например.

Edited June 9, 2009 by sandro-css

vaza18 · September 3, 2012

Есть горизонтальное меню:
<div id="hor_menu">
		<ul>
			   <li><a href="#"><span>Статьи</span></a></li>
			   <li><a href="#"><span>Контакты</span></a></li>
			   <li><a href="#"><span>О компании</span></a></li>
			   <li><a href="#"><span>Портфолио</span></a></li>
			   <li><a href="#"><span>Услуги</span></a></li>
			   <li class="active"><a href="#"><span>Главная</span></a></li>
		</ul>
</div>
Див резиновый.
Как растянуть пункты меню на всю ширину дива?
Вариант с таблицами не расматривается. Интерес не только практический, но и академический.

Видел в одном месте, как делают гор.меню суть примерно следующая:

Средствами CSS задаем выравнивание текста в теге ul по ширине. Теги li делаем инлайновыми. Вконце добавляем какую-нибудь фигню, чтобы была по размеру 100%, чтобы перенеслась на следующую строку. Соответственно, предыдущая строка, состоящая из тегов li растянется на всю ширину. Подробностей сейчас не вспомню, если погуглить, то можно нарыть.

При этом html остается прежним, меняется только css, содержимое которого примерно следующее.


ul {
   text-align: justify;
}
ul li {
   display: inline-block;
   list-style: none;
}
ul li:last-of-type:after {
   content: ' ';
   width: 100%;
   height: 0;
   overflow: hidden;
}

SelenIT · September 3, 2012

Можно особо и не гуглить, у нас всё рядом

Ну и, конечно, не ul li:last-of-type:after, а просто ul:after — нам ведь нужна распорка не внутри последнего пункта (после его содержимого), а после него, в конце самого контейнера...

hedgehog · September 3, 2012

У меня была необходимость сделать меню, пункты которого имеют произвольную ширину и растягиваются на все содержимое родителя, т.е. банальная таблица. Обошелся display:table/table-row/table-cell. Если ие7 не нужен, то почему бы и нет. Структура - все те же a внутри li.

SelenIT · September 3, 2012

А table-row кто?

hedgehog · September 3, 2012

А table-row кто?

ul - table-row

блок, в котором лежит менюшка - table

SelenIT · September 3, 2012

Ясно. Вообще современные браузеры, AFAIK, без явного table-row вполне обходятся — это у всяких FF1/Op.7.5 были проблемы...

hedgehog · September 3, 2012

Ясно. Вообще современные браузеры, AFAIK, без явного table-row вполне обходятся — это у всяких FF1/Op.7.5 были проблемы...

Да, table-row у меня уже на автомате Достаточно display:table;width:100% для ul (чтобы растянуть таблицу на ширину родителя) и table-cell для li.

eleonore · April 28, 2013

Ясно. Вообще современные браузеры, AFAIK, без явного table-row вполне обходятся — это у всяких FF1/Op.7.5 были проблемы...
Да, table-row у меня уже на автомате Достаточно display:table;width:100% для ul (чтобы растянуть таблицу на ширину родителя) и table-cell для li.

Все бы хорошо,ваш совет и мне очень помог,НО! Скажите,а что делать,если в некоторых пунктах меню два слова,а в некоторых одно??"Двухсловесные" пункты при изменении размеров браузера скачут очень не красиво.

При разрешении от 1024 и больше все хорошо:http://s41.radikal.ru/i093/1304/0c/119dc3cb1c98.jpg

Когда сужается меньше 1024px происходит следующее: http://s018.radikal.ru/i508/1304/fd/df2c078a8d48.jpg

Задала white-space:nowrap для li, помогло,слова перестали уходить друг под друга.

Но теперь при сужении окна появляется огромная полоса прокрутки: http://s017.radikal.ru/i425/1304/1d/d8b2ac1a4496.jpg

Как сделать так,чтобы меню плавно сужалось и расширялось в зависимости от разрешения??

html:

<nav>

<li><a href="#">SEARCH AIRPLANES</a></li>

<li><a href="#">RESTORATION</a></li>

<li><a href="#">MAINTENANCE</a></li>

<li><a href="#">EXHIBITIONS & AIRSHOW</a></li>

<li><a href="#">CONTACTS AND FEEDBACK</a></li>

</ul>

</nav>

css:

ul.navigation{

display:table;

width:100%;

}

ul.navigation li{

display:table-cell;

padding:10px;

text-align:center;

white-space:nowrap;

}

Daiver · April 28, 2013

В том и заковырка, что таким образом меню тянется не на всю ширину. Только на 96%.

А если взять


li {
float: left;
width: calc(100%/6);
width: -moz-calc(100%/6); /* Для кроссбраузерности */
text-align: center;}

так будут использованы все 100%

EDIsaev · April 29, 2013

В том и заковырка, что таким образом меню тянется не на всю ширину. Только на 96%.
А если взять
li {
float: left;
width: calc(100%/6);
width: -moz-calc(100%/6); /* Для кроссбраузерности */
text-align: center;}
так будут использованы все 100%

А Вас не смущает, что Opera не знает о calc? источник

Daiver · April 29, 2013

В том и заковырка, что таким образом меню тянется не на всю ширину. Только на 96%.
А если взять
li {
float: left;
width: calc(100%/6);
width: -moz-calc(100%/6); /* Для кроссбраузерности */
text-align: center;}
так будут использованы все 100%
А Вас не смущает, что Opera не знает о calc? источник

Точно. И вообще мало какие ее правильно распознают.

Ну тогда можно прикрутить маленький скрипт, который будет определять ширину экрана и от нее высчитывать ширину каждого пункта.

Sign In

Резиновое горизонтальное меню

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information