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

фрейм

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

menu

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

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

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

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

crop

Когда все пункты вырезаны, принимаемся писать 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>

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

menu11

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

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

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

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

menu2

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

Для этого ссылкам в состоянии “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;
}

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


Скачать видео версию урока, по нестандартным шрифтам в меню.

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Сергей

    Хотелось бы увидеть тоже самое тока не в табличной а div верстке.

  2. Андрей

    Спасибо, полезная статья — очень пригодилось!!!

  3. Сергей

    А если в коде HTML прописать ссылку на шрифт и расположить его вместе с CSS в папке сайта, разве браузеры его не увидят?

  4. Сергей

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree