Всем привет. В данном уроке, мы научимся создавать меню с нестандартным шрифтом, как представлено на картинке ниже.
В общем-то, сложности в создании такого меню нет. Но здесь используются нестандартные шрифты, которые браузер отобразить не может. Про то, как добиться отображения именно таких шрифтов, которые вы сами (или дизайнер) указали в макете, читайте далее.
Кстати, к данному уроку прилагается видео версия. Так что если лень читать
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Большой хитрости для создания такого меню не нужно. Пункты меню вырезаем в фотошопе и сохраняем как обычные картинки.
Когда все пункты вырезаны, принимаемся писать html код.
Меню будет состоять из таблички с одной строкой и четырьмя столбцами. И сразу задаем класс для нашей таблицы menu.
|
1 2 3 4 5 6 7 8 |
<table class="menu" border="0" cellspacing="0" cellpadding="0"> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> |
Затем в каждую ячейку таблицы ставим вырезанные картинки (я для примера взял одну картинку) и делаем их ссылками.
|
1 2 3 4 5 6 7 8 |
<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, и зададим фоновый цвет.
Наш класс будет выглядеть так:
|
1 2 3 4 5 6 |
.menu{ background:#960603; margin:0 auto; } .menu td{ padding:10px 20px; } |
А в браузере мы увидим следующее:
Остается нам сделать так, чтобы по наведению курсора мыши, ссылки становились подчеркнутыми.
Для этого ссылкам в состоянии “hover” назначаем нижнюю границу толщиной 1px и цветом равным цвету текста на картинках.
|
1 2 3 4 5 6 7 8 9 |
.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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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 и цветом равным цвету фона.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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; } |
Теперь у нас есть готовое меню, в котором используются нестандартные красивые шрифты. Ссылки данного меню ведут себя как ссылки (по наведению подчеркиваются) несмотря на то, что это не текстовые ссылки, а картинки.
Скачать видео версию урока, по нестандартным шрифтам в меню.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Автор: Бернацкий Андрей.
Комментарии (4)