Выпуск №15. Нестандартные шрифты в меню.

Всем привет. В данном уроке мы научимся создавать такое меню, как представлено на картинке ниже.

В общем-то, сложности в создании такого меню нет. Но здесь используются нестандартные шрифты, которые браузер отобразить не может. Про то, как добиться отображения именно таких шрифтов, которые вы сами (или дизайнер) указали в макете, читайте далее.

Кстати, к данному уроку прилагается видео версия. Так что если лень читать

Качаем виде версию урока 15.

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

Когда все пункты вырезаны, принимаемся писать html код.

Меню будет состоять из таблички с одной строкой и четырьмя столбцами. И сразу задаем класс для нашей таблицы menu.

<table class="menu" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Затем в каждую ячейку таблицы ставим вырезанные картинки (я для примера взял одну картинку) и делаем их ссылками.

<table class="menu" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#"><img src="images/biografia.jpg" border="0" alt="" /></a></td>
<td><a href="#"><img src="images/biografia.jpg" border="0" alt="" /></a></td>
<td><a href="#"><img src="images/biografia.jpg" border="0" alt="" /></a></td>
<td><a href="#"><img src="images/biografia.jpg" border="0" alt="" /></a></td>
</tr>
</table>

В браузере мы увидим следующую картину.

Меню создано. Остается назначить нужные стили. Какие же стили мы применим? Давайте сделаем ее в центре экрана (хотя необязательно), и сделаем отступы для каждой ячейки сверху и снизу по 10px, а справа и слева по 20px, и зададим фоновый цвет.

Наш класс будет выглядеть так:

.menu{
background:#960603; margin:0 auto;
}
.menu td{
padding:10px 20px;
}

А в браузере мы увидим следующее:

Остается нам сделать так, чтобы по наведению курсора мыши, ссылки становились подчеркнутыми.

Для этого ссылкам в состоянии “hover” назначаем нижнюю границу толщиной 1px и цветом равным цвету текста на картинках.

.menu{
background:#960603; margin:0 auto;
}
.menu td{
padding:10px 20px;
}
.menu a:hover{
border-bottom:1px solid #fec00a;
}

Теперь обратимся к браузерам. В Mozilla – подчеркивающая линия расположена далеко от текста, и высота меню увеличивается (“меню прыгает”). В Opera – подчеркивающая линия расположена далеко от текста, но меню “не прыгает”. Google Chrome – вообще не реагирует на подчеркивание. И только IE отображает так, как хотелось бы.

Выход из ситуации следующий. Добавляем для наших ссылок свойства display со значением block и height равным 14px.

.menu{
background:#960603; margin:0 auto;
}
.menu td{
padding:10px 20px;
}
.menu a{
display:block; height:14px;
}
.menu a:hover{
border-bottom:1px solid #fec00a; display:block; height:14px;
}

Теперь подчеркивание во всех браузерах расположено так, как надо, но эффект “прыгающего” меню остался.

Чтобы исправить этот эффект, добавим нижнюю границу для ссылки в обычном состоянии толщиной в 1px и цветом равным цвету фона.

.menu{
background:#960603; margin:0 auto;
}
.menu td{
padding:10px 20px;
}
.menu a{
display:block; height:14px; border-bottom:1px solid #960603;
}
.menu a:hover{
border-bottom:1px solid #fec00a; display:block; height:14px;
}

Теперь у нас есть готовое меню, в котором используются нестандартные красивые шрифты. Ссылки данного меню ведут себя как ссылки (по наведению подчеркиваются) несмотря на то, что это не текстовые ссылки, а картинки.

Скачать видео версию урока.

Автор: Бернацкий Андрей.

Подписаться

Поделиться

Метки: css, css меню, шрифт