Практическая работа 16-17. Создание горизонтального и вертикального динамического меню на веб-странице
Практическая работа 16-17
Создание горизонтального и вертикального динамического меню
Цель:
ü научиться вручную создавать горизонтальное и вертикальное css-меню для сайтов.
План:
ü Теоретические сведения
ü Ход работы
ü Контрольные вопросы
Теоретические сведения
Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы.
Информация о стилях может располагаться либо в отдельном
файле, либо непосредственно в коде Web-странички. Расположение описания стилей
в отдельном файле имеет смысл в случае, если нужно применять эти стили к
большему, чем одна, количеству страниц. Для этого нужно создать обычный
текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот
файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из
этого файла, нужно будет сделать ссылку на него.
<LINK REL=STYLESHEET TYPE=»text/css» rel=»nofollow ugc» target=»_blank» href=»URL»>
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://…») в случае, если файл стилей находится на другом сервере.
Второй вариант, при котором описание стилей располагается в
коде Web-странички, внутри тега <BODY>, в теге <STYLE
type=»text/css»>… </STYLE>. В этом случае вы можете
использовать эти стили для элементов, располагающихся в пределах странички.
Параметр type=»text/css» является обязательным и служит для указания
броузеру использовать CSS.
И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации.
Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:
НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;}
Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML-тега (h2, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже.
Пример:
h2 {font-size: 30pt; color: blue;}
В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.
Также элементы страниц, созданные с использованием CSS,
используют механизм наследования: т.
CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = «имя класса» или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных).
Пример:
.b-с {font-weight: bold; text-align: center} – описание стиля для класса b-с
Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).
<P>Текст параграфа</P>
– параграфу присвоен стиль класса b-с.
<TD CLASS=»b-c»>текст</
Свойства элементов, управляемых с помощью CSS
СВОЙСТВА ШРИФТА
font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
P {font-family: Times New Roman, sans-serif;}
font-weight Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)
h2 {font-size: 200%;}
h3 {font-size: 150px;}
h4 {font-size: 400pt;}
font-
h2 {font-size: 200%;}
h3 {font-size: 150px;}
h4 {font-size: 400pt;}
ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
color Определяет цвет элемента
I {color: yellow;}
background-color Устанавливает
цвет фона для элемента – именно для элемента, а не для странички.
<HTML>
<HEAD>
<TITLE>Пример использования CSS</TITLE>
<STYLE type=”text/css”>
h2 {font-size: 300%;}
</STYLE>
</HEAD>
<BODY bgcolor=white>
<center><BR>
<h2 style=”background-color: teal; color: white;”>Cascading</h2>
<h2 style=”background-color: navy; color: yellow;”>Style</h2>
<h2 style=”background-color: gold; color: brown;”>Sheets</h2>
</BODY></HTML>
В этом примере в разделе <STYLE> всем элементам <Н1> на этой страничке был установлен размер 300 % от нормы. Затем каждому из элементов <h2> были присвоены собственные значения цвета фона и цвета символов.
СВОЙСТВА ТЕКСТА
text-decoration
h5 {text-decoration: underline;}
A {text-decoration: none;}
.
wrong {text-decoration: line-through;}
text-align Определяет выравнивание элемента.
P {text-align: justify}
h2 {text-align: center}
text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
P {text-indent: 50pt;}
line-height
P {line-height: 50 %}
СВОЙСТВА ГРАНИЦ
margin-left Устанавливают значения отступов вокруг элемента.
IMG { margin-right: 20pt}
P { margin-left: 2cm}
margin-right
margin-right
margin-top Устанавливают значения отступов вокруг элемента.
IMG { margin-right: 20pt}
P { margin-left: 2cm}
Откроем наш любимый Web-редактор Notepad (Блокнот) и создадим файл с будущим названием styles.css (название файла может быть любым). Опишем в этом файле стиль параграфа <P>, который будет использоваться на всех страничках нашего сайта:
P {
font-family: Times New Roman, serif;
color: #000000;
margin-left: 15%;
margin-right: 15%;
margin-top: 1pt;
margin-bottom: 1pt;
text-indent: 1cm;
text-align: justify;
}
Для того чтобы «привязать» созданные нами стили к нашим
страничкам, во все html-файлы в разделе <HEAD> мы должны поместить строку
со ссылкой на файл стилей и с указанием об использовании CSS: <LINK REL=STYLESHEET TYPE=»text/css» HREF=»styles.
css»>
Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички, параметр rel=»nofollow ugc» target=»_blank» href=»URL» в нашем случае будет просто именем нашего файла стилей (styles.css).
Пример 1 Классическое CSS-меню
Код HTML:
<title>Создание базового горизонтального
меню для сайта CSS методами</title>
</head>
<body>
<ul
class=»css-menu-1″>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>Главная</a></li>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>HTML уроки</a></li>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>CSS уроки</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»
class=»selected»>CSS меню</a></li>
</ul>
Код на css:
ul.
css-menu-1 {
list-style: none
}
ul.css-menu-1 li {
display: inline
}
ul.css-menu-1 li a {
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
background: #5c6cb7;
font-weight: bold;
color: #ffaa00;
padding: 6px 10px 6px 10px
}
ul.css-menu-1 li a:hover {
padding: 6px 10px 6px 10px;
font-weight: bold;
background: #364d95;
color: #ff9900
}
ul.css-menu-1 li a.selected {
background: #364e95
}
Пример 2 Меню с подсказкой
Код на HTML:
<title>Создание красивого
горизонтального CSS меню для сайта</title>
</head>
<body>
<div
id=»css-menu»>
<ul>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>
<span
class=»text-top»>Главная</span>
<span
class=»text-bottom»>О нашем проекте</span>
</a></li>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>
<span
class=»text-top»>Справочник</span>
<span
class=»text-bottom»>CSS справочник</span>
</a></li>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>
<span
class=»text-top»>CSS уроки</span>
<span
class=»text-bottom»>Для начинающих</span>
</a></li>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>
<span
class=»text-top»>CSS меню</span>
<span>Коллекция
CSS меню</span>
</a></li>
</ul>
</div>
Код на css:
#css-menu ul {
list-style: none;
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
line-height: 1.
4em;
border:2px solid #000000;
border-left: 1px solid #000000;
float: left;
padding: 0;
margin: 12px 0 25px 24px
}
#css-menu ul li {
float: left
}
#css-menu ul li a {
display: block;
text-decoration: none;
background-color: #595959;
padding: 5px 10px 0 10px;
color: #fefefe;
width: 120px;
border-right: 1px solid #797979;
border-left: 1px solid #191919
}
#css-menu ul li a span {
display: block
}
#css-menu ul li a span.text-top {
border-bottom: 1px solid #595959
}
#css-menu ul li a:hover span.text-top {
border-bottom: 1px dashed #fefefe;
color: #ffddbb
}
#css-menu ul li a span.text-bottom {
visibility: hidden;
font-size: 11px;
text-align: right
}
#css-menu ul li a:hover span.text-bottom {
visibility: visible
}
Создание вертикального меню
Вертикальное меню будет
написано на чистом html и CSS.
Смена цвета и дорисовка линий по 1px создают
эффект жалюзи. А дальше экспериментируйте сами и создавайте своё уникальное и
неповторимое вертикальное css меню.
Рисунок 3 — Вертикальное и горизонтальное меню на CSS
Фрагмент html кода:
<table
border=»0″ align=»center» cellpadding=»0″
cellspacing=»0″>
<tr>
<td valign=»top»>
<!— Область вертикального меню —>
<div>
<ul>
<li><a rel=»nofollow ugc» target=»_blank» href=»#1″ title=»Обзорные статьи«>Обзоры</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#2″ title=»Теоретический курс«>Теория</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#3″ title=»Пошаговые инструкции«>Практикум </a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#4″ title=»Справочная информация«>Спроавочники</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#5″ title=»Что предстоит«>Перспективы</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#6″ title=»Новые разработки«>Проекты</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#7″ title=»Письма«>Контакт</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#8″ title=»Об авторе«>Автора</a></li>
</ul>
</div>
<!— Конец области вертикального меню —>
</td>
<td><font>Создать сайт
самостоятельно</font></td>
</tr>
</table>
Область вертикального меню — html файл
<table
border=»0″ align=»center» cellpadding=»0″
cellspacing=»0″>.
Границу в таблице убрали: border=»0″ и отредактировали ширину ячеек таблицы, чтобы меню хорошо сидело.
<td width=»17%» valign=»top»> — область вертикального меню css;
<td width=»83%»> — область контента.
Обратите внимание, что в области вертикального меню css есть параметр valign=»top», который необходим для того, чтобы элементы, находящиеся в нём притягивались кверху, т.е. чтобы меню на css не болталось посередине (принято по умолчанию).
Присваиваем блоку div идентификатор «menu-verticalnoe»: <div> и далее используем маркированный список: теги <ul> <li> <li> … </li> </li> </ul>. Практически всё аналогично построению горизонтального меню css, но здесь вводится параметр <title> в теге ссылки:
<a rel=»nofollow ugc» target=»_blank» href=»#2″ title=»Теоретический курс»>Теория</a>.
Файл каскадных таблиц стилей:
Дописываем в файл
style.
css следующие директивы
/****** Меню Вертикальное CSS *********/
Задаём идентификатор для маркированного списка
#menu-verticalnoe ul {
Задаём отступы
margin: 5px;
padding: 0;
Отменяем использование маркеров в маркированном списке.
list-style: none;
Выбираем какие шрифты будут использоваться.
font-family: verdana, arial, Helvetica;
}
Идентификатор для маркера
#menu-verticalnoe li { margin: 0; }
Работаем с кнопками вертикального меню CSS
#menu-verticalnoe a {
Выбираем блочную структуру отображения элементов.
display: block;
Настраиваем отступы вертикального меню css.
padding: 5px 10px;
Задаём размер ширины кнопки.
width: 115px;
Цвет текста ссылки.
color: #fff;
Цвет кнопки вертикального меню css.
background-color: #683906;
Запрещаем все эффекты с текстом.
text-decoration: none;
Создаём эффект кнопкам вертикального меню css, задавая границы в 1px, непрерывными линиями разных цветов.
border-top: 1px solid #ffffff;
border-bottom: 1px solid #444444;
border-left: 1px solid #ffffff;
border-right: 1px solid #444444;
Задаём жирность начертания.
font-weight: bold;
Размер шрифта.
font-size: 13px;
}
Установки идентификатора для вертикального меню при наведении курсора
#menu-verticalnoe a:hover {
Меняем цвет ссылочного текста.
color: #bbb;
Меняем цвет кнопки.
background-color: #572800;
Снимаем все эффекты.
text-decoration: none;
Формируем визуальный эффект вжатости.
border-top: 1px solid #444444;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #444444;
border-right: 1px solid #ffffff;
}
Ход работы
Задание.
Разработать горизонтальное и вертикальное css-меню,
содержащее не менее 7 пунктов.
Контрольные вопросы
1 В чем отличие панели навигации от динамического меню?
2 В каком блоке располагается динамическое меню?
3 С помощью каких тегов создается маркированный список?
4 Какое свойство CSS позволяют убрать маркеры списка?
5 С помощью каких свойств CSS пункты меню размещаются горизонтально (вертикально)?
Вёрстка типовых элементов веб-страницы
Глава VII
Меню
Под меню понимают набор ссылок, позволяющих переходить к разным разделам или документам сайта. Меню непосредственно связано с навигацией по сайту — системой организации документов и их взаимодействия между собой. Другими словами, навигация дает пользователю представление о структуре сайта и возможность перемещаться к нужной странице. Термин навигация давно уже стал широким понятием и включает в себя не только способ перехода от страницы к странице, но также вид и представление ссылок.
По этой причине к навигации относят элементы страницы, которые имеют к ней косвенное отношение, например меню. Тем не менее это уже связанные понятия и, говоря о навигации по сайту, обычно упоминают и меню, с помощью которого пользователь загружает в окно браузера требуемые веб-страницы.
Правильно организованное меню предоставляет пользователю возможность быстрого доступа к нужным ему разделам, показывает, где он находится в данный момент в структуре сайта и что на нем еще можно посмотреть. С этой целью придерживаются следующих рекомендаций.
Пункт меню, совпадающий с текущей веб-страницей, не делают ссылкой, чтобы не путать посетителя. В самом деле, если имеется ссылка, то появляется желание нажать на нее, в результате чего откроется тот же документ, который мы только что видели. После этого возникает мысль, что если произошла загрузка страницы, то это новый документ, но содержимое говорит о том, что его уже читали. В общем, получается противоречие, которого легко избежать, если просто заменить ссылку обычным текстом.
Число пунктов меню обычно делают не очень большим. В противном случае имеет смысл разбить меню на подменю или организовать объем информации на сайте по-другому.
Ничто не мешает сочетать на сайте различные виды навигации. Например, горизонтальное меню может применяться для доступа к основным разделам сайта, а вертикальное — для его подразделов.
Условно все типы меню можно отнести к следующим категориям.
Вертикальное меню. Пункты меню располагаются друг под другом, и число их может быть достаточно велико. В силу своей универсальности вертикальное меню встречается на сайтах наиболее часто.
Горизонтальное меню. В этом случае пункты помещаются по горизонтали, но чтобы это не привело к появлению горизонтальной полосы прокрутки, их число ограничивают или располагают в два-три ряда.
Ниспадающее меню. Обычно выглядит как горизонтальное меню, но когда курсор мыши наводится на пункты, открывается дополнительное подменю.
Всплывающее меню. При наведении на ссылку курсора мыши или щелчку по ней появляется меню в виде панели с набором вариантов перехода.
Как только курсор уводится прочь со ссылки или с меню, оно пропадает.
Контекстное меню. Открывается при нажатии в окне браузера правой кнопкой мыши. Подобный тип меню уже встроен в браузер по умолчанию, но его можно переназначить с помощью скриптов. Из-за того, что использование меню не является очевидным, оно применяется достаточно редко.
К разновидностям меню также можно отнести различные списки, в том числе раскрывающиеся, и вкладки.
Горизонтальное меню
Горизонтальное меню является одним из распространенных и популярных элементов навигации, используемых на сайтах. Как следует из названия, пункты меню располагаются по горизонтали, как правило, в верхней части страницы. Перечислим следующие особенности, присущие горизонтальному меню:
ширина веб-страницы ограничена разрешением монитора, его размерами, настройками браузера и операционной системы. По этой причине большое количество пунктов меню делать не рекомендуется. Иначе это может привести к появлению горизонтальной полосы прокрутки или стать причиной изменения вида и форматирования меню;
горизонтальное меню располагают в верхней части веб-страницы, чтобы его можно было видеть без прокрутки содержимого.
Иногда горизонтальное меню для удобства пользователей дублируют внизу страницы.
Создание меню с помощью таблиц
Таблицы для создания горизонтального меню обладают некоторыми преимуществами по сравнению со слоями. В частности, ширина ячеек подстраивается под контент, для таблицы можно установить ширину в процентах или пикселах, легко настроить выравнивание внутри ячеек по вертикали и горизонтали. В примере 7.1 показано создание простого меню.
Пример 7.1. Использование таблицы для создания меню |
|
|
|
|
|
|
|
|
|
| |||||
XHTML 1.0 |
| CSS 2.1 |
| IE 7 | IE 8 | IE 9 | Cr 8 | Op 11 | Sa 5 | Fx 3. | |||||
<!DOCTYPE | html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» |
|
|
| |||||||||||
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> |
|
|
| ||||||||||||
<html xmlns=»http://www.w3.org/1999/xhtml»> |
|
|
|
|
|
|
|
|
|
|
|
| |||
<head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>Меню</title> |
|
|
|
|
|
|
|
|
| /> |
|
| |||
<meta | http-equiv=»Content-Type» content=»text/html; charset=utf-8″ |
|
| ||||||||||||
<style | type=»text/css»> |
|
|
|
|
|
|
|
|
|
|
|
| ||
TABLE. |
|
|
|
|
|
|
|
|
|
|
|
| |||
background: #fc0; /* Цвет фона меню */ |
|
|
|
|
|
|
|
|
|
|
|
| |||
width: 100%; /* Ширина меню */ |
|
|
|
|
|
|
|
|
|
|
|
| |||
border: 1px solid black; /* Рамка вокруг таблицы */ |
|
|
| ||||||||||||
}text-align: center; /* Выравнивание текста по центру */ |
|
|
| ||||||||||||
. | TD { |
|
|
|
|
|
|
|
|
|
|
|
| ||
border: | 1px solid white; /* Линия между ячейками */ |
|
|
| |||||||||||
}padding: | 4px /* Поля вокруг текста */ |
|
|
|
|
|
|
|
|
|
|
|
| ||
.menu A { color: #BE1E2D; } |
|
|
|
|
|
|
|
|
|
|
|
| |||
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
</head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table cellspacing=»0″> |
|
|
|
|
|
|
|
|
|
|
|
| |||
<tr> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<td><a href=»link1. |
|
|
| ||||||||||||
<td><a | href=»link2.html»>Крокодил Гена</a></td> |
|
|
| |||||||||||
<td><a | href=»link3.html»>Шапокляк</a></td> |
|
|
| |||||||||||
<td><a | href=»link4.html»>Крыса Лариса</a></td> |
|
|
| |||||||||||
</tr> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</table> |
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
</body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
6
menu {
menu
html»>Чебурашка</a></td>Результат данного примера показан на рис.
7.1.
Рис. 7.1. Горизонтальное меню
При создании горизонтального меню не обойтись без подсвечивания фона ячейки таблицы при наведении на нее курсора мыши. Подобный эффект повышает привлекательность меню и удобство работы с ним (рис. 7.2).
Рис. 7.2. Подсветка ячеек в таблице
Для создания подсветки текста воспользуемся псевдоклассом :hover, который управляет стилем ссылки при наведении на неё курсора мыши. Остаётся только указать желаемый цвет фона с помощью свойства background. Также можно изменить и другие параметры, например цвет текста. Чтобы в качестве ссылки выступала вся ячейка целиком, а не только текст в ней, следует добавить для селектора A свойство display со значением block. В данном случае оно превращает ссылку в блочный элемент, заставляя ее занимать все свободное пространство. На виде текста это никак не отражается, но зато вся ячейка будет ссылкой, что увеличивает её полезную площадь (пример 7.2).
Пример 7.2. Создание подсветки XHTML 1.0 CSS 2.
1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<style type=»text/css»> TABLE.menu {
background: #fc0; /* Цвет фона меню */ width: 100%; /* Ширина меню */
border: 1px solid black; /* Рамка вокруг таблицы */
}text-align: center; /* Выравнивание текста по центру */
.menu TD {
border: 1px solid white; /* Линия между ячейками */
}padding: 4px /* Поля вокруг текста */
.menu A {
color: #BE1E2D; /* Цвет ссылок */ }display: block; /* Блочный элемент */
.menu TD:hover {
}background: #29B473; /* Цвет фона при наведении */
.menu TD:hover A {
color: #FFE; /* Цвет ссылок при наведении */
}text-decoration: none; /* Убираем подчеркивание */
</style>
Код HTML будет таким же, как и в примере 7.1.
Применение маркированного списка
В качестве альтернативы таблице для создания горизонтального меню используется маркированный
список, основанный на комбинации тегов <ul> и <li>. Хотя по умолчанию это скорее вертикальное, а не горизонтальное меню, с помощью стилей ему можно задать желаемый вид.
Начнём с совмещения пунктов меню по горизонтали. Тег <li> блочный, поэтому и начинается всегда с новой строки, поэтому превратим его в строчный элемент через свойство display со значением inline.
.menu LI {
background: #fc0; /* Цвет фона меню */ list-style: none; /* Убираем маркеры */ padding: 4px 10px; /* Поля вокруг текста */
} display: inline; /* Строчный элемент */
На тег <ul> изначально действуют отступы, поэтому их необходимо убрать, чтобы они не влияли на вид отображения меню.
UL.menu {
} margin: 0; padding: 0; /* Отключаем отступы и поля */
Код для создания меню показан в примере 7.3.
Пример 7.3. Использование inline
XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head> <title>Меню</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <style type=»text/css»>
UL.
menu {
}margin: 0; padding: 0; /* Отключаем отступы и поля */
.menu LI {
background: #fc0; /* Цвет фона меню */ list-style: none; /* Убираем маркеры */ padding: 4px 10px; /* Поля вокруг текста */
}display: inline; /* Строчный элемент */
.menu A {
}color: #BE1E2D; /* Цвет ссылок */
</style>
</head>
<body>
<ul>
<li><a href=»link1.html»>Чебурашка</a></li> <li><a href=»link2.html»>Крокодил Гена</a></li> <li><a href=»link3.html»>Шапокляк</a></li> <li><a href=»link4.html»>Крыса Лариса</a></li>
</ul>
</body>
</html>
Для строчных элементов характерна одна особенность — перевод строки воспринимается в качестве пробела, поэтому между пунктами меню наблюдается небольшой промежуток (рис. 7.3).
Рис. 7.3. Вид меню
Прежде чем решить, избавляться от этого промежутка или оставить его, необходимо решить более важные проблемы.
В IE6–7 не действуют вертикальные поля, и нет самого промежутка. Получается, что
меню по своему виду различается от других браузеров (рис. 7.4).
Рис. 7.4. Вид меню в IE6–7
Как бороться с подобными явлениями нам уже известно — добавляем zoom и явно устанавливаем отступ справа. Ну, а чтобы стиль работал только для нужного браузера, используем условные комментарии.
<!—[if lte IE 7]> <style type=»text/css»>
.menu LI {
zoom: 1;
}margin-right: 4px;
</style> <![endif]—>
Со строчными элементами есть ещё один нюанс — при переносе текста на другую строку также переносится фоновый цвет (рис. 7.5).
Рис. 7.5. Перенос текста в меню
Обойти это можно разными путями, например, установить для <li> запрет на перенос текста через white-space: nowrap или включив ограничение ширины всего меню с помощью min-width. Впрочем, ничего не мешает использовать оба метода сразу (пример 7.4).
Пример 7.4. Запрет переноса текста
UL {
}min-width: 400px; /* Ограничиваем ширину меню*/
LI {
}white-space: nowrap; /* Отменяем перенос текста */
Вернёмся к промежутку между строчными элементами.
Он появляется от переноса строки, который считается за пробел. Так что если мы запишем всё в одну строку, это сразу же уберёт все пробелы.
<li><a href=»link1.html»>Чебурашка</a></li><li><a href=»link2.html»>Крокодил Гена</a></li>
Если пунктов меню много, то такую строку становится неудобно редактировать, но можно пойти на хитрость и убрать пробелы с помощью комментариев HTML.
<li><a href=»link1.html»>Чебурашка</a></li><!— —><li><a href=»link2.html»>Крокодил Гена</a></li><!— —><li><a href=»link3.html»>Шапокляк</a></li><!— —><li><a href=»link4.html»>Крыса Лариса</a></li>
Также допустимо воспользоваться стилями и сдвинуть пункты меню за счёт отрицательного значения margin-right.
.menu LI {
} margin-right: -4px;
Значение может меняться в зависимости от размера шрифта и его настроек, поэтому данный способ нельзя считать универсальным.
Для строчных элементов нельзя задавать ширину и делать ссылки внутри них блочными. Так что альтернативой таблице с её возможностями могут быть только блочные элементы. Тег <li> изначально блочный, осталось только выстроить пункты меню по горизонтали, в чём нам поможет
свойство float.
.menu LI {
float: left; /* Выстраиваем по горизонтали */ width: 25%; /* Ширина пунктов */
} text-align: center; /* Выравниваем по центру */
Ширина всех пунктов будет равной и получается деление 100% на количество пунктов (4). Добавлять padding к пунктам нельзя, это превысит их ширину и разрушит всё меню, поэтому используем margin для вложенных селекторов A. Подсветка пунктов при наведении на них курсора аналогична примеру 7.2. Окончательный код меню приведён в примере 7.5.
Пример 7.5. Использование float
XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.
dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head> <title>Меню</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <style type=»text/css»>
UL.menu {
margin: 0; padding: 0; /* Отключаем отступы и поля */ overflow: hidden; /* Отменяем обтекание после меню */ }min-width: 450px; /* Ограничиваем ширину */
.menu LI {
list-style: none; /* Убираем маркеры */ float: left; /* Выстраиваем по горизонтали */ width: 25%; /* Ширина пунктов */
text-align: center; /* Выравниваем по центру */
}background: #fc0; /* Цвет фона меню */
.menu A {
color: #BE1E2D; /* Цвет ссылок */ display: block; /* Блочный элемент */
}margin: 5px; /* Отступы вокруг текста */
.menu LI:hover {
}background: #29B473; /* Цвет фона при наведении */
.menu LI:hover A {
color: #FFE; /* Цвет ссылок при наведении */
}text-decoration: none; /* Убираем подчеркивание */
</style>
</head>
<body>
<ul>
<li><a href=»link1.
html»>Чебурашка</a></li> <li><a href=»link2.html»>Крокодил Гена</a></li> <li><a href=»link3.html»>Шапокляк</a></li> <li><a href=»link4.html»>Крыса Лариса</a></li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 7.6.
Рис. 7.6. Меню, созданное с помощью float
Как и в случае применения строчных элементов, перенос текста в данном случае приведёт к некрасивым эффектам (рис. 7.7). Способы борьбы показаны в примере 7.4.
Рис. 7.7. Перенос текста в меню
Тенденции, шаблоны и передовой опыт — журнал Smashing Magazine
- 7 минут чтения
- Витрины, Веб-дизайн, Навигация
- Поделиться в Twitter, LinkedIn
Об авторе
Луи — разработчик интерфейса, писатель и писатель из Торонто, Канада. Он курирует информационные бюллетени Web Tools Weekly и Tech Productivity, а также ведет блоги о… Больше о Louis ↬
Горизонтальное навигационное меню стало основой веб-дизайна.
Можно с уверенностью сказать, что в настоящее время большинство веб-сайтов используют ту или иную форму горизонтальной навигации для облегчения просмотра контента. Преобладание горизонтальной навигации над вертикальной (т. е. вниз по боковой панели), очевидно, связано с ограничениями дизайна и содержания последней.Примечательно, что CNN обнаружила эти ограничения до того, как несколько лет назад переключилась с вертикального на горизонтальное.
Однако в современном веб-дизайне существует множество стилей горизонтальной навигации. Некоторые предлагают преимущества удобства использования для определенных типов веб-сайтов, в то время как другие эстетически лучше.
Обязательно ознакомьтесь с нашими предыдущими статьями:
- Демонстрация современных тенденций в дизайне навигации
- Навигационное меню в веб-дизайне — статьи и красивая презентация
- Хлебные крошки в веб-дизайне: примеры и передовой опыт
В этой статье мы сосредоточимся на различных методах и передовых методах повышения удобства использования горизонтальных панелей навигации , а также отметим менее эффективные стили.
Мы также рассмотрим несколько тенденций, которые разработчики могут выбрать при работе над дизайном навигации для своего следующего проекта.
Больше после прыжка! Продолжить чтение ниже ↓
Начнем с совета по удобству использования, применимого к любой панели навигации. Когда пользователь посещает новый веб-сайт, один из его основных точек фокусировки будет панель навигации. Если этот элемент был хорошо спроектирован, пользователь сначала обратится к нему за помощью в решении своей задачи. Почти на каждом веб-сайте есть определенные разделы, «ожидаемые» пользователями, такие как «О нас», «Услуги», «Продукты» и «Свяжитесь с нами».
Impulse Development
Из-за природы Интернета пользователи расстраиваются, если они не могут сразу найти искомое содержимое, даже если задержка незначительна. Итак, ссылка «О нас» должна быть помечена как «О нас» или «О нас». Ссылка «Услуги» должна быть помечена как «Услуги» или «Наши услуги».
Креативность в этом случае снижает удобство использования.
За исключением самых необычных обстоятельств, не называйте страницу «О компании» «информацией о компании». Не называйте страницу «Услуги» «Что мы делаем». И не называйте свою страницу «Контакты» «Как с нами связаться». Пользователи мгновенно ищут узнаваемые термины при поиске контента , поэтому отказ от любого дизайна или контента, который может их замедлить, обеспечивает им положительный опыт.
Четко различайте основные и второстепенные разделы
Как только вы выясните, какие части вашего веб-сайта являются «основными», а какие «второстепенными», вы можете установить визуальную иерархию, которая повысит удобство использования.
Основные ссылки (например, «О нас», «Услуги» и т. д.) должны быть четко отличимы от ссылок на второстепенные страницы, которые обычно доступны с каждой страницы и расположены рядом с основными ссылками. Задача дизайнера состоит в том, чтобы четко указать разницу , чтобы пользователи понимали, в каких частях веб-сайта содержится наиболее важная информация.
Рассмотрим следующий пример:
Edwards & Hampson
Веб-сайт Edwards & Hampson имеет красивую четкую горизонтальную панель, которая служит для пользователя основным средством навигации по страницам. Хотя она включает в себя стандартные ссылки («О нас», «Наши услуги», «Продукты»), на панели есть ряд других ссылок, которые не являются «основными», но достаточно важны, чтобы их можно было разместить на видном месте.
Аналогичный пример:
Deliciouslyorkshire
Веб-сайт Deliciouslyorkshire ссылается на основные разделы («Главная», «О нас», «Новости и события») рядом с разделами, которые кажутся второстепенными («Рецепты», « Акции», «Полезные ссылки»). Оба типа ссылок имеют одинаковый стиль вкладок без указания иерархии.
Если на самом деле некоторые из этих ссылок менее важны, то разработка раздела с учетом этой иерархии была бы разумной. Конечно, у этих компаний могут быть веские причины для разработки своей навигации таким образом, так что это не обязательно плохие примеры; они служат просто примерами, иллюстрирующими важность визуальной иерархии в панелях навигации.
И наоборот, вот два примера веб-сайтов, которые демонстрируют это визуальное отличие, но по-прежнему имеют легкодоступные второстепенные ссылки:
Дизайнерский диван
Дизайнерский диван имеет основные навигационные ссылки вдоль главной панели («Главная», «Галерея», «Вакансии» и т. д.), а затем второстепенные ссылки на той же панели справа, но визуально различимые («Найти дизайнера», «Принять участие»).
J Taylor Design
J Taylor Design делает подобное различие, размещая дополнительные ссылки под основной панелью навигации и используя другой цвет, шрифт и размер. В этих примерах у пользователя нет проблем с различением основного и дополнительного разделов. Тем не менее, вторичные ссылки не скрыты на странице или в выпадающих меню. Они по-прежнему легко доступны.
Если вы создаете веб-сайт электронной коммерции или веб-сайт с функцией корзины покупок, регистрацией пользователей или входом в систему, то размещайте ссылки на эти разделы с правой стороны горизонтальной панели навигации (или в другом месте на справа, вверху) лучше всего.
Вот несколько примеров веб-сайтов, которые визуально отделяют ссылки «действия», оставляя их на главной панели навигации:
Sharify
Xero
Sharify и Xero, указанные выше, размещают свои ссылки «действия» на той же панели навигации, что и их основные ссылки. Но они поддерживают иерархию, перемещая второстепенные ссылки далеко вправо.
Пользователи ожидают увидеть эти ссылки действий в правой части панели, поэтому изменение шаблона на противоположное ухудшит удобство использования .
Включение поля поиска
Еще один распространенный способ повысить удобство использования — включить окно поиска справа как часть панели навигации. Поле поиска похоже на функции, упомянутые ранее, потому что оно требует от пользователя какого-то уникального действия.
Пользователи привыкли видеть эту ориентированную на действия функциональность, включая окно поиска, в правой части страницы, поэтому оставьте достаточно места в этой части вашего дизайна для панели поиска, по возможности внутри основной панели навигации.
Веб-сайт J Taylor Design, указанный выше, размещает окно поиска в правой части панели навигации, как и эти:
Общественный колледж Ваштено
Westcoast Poppin
Раскрывающиеся меню в горизонтальных полосах довольно распространены в современном дизайне, потому что они упрощают загроможденные макеты. Визуальное указание, будет ли навигационная ссылка отображать раскрывающееся меню, когда пользователь наведет на нее указатель мыши, является лучшей практикой. это лучше выполнен с помощью простого направленного вниз треугольника .
Ниже приведены несколько хороших примеров горизонтальных меню, которые визуально обозначают раскрывающиеся меню внутри них:
QN5 Music
Kinder-aktuell
К сожалению, на многих веб-сайтах нет этого простого, но эффективного маркера. Ниже приведены несколько примеров «неожиданных» выпадающих меню :
веб-студий
billoneil.
com
Различные тенденции и стили
Наконец, вот демонстрация горизонтальных навигационных панелей, чтобы дать вам представление о различных стилях в Интернете и о том, как они соответствуют своим макетам.
Эти примеры не обязательно отражают лучшие практики, но их стоит учитывать при разработке собственной горизонтальной панели навигации.
Горизонтальная навигация с вкладками
Owltastic
inkd
Full Cream Milk
My Favorite Thing
The Mindset Game
Lanbruk’s Gunya
Компания Mission Bicycle
Горизонтальная навигация с пронумерованными ссылками
Glocal Ventures
Twitshirt
Render
Auditude
Wetaskiwin Regional Государственные школы
Описательный текст под горизонтальными навигационными ссылками
Eyemagine
Горизонтальная полоса жидкой ширины с центрированными ссылками
Jupiter Underfloor Heating
Cambridge Shakespeare Festival
Horizontal Links Divided by Graphic
Arca lui Noe Hotel
The Art of Non-Conformity
Lorem Ipsum
Заключение
Методы, рекомендованные в этой статье, применимы не во всех случаях и могут не подходить для каждого дизайна, ниши или отрасли.
Но они подчеркивают необходимость предоставить пользователям лучший опыт и избегать потенциально запутанных навигационных настроек .
Пользователи Сети обычно ведут себя на основе усвоенных привычек. Создание макета или шаблона, который без необходимости нарушает эти привычки, только снизит коэффициент конверсии вашего сайта.
Итак, прежде чем разрабатывать горизонтальное навигационное меню, рассмотрите имена ссылок, иерархию разделов и любые другие факторы, которые могут повлиять на удобство использования. При этом вы создадите удобный пользовательский интерфейс, который позволит посетителям быстро и эффективно находить нужную им информацию.
Дополнительная литература
- 20 Потрясающие примеры меню горизонтальной навигации
- Пример панели горизонтальной навигации
- Пользовательские наборы: горизонтальная навигация
- Шаблон проектирования горизонтального выпадающего меню
- Проблемы перехода на горизонтальную навигацию Должен ли я выбрать?
Когда дело доходит до разработки веб-сайта, удобство меню навигации веб-сайта имеет важное значение.
Не стоит создавать уникальный и эстетичный веб-сайт, если ваши посетители изо всех сил пытаются найти нужную им информацию. Лучший способ понять навигацию — представить ее как то, как вы исследуете и перемещаетесь по веб-сайту.Исходное изображение: Studytonight
Одно из важнейших решений, которое вам нужно принять при разработке веб-сайта, — это то, как вы будете использовать горизонтальную или вертикальную компоновку для основной навигации по веб-сайту. Перед этим давайте начнем с основ и поймем, что означает навигация по сайту.
Что такое меню навигации веб-сайта?
Исходное изображение: uxdesign
На вашем многостраничном веб-сайте требуется метод, позволяющий пользователям переходить с одной страницы на другую. Это достигается с помощью панели навигации или бокового навигационного меню. На каждой странице есть панель со ссылками на другие веб-страницы, которые вы можете найти вверху или сбоку страницы.
Что такое горизонтальная панель навигации и как она работает?
В верхней части каждой страницы есть отзывчивое горизонтальное меню навигации, коллекция ссылок.
Он может быть выше, ниже, слева или справа от заголовка или логотипа; тем не менее, он всегда помещается перед основным содержимым страницы и постоянен на всех страницах.Достоинства горизонтальной навигации
- Последовательность ссылок слева направо на горизонтальной панели навигации кажется естественной для носителей английского языка, которые читают слева направо.
- Пользователи привыкли к горизонтальной навигации, поскольку она используется на большинстве веб-сайтов.
- Горизонтальная навигация позволяет дизайнеру более творчески подходить к основной области содержимого страницы — телу.
Недостатки горизонтальной навигации
- Из-за ограниченного доступного места необходимо тщательно продумать количество навигационных ссылок и конкретный язык.
- Добавление связей верхнего уровня может быть затруднено по тем же причинам, что и раньше.
- Открытые выпадающие подменю могут ненадолго выступать за основной текст.
Что такое вертикальная навигация и как она работает?
Исходное изображение: выпадающее меню
Вертикальная панель навигации представляет собой набор ссылок на левой или правой стороне каждой страницы.
Достоинства вертикальной навигации
- Возможно большее количество связей верхнего уровня.
- Создать новую ссылку намного проще.
- Некоторые компании хотят, чтобы их знали за их уникальность или за то, что они идут против течения. Вертикальная навигация может быть предпочтительнее в этом сценарии просто потому, что она менее распространена.
Недостатки вертикальной навигации
- Вертикальные меню были более распространены в прошлом, и их использование сейчас может сделать веб-сайт устаревшим и устаревшим.
- Поскольку боковая панель навигации менее распространена, чем горизонтальная, посетителям сайта будет менее удобно ее использовать.
- Существует меньше мотивации структурировать материал по меньшему количеству категорий верхнего уровня или предметных областей, когда ссылки верхнего уровня имеют неограниченное пространство.
Не стоит создавать уникальный и эстетичный веб-сайт, если ваши посетители изо всех сил пытаются найти нужную им информацию. Лучший способ понять навигацию — представить ее как то, как вы исследуете и перемещаетесь по веб-сайту.
Он может быть выше, ниже, слева или справа от заголовка или логотипа; тем не менее, он всегда помещается перед основным содержимым страницы и постоянен на всех страницах.
