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

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

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

Задачи:
Имеем:

Ничего сложного!

Шаг 1:
создадим контейнер
<nav class="menu">
    <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>
Шаг 2:
Обрати внимание на css, мы иммитируем таблицу
.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>, например:

HTML:
<nav class="menu">
    <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>
CSS:
.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
HTML, CSS


Авторизация
Зайди на сайт с помощью соц. сети: