Горизонтальное меню для сайта на всю ширину – Горизонтальное меню для сайта. Создание горизонтального анимированного меню с фиксированной позицией на странице средствами CSS и jQuery — Вебджем.рф

Содержание

Горизонтальное резиновое меню | 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;
}

Источник

Горизонтальное меню, шириной на всю страницу без таблиц | Создание и разработка сайтов

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 и нажми «Мне нравится»!

меню на всю ширину блока

Я думаю каждый веб-разработчик не раз сталкивался с необходимостью создания динамического меню на всю ширину какого-либо определенного блока. Сделаем это БЕЗ использования таблиц.

Меню должно растягиваться на всю ширину блока;
При добавлении новых пунктов, меню должно расширятся и при этом вписываться в ширину блока-родителя;

Кроссбраузерность;
Распределение ширины пунктов в меню по подобию таблиц.

некий блок <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

# Уважаемые бойцы с кодом!
# Лень отвечать на комментарии.

виды горизонтальных панелей навигации / Habr

Предисловие: работая верстальщиком, ваш покорный слуга заметил, что существует несколько типов меню; при этом для верстки каждого из них следует использовать свои приемы.
Подробности — под катом.

Данная статья нацелена скорее на начинающих верстальщиков, но, может быть, матерые профессионалы тоже найдут в ней что-то новое или будут обращаться к ней как к справочнику.
Топик структурирован следующим образом: сначала ставится задача — описывается вид требуемого навигационного блока, затем рассматриваются приемы, позволяющие создать именно такую навигацию.
Подразумевается, что написание стилей ведется под семантически корректную структуру меню, которая выглядит примерно так:

Домой Сделать заказ Обратная связь

При верстке под doctype, отличный от html5, элемент nav опускаем или заменяем на соответствующий div.

Что ж, начнем!..

Пункты меню, расположенные по правой/левой стороне

В данном разделе рассмотрены навигационные блоки, в которых элементы размещены по правой/левой стороне. Для верстки таких блоков, в зависимости от ситуации, можно использовать несколько способов:

display: inline;
float: left/right;
display: inline-block.

Display: inline

Когда применяем
Данный способ целесообразно применять при верстке меню простого вида, в котором элементы представлены в виде отдельных слов, не имея padding’ов и разделены лишь пробелами между ними:

Как делается
У элементов li в CSS нужно установить свойство display: inline. Кстати, это уберет и ненужные в большинстве меню такого вида маркеры, так как они находятся в дополнительных блоках, которые содержатся у элементов с display: list-item, а у inline’ов отсутствуют.
У ul устанавливаем свойство text-align в значение right или left соответсвенно.

Примечания

При использовании этого варианта стоит помнить, что у inline элементов вертикальные margin’ы не учитываются, но горизонтальные работают;
при необходимости верстки pixel perfect, есть вероятность столкновения с проблемой: в разных браузерах ширина пробела между элементами разная. Для решения проблемы расстояние между элементами выставляют margin’ами, а пробелы убирают;
если подчеркивание в ссылках элементов меню сделать нижним border’ом, в современных браузерах можно получить красивое анимированное на :hover меню (JSFiddle).

Float: left/right

Когда применяем
Когда необходимо сделать меню с элементами, имеющими padding’и и/или фиксированную высоту/ширину:
Живой примерТаким способом сверстано верхнее меню Themeforest:

Как делается
Устанавливаем float: left или float:right элементам li. Если нужно убрать маркеры, нужно добавить display: block или list-style: none.

Примечания

Необходимо «очистить» ul, задав ему класс .clearfix или поместив в его конец элемент с clear: both, иначе у ul высота будет равна нулю; о других способах «очистки» float’ов можно прочитать здесь;
пример интересного меню, сверстанного float’ами: html5guy.

Display: inline-block

Когда применяем
Задачи те же, что и при верстке с float. И да, при решении такой задачи inline-block пал в неравном бою. Во-первых, кроссбраузерность такого решения ниже, чем у float’a, а во-вторых, между inline-block’ами, как и между inline-элементами, появляются пробелы, зачастую ненужные. Эти проблемы решаемы, но зачем их создавать?

Как делается
Устанавливаем display: inline-block элементам li. Ну, а для IE7 (если вы его поддерживаете) прописываем *display:inline; *zoom: 1.

Симметричные относительно левой и правой сторон блоки навигации

В данном разделе рассмотрены навигационные блоки, расположенные симметрично. Существует несколько видов таких меню; каждому из них соответствует свой способ верстки:

пункты меню выровнены по центру;
пункты меню равномерно распределены по всей ширине, между элементами имеется промежуток;
пункты меню равномерно распределены по всей ширине, элементы заполняют всю ширину ul.

Пункты меню выровнены по центру

Когда применяем
Меню расположено по центру:

Как делается
В зависимости от вида пунктов меню, устанавливаем display: inline или display: inline-block (если для пунктов меню предусмотрены padding’и задана ширина и/или высота) элементам li. Родителю (ul) устанавливаем text-align: center.

Примечания
Позволю себе повториться: иногда появляется необходимость в том, чтобы убрать пробелы между inline- и inline-block- элементами; несколько способов решения этой задачи можно найти здесь.

Пункты меню равномерно распределены по всей ширине, между элементами имеется промежуток

Когда применяем
Пункты меню равномерно распределены по всей ширине, между отдельными пунктами имеются промежутки:

Живой примерК сожалению, меню такого типа найти не удалось, поэтому здесь — пример с JSFiddle.

Как делается
В зависимости от вида пунктов меню, устанавливаем display: inline или display: inline-block элементам li. Родителю (ul) устанавливаем text-align: justify. Но сразу justify не заработает — нужно переполнить первую строку (если непонятно почему так — запускаем ворд и пытаемся растянуть несколько слов на всю ширину при помощи justify). Поэтому в конец элемента ul добавляем дополнительный элемент с display: inline-block и width: 100%, или, что лучше, псевдо-элемент ::after с такими же характеристиками.

Примечания
Помните, в предыдущих типах меню мы убирали пробелы между элементами со свойством display, установленным в inline и inline-block? Так вот, в этом случае так делать категорически нельзя — браузеру нужны промежутки между пунктами меню. Кстати, если убрать пробелы между некоторыми элементами, можно группировать кнопки (JSFiddle):

Пункты меню равномерно распределены по всей ширине, элементы заполняют всю ширину ul.

Когда применяем
Между пунктами меню нет промежутков, любое количество пунктов меню занимает всю ширину:
Живой примерApple.com:

Пример подобного меню на JSFiddle можно потрогать здесь.

Как делается
При решении данной задачи есть соблазн сверстать меню таблицами; но мы же не собираемся нарушать семантику документа, правда? Поэтому используем display: table-cell для li и display: table для ul; потом задаем ширину для ul
Если нужна поддержка старых браузеров, используем скрипт-полифилл, подменяющий такие блоки на таблицы для IE6 и IE7 или организуем fallback другими способами.

Примечания
При верстке меню данным способом нужно помнить, что нельзя размещать элементы с position: absolute относительно table-cell.

Почему?Дело в том, что в спецификации w3c действие position: relative на table-cell не определено, поэтому в каждом браузере могут наблюдаться свои особенности.
Посмотрите этот пример в разных браузерах (особо пристально смотрим на поведение Mozilla Firefox!).

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

Итог

В статье перечислены основные виды меню и особенности их верстки. Надеюсь, этот материал пригодится вам, спасибо за внимание.

Горизонтальное меню без float / Habr

~~Пост скорее для себя, чем для других.~~
Код и подробности под катом.

<!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" /> <style type="text/css"> * { padding:0; margin:0; border:0; } #content { margin:50px; padding:50px; background:#eee; text-align:center; list-style:none; white-space:nowrap; } #content LI { display:inline-block; margin:0 -2px; vertical-align:top; } #content LI A { display:inline-block; background:#f9f9f9; border:#ccc 1px solid; margin:0 2px 0 0; padding:5px 15px; text-decoration:none; color:#00f; vertical-align:bottom; } #content LI A:hover { color:#f00; background:#fff; } @-moz-document url-prefix() { #content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/ #content LI {margin:0 -2px;} /*For FF*/ #content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/ } </style>  <title>Title</title> </head> <body> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">О вас</a></li> <li><a href="#">О них</a></li> <li><a href="#">Ссылки</a></li> <li><a href="#">Форум</a></li> </ul> </body> </html> * This source code was highlighted with Source Code Highlighter.

Пояснения:

Иногда требуется сделать такое меню, которое и горизонтальное, но при этом находится по центру странички. Как обычно делается горизонтальное меню? А очень просто — при помощи float:left; Но вот отцентрировать такое меню у вас вряд ли получится. (ну ладно, получится; но какой ценой? upd: habrahabr.ru/blogs/css/49756/#comment_1306559)

Многие начнут думать над проблемой и придут к выводу, что нам поможет такое замечательное CSS свойство как display:inline-block! И ведь правда — везде работает! В FF3, Opera 8-9, Safari 3 и даже в IE (если специально для него написать display:inline;)!

Кажется, что проблема решена! Просто и достаточно элегантно! Но… но тут мы посмотрели в FF2 и… всё. Приплыли. Не работает 🙁

Лезем на mozilla.org и ищем что-нибудь такое эдакое, чтобы разделить стили для FF2 и FF3. И ведь находим! Наш помошник — свойство display:-moz-inline-grid;

@-moz-document url-prefix() { #content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/ #content LI {margin:0 -2px;} /*For FF*/ #content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/}

И работает. Вроде бы. Кстати, способ можно пользовать и для картинок: gruzzilkin.110mb.com/nofloat

И еще. Валидацию такой документ не пройдет из-за @-moz-document url-prefix.

UPD: По просьбе gryzzly выкладываю наиболее интересные варианты, предложенные в комментариях: