Добрый день!
Часто бывает нужно сделать горизонтальное меню, которое будет растягиваться на всю ширину родительского блока независимого от того, сколько пунктов в нем содержится.
Сегодня я бы хотел вам показать, как создавать именно такое меню.
Итак, наше меню будет следующим:
Оно растянуто на всю ширину, при наведении — выделяется. По бокам меню закруглено.
Начнем!
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;
}
Вот и все!
У нас получилось отличное меню растянутое на всю ширину родительского блока! Пункты друг на друга при наведении мыши не наезжают и верстка не скачет.
Спасибо за внимание!
