Красивое горизонтальное меню на всю ширину

Добрый день!

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

Сегодня я бы хотел вам показать, как создавать именно такое меню.

Итак, наше меню будет следующим:

 

Оно растянуто на всю ширину, при наведении — выделяется. По бокам меню закруглено.

Начнем!

 

HTML РАЗМЕТКА

<table class="menu_container">
    <tr>
        <!-- первый пункт меню -->
        <td>
            <div class="first_point_menu">
                <div class="borderLeftSecond"></div>
                <div class="borderRightSecond"></div>
                <a href="#">
                    <table class="inner_table_menu">
                        <tr>
                            <td class="inner_table_img">
                                <img src="img/item.png" width="30px" height="30px">
                            </td>
                            <td class="inner_table_title">
                                Главная
                            </td>
                        </tr>
                    </table>
                </a>
            </div>
        </td>

        <!-- промежуточный пункт меню -->
        <td>
            <div class="middle_point_menu active">
                <div class="borderLeftSecond"></div>
                <div class="borderRightSecond"></div>
                <a href="#">
                    <table class="inner_table_menu">
                        <tr>
                            <td class="inner_table_img">
                                <img src="img/item.png" width="30px" height="30px">
                            </td>
                            <td class="inner_table_title">
                                Интересные новости
                            </td>
                        </tr>
                    </table>
                </a>
            </div>
        </td>

        ... <!-- еще пункты меню -->

        <!-- последний пункт меню -->
        <td>
            <div class="last_point_menu">
                <div class="borderLeftSecond"></div>
                <div class="borderRightSecond"></div>
                <a href="#">
                    <table class="inner_table_menu">
                        <tr>
                            <td class="inner_table_img">
                                <img src="img/item.png" width="30px" height="30px">
                            </td>
                            <td class="inner_table_title">
                                Еще один пункт меню!
                            </td>
                        </tr>
                    </table>
                </a>
            </div>
        </td>
    </tr>
</table>

Чтобы сделать меню на всю ширину, я использовал таблицы со 100% шириной. В каждой таблице есть div контейнер пункта меню. В зависимости от того первый, последний или промежуточный пункт меню — div-у присваивается соответствующий класс.

В каждом div контейнере есть 2 боковых бордера с абсолютным позиционированием, которые нужны для корректного отображения. Если использовать стандартные бордеры, то при переключении пунктов меню, текст будет скакать на 1-2 пикселя, что ни есть хорошо.

Класс active отвечает за выбранный пункт меню и выделяет его.

В каждом пункт у нас есть картинка и текст. Чтобы все это выравнивалось строго посередине по вертикали мы используем таблицу. Благодаря свойству вертикального выравнивания наши пункты меню всегда будут ровно отображаться и не уедут.

 

CSS ПРАВИЛА

Сначала зададим стили для общего отображения меню:

.menu_container {
    padding-top: 40px;
    width: 100%;
    height: 47px;
    border-spacing: 0px;
}
.menu_container td {
    vertical-align: middle; /* вертикальное выравнивание */
}

.last_point_menu, .first_point_menu, .middle_point_menu
{
    width: 100%;
    height: 47px;
    border: 1px solid #dadbda;
    z-index: 1000;
    position: relative;
    border-left: none;
}

.inner_table {
    width: 100%;
    height: 100%;
}
.inner_table td {
    padding: 0px;
    vertical-align: middle;
    border: none;
    text-align: left;
    width: 150px;
    padding-left: 4px;
}
.td.inner_table_title {
    padding-top: 4px;
    font-weight: bold;
}
.td.inner_table_img {
    width: 40px!important;
}
.inner_table_menu {
    height: 100%;
    padding: 0px;
    vertical-align: middle;
    border: none;
    text-align: left;
}
.inner_table_title {
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
    line-height: 13px;
}
.inner_table_menu td.inner_table_img {
    width: 30px!important;
    height: 30px!important;
    padding-left: 15px;
}

Для красоты округлим уголки по бокам меню:

.first_point_menu {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 1px solid #dadbda;
}
.last_point_menu {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

Теперь наше меню приобрело более красивый вид:

 

Пока что у первого пункта нет левого бордера. Его мы исправим несколько позже.

А сейчас давайте добавим для меню эффекты при наведении.

.middle_point_menu:hover,
.last_point_menu:hover,
.first_point_menu:hover,
.middle_point_menu.active,
.last_point_menu.active,
.first_point_menu.active,
.middle_point_menu.active {
    background-color: #CAE285;
    background-image: -moz-linear-gradient(top, #CAE285, #9FCB56);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56));
    background-image: -webkit-linear-gradient(top, #CAE285, #9FCB56);
    background-image: -o-linear-gradient(top, #CAE285, #9FCB56);
    background-image: linear-gradient(to bottom, #CAE285, #9FCB56);
    border: 1px solid #9FCB56;
    border-color: #aec671 #9fbb62 #87ac4a;
    border-left: none;
    z-index: 5000;
}
/* проработает бордеры при наведении*/
.first_point_menu {
    border: 1px solid #dadbda;
}
.first_point_menu:hover, .first_point_menu.active {
    border: 1px solid #9FCB56;
    border-color: #aec671 #9fbb62 #87ac4a;
}
.last_point_menu {
    border: 1px solid #dadbda;
    border-left: none;
}
.last_point_menu:hover {
    border: 1px solid #9FCB56;
    border-left: none;
    border-color: #aec671 #9fbb62 #87ac4a;
}
.last_point_menu.active {
    border-left: none;
}

 

 

Теперь наше меню выглядит намного приятней, но пока у нас нет бордеров у выделенных пунктов меню. Давайте это исправим!

/* стили для боковых бордеров */
.borderLeftSecond, .borderRightSecond
{
    display: none;
    position: absolute;
    width: 1px;
    height: 47px;
    background-color: #9fbb62;
    top: 0px;
    z-index: 1000;
}

/* абсолютные смещения для бордеров */
.borderLeftSecond {
    left: 0px;
}
.borderRightSecond {
    right: -1px;
}

/* у активного и наведенного показываем бордеры */
.active .borderLeftSecond,
.active .borderRightSecond,
.middle_point_menu:hover > .borderLeftSecond,
.middle_point_menu:hover > .borderRightSecond,
.last_point_menu:hover > .borderLeftSecond
.first_point_menu:hover > .borderRightSecond
{
    display: block;
}

/* обрабатываем случаи первого и последнего пункта*/
.first_point_menu.active .borderLeftSecond {
    display: none;
}
.last_point_menu.active .borderRightSecond {
    display: none;
}
.last_point_menu:hover .borderLeftSecond {
    display: block;
}

Вот и все!

У нас получилось отличное меню растянутое на всю ширину родительского блока! Пункты друг на друга при наведении мыши не наезжают и верстка не скачет.

 

Спасибо за внимание!

Автор статьи: Alex. Категория: HTML
Дата публикации: 13.03.2013
Ищем авторов!
Интернет-магазин редких игрушек из мира Minecraft
[subscribe2]