Горизонтальное меню, шириной на всю страницу без таблиц | Создание и разработка сайтов
10 апреля 2011 в 21:19 Автор: Nikita_Sp в категории Статьи о CSS 4 комментарияИтак, недавно передо мной стал вопрос, как можно реализовать горизонтальное меню, шириной на всю страницу. В интернете я нашел только один ответ — это таблицы. Многих интересовала реализация данной структуры без таблиц. Надеюсь, что этот пост поможет вам.
Горизонтальное меню на всю ширину сайта без таблиц
Вот css, из него можете по удалять мои стили оформления и оставить только каркас:
* {
margin:0;
padding:0;
}
#flowtabs {
/* dimensions */
width:100%;
margin:0 !important;
padding:0;
position:relative;
top:-3px;
/* IE6 specific branch (prefixed with "_") */
_margin-bottom:-2px;
}
/* single tab */
#flowtabs li {
float:left;
margin:0;
padding:0;
text-indent:0;
list-style-type:none;
width:20%;
}
/* a- tag inside single tab */
#flowtabs li a {
position:relative;
right:5px;
display:block;
height: 31px;
width: 100%;
padding:0px;
margin:0px;
/* font decoration */
color:#ffffff;
font-size:16px;
line-height:29px;
height:28px;
text-align:right;
text-decoration:none;
text-transform: uppercase;
}Ну и собственно сам html:
<ul> <li><a href="http://nikita-sp.com.ua/">Пункт 1</a></li> <li><a href="http://создание-сайтов.kharkov.ua/">Пункт 2</a></li> <li><a href="http://nikita-sp.com.ua/works.php">Пункт 3</a></li> <li><a href="http://nikita-sp.com.ua/contacts.php">Пункт 4</a></li> <li><a href="http://создание-сайтов.kharkov.ua/blog/">Пункт 5</a></li> </ul>
menu-100percents-width — Демо
Все! никаких таблиц! Пользуйтесь! 🙂
Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла — поставь +1 и нажми «Мне нравится»!
Горизонтальное резиновое меню | Vavik96
Рассмотрим популярный быстрый способ создания горизонтального резинового меню. Нам не понадобятся фиксированные или процентные размеры пунктов, меню будет тянуться во всю ширину контейнера, в котором оно находится.
See the Pen Горизонтальное резиновое меню by vavik (@vavik96) on CodePen.
В качестве структуры для меню используем обычный список ul с элементами li. Кроме того, вместо ul и li можно использовать обычные блоки div, результат будет такой же.
HTML
<div>
<ul>
<li><a href="#">Main</a>
</li>
<li><a href="#">About company</a>
</li>
<li><a href="#">Development</a>
</li>
<li><a href="#">Products</a>
</li>
<li><a href="#">Store</a>
</li>
<li><a href="#">Contacts</a>
</li>
</ul>
</div>Для того, чтобы меню тянулось на всю ширину страницы, пишем для ul правила display: table; width: 100%, обнуляем все отступы margin и padding. Для пунктов li указываем display: table-cell, а также float: none (в случае если для элементов уже прописано правило float: left, которое не позволит растянуть меню на всю ширину родительского контейнера). Ссылки внутри li объявляются блоками для удобства их дальнейшего «раскрашивания»: ссылка растянется на всю ширину элемента li. Дописываем различные правила для текста, фона и необходимые отступы. Важное замечание: данный способ не будет работать в IE7 и ниже.
CSS
.menu {
display: table;
width: 100%;
margin: 0;
padding: 0;
}
.menu li {
display: table-cell;
float: none;
}
.menu li a {
display: block;
padding: 8px 15px;
background: #2767A0;
font-family: Tahoma;
font-size: 12px;
color: #fff;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
.menu li a:hover {
background: #528CBF;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}Источник
меню на всю ширину блока
Я думаю каждый веб-разработчик не раз сталкивался с необходимостью создания динамического меню на всю ширину какого-либо определенного блока. Сделаем это БЕЗ использования таблиц.
- Меню должно растягиваться на всю ширину блока;
- При добавлении новых пунктов, меню должно расширятся и при этом вписываться в ширину блока-родителя;
- Кроссбраузерность;
- Распределение ширины пунктов в меню по подобию таблиц.
- некий блок <div>, со стилем position:relative; и шириной к примеру 600px
Ничего сложного!
<nav>
<a href="index.html" rel="nofollow">Главная</a>
<a href="products.html" rel="nofollow">Продукция</a>
<a href="about.html" rel="nofollow">О компании</a>
<a href="license.html" rel="nofollow">Условия использования</a>
</nav>
.menu {
display: table; position: relative;
width: 100%; height: 50px;
}
.menu a {
display: table-cell;
text-align: center; vertical-align: middle;
}
Для того чтобы пункты меню не были слишком сплюснутыми ( а таблица иногда так себя и ведет ), можно дописать еще несколько слов в css:
.menu a {
display: table-cell;
text-align: center; vertical-align: middle;
min-width: 100px; /*устанавливаем минимальную ширины ячейки*/
}
Так же легко и непринужденно блеать, можно сделать и многоуровневые меню, с любой вложенностью, для этого тег <a> положим в <ul>, например:
<nav>
<li><a href="index.html" rel="nofollow">Главная</a></li>
<li><a href="products.html" rel="nofollow">Продукция</a>
<ul>
<li><a href="veniki.html" rel="nofollow">Веники</a></li>
<li><a href="hueniki.html" rel="nofollow">Хуеники</a></li>
</ul>
</li>
<li><a href="about.html" rel="nofollow">О компании</a></li>
<li><a href="license.html" rel="nofollow">Условия использования</a></li>
</nav>
.menu {
position: relative; display: table;
width: 100%; height: 50px;
}
.menu li {
display: table-cell; position: relative;
}
.menu li a {
display: block; position: relative;
width: 100%; height: 100%;
text-align:center;
line-height: 50px; /* для того чтобы отцентрировать текст по вертикали */
}
.menu li ul {
display: none; position: absolute;
width: 100%;
margin: 0px; padding: 0px;
border: 2px solid green;
}
.menu li ul li { display: block; }
.menu li:hover ul { display: block; }
See the Pen BKWaYz by serge (@gaserge) on CodePen.
07 марта 2012, 19:24# Уважаемые бойцы с кодом! # Лень отвечать на комментарии.
Горизонтальное меню на всю ширину css
Очень часто возникает задача сделать меню на сайте на всю ширину div’а. Самое простое решение — это сделать фиксированную ширину для каждого пункта, но если в дальнейшем нужно будет добавить еще пункты или текст ссылки будет больше, чем заданная ширина?
В такой ситуации можно обойтись простым css, для этого создаем меню.
И добавляем стили, в которых блок ul будет являться таблицей, а каждый элемент li и a ячейкой данной таблицы.
Нам будет приятно
Еще интересное в блоге
Как избавиться от схлопывания контейнера с float
Как отменить обтекание текстом
Будем рады работать именно с вами
Политика конфиденциальности персональных данных
- Общие положения.
- Настоящая Политика конфиденциальности персональных данных (далее – Политика) действует в отношении всех персональных данных, которую компания Keengo (далее – Компания), может получить от пользователя (лица, заполнившего форму обратной связи, использующего другие сервисы официального сайта keengo.ru (далее – Сайт)), в частности в ходе: отправки отзывов или вопросов, заказа услуг, участия в рекламных и/или маркетинговых кампаниях или акциях и/или ином взаимодействии (далее – Услуги).
- Заполняя форму обратной связи и нажимая кнопку «Согласен/на», расположенную на странице Сайта, на которой размещена форма обратной связи, а равно указывая свои персональные данные при использовании других сервисов Сайта, пользователь выражает согласие с настоящей Политикой и указанными в ней условиями обработки и передачи его персональных данных. Согласие Пользователя на предоставление, обработку и передачу его Персональных данных Компании в соответствии с Политикой является полным и безусловным.
- Посетителям Сайта следует воздержаться от заполнения формы и/или от использования других сервисов Сайта в случае несогласия (полного или частичного) с Политикой, а равно несогласия предоставить персональные данные.
- Согласие, даваемое пользователем, включает в себя согласие на сбор, систематизацию, накопление, хранение, уточнение (обновление, изменение), использование, занесение в базы данных (в том числе электронные) Компании, передачу внутри Компании другим отделам и подразделениям или поставщику услуг, обязующегося выполнять условия договора о защите персональных данных, в целях рассылки информационных материалов и/или в рекламных целях (в том числе рассылку приглашений на мероприятия, проводимые/организованные Компанией), трансграничную передачу, блокирование, обезличивание, уничтожение персональных данных.
- Согласие, даваемое пользователем, распространяется на следующие персональные данные: фамилия, имя, отчество, адрес электронной почты, должность, наименование организации, в которой работает пользователь, контактный телефон.
- Срок действия согласия пользователя является неограниченным, однако, пользователь вправе в любой момент отозвать настоящее согласие путём направления письменного уведомления на адрес электронной почты: [email protected], с пометкой «отзыв согласия на обработку персональных данных».
Keengo · Web Design & Development
© 2010–2019 Все права защищены
HTML:
CSS:
Как пункты меню растянуть по всей ширине блока nav , чтобы padding у всех ссылок был одинаковым (пустого пространства между ссылками быть не должно, это пространство распределяется на внутренние отступы ссылок)?
UPD:
Изображение того, как должно отображаться меню. 
2 ответа 2
Поставить display: flex родителю, flex-basis: auto + flex-grow: 1 — потомкам.
Итак, недавно передо мной стал вопрос, как можно реализовать горизонтальное меню, шириной на всю страницу. В интернете я нашел только один ответ — это таблицы. Многих интересовала реализация данной структуры без таблиц. Надеюсь, что этот пост поможет вам.
Горизонтальное меню на всю ширину сайта без таблиц
Вот css, из него можете по удалять мои стили оформления и оставить только каркас:
Ну и собственно сам html:
Все! никаких таблиц! Пользуйтесь! 🙂
Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла – поставь +1 и нажми «Мне нравится»!
CSS: Меню с выравниванием по ширине блока
просмотров: 1821921 мая 2012 года
Если вам нужно сверстать меню, в котором расстояние между элементами должно быть одинаковое и при этом родительский блок меню имеет автоматическую ширину, то совсем необязательно использовать для этой цели таблицу. Всё оказывается достаточно просто: можно сверстать семантическое меню через UL-LI или любой другой набор элементов (в примере DIV-SPAN). Ключевыми свойствами CSS будут text-align:justify и display:inline-block. Но только лишь этого недостаточно. Выравнивание по ширине в CSS работает по умолчанию для всех строк, исключая последнюю.
Но что если у нас первая и последняя — одна и таже строка? В этом случае есть решение! Для всех современных браузеров (включая IE8), мы создадим псевдоэлемент через :after который будет иметь ширину 100%, тем самым гарантированно будет являтся последней строкой (той самой для которой правило выравнивания не будет действовать). IE6-7 не понимают псевдоэлементов CSS :after и :before, но у них есть специальное свойство, определяющее поведение последней строки при выравнивании текста. И это свойство text-align-last.
<style type="text/css">
.menu {text-align:justify; text-align-last:justify; background:#DFDFDF; list-style-type:none; padding:0;margin:0;}
.menu li {display:inline-block; background:#BBBBBB; padding:5px 10px; cursor:pointer;}
.menu li:hover {background:#FFFFFF;}
.menu:after {content:""; display:inline-block; width:100%; height:0; overflow:hidden;}
</style>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Photo</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contacts</a></li></ul>Спасибо большое автору за статью, очень помогла.
Лидия (13 ноября 2013 года, 14:05:59)да. действительно очень полезная статья. спасибо