является линейным элементом, добавление верхнего или нижнего отступов (или полей) не окажет никакого эффекта. Причина такого поведения описана в подразделе «Отображение линейных и блочных элементов» раздела «Управление размерами полей и отступов» гл. 7. Однако можно преобразовать ссылку в блочный элемент (display: block) или воспользоваться настройкой линейного элемента inline-block (display: inline-block), чтобы применить к нему верхние и нижние отступы и поля. Оба этих метода будут рассмотрены позже.
Пользуйтесь псевдоклассами. Не забывайте о псевдоклассах
:hover и
:visited
Они помогут создать для ссылок замечательные динамические эффекты и обес- печат полезную обратную связь с посетителями сайта.
Можно загружать и менять различные фоновые рисунки для любого из этих псевдоклассов, чтобы, например, изображение непосещенной ссылки в виде вы- ключенной лампочки при наведении на нее указателя мыши сменялось на изобра- жение включенной.
Если вы решите использовать изображение для состояния
:hover ссылки, пом- ните, что браузеры не загрузят это изображение, пока посетитель сайта на самом деле не наведет на нее указатель мыши. Может возникнуть значительная задержка,
318 Часть 2. Применение CSS
прежде чем появится изображение. Однако уже после первой загрузки задержка исчезнет. О том, как
решить данную проблему, читайте далее.
Создание панелей навигацииКаждому сайту требуется хорошая управляющая панель с элементами навигации: во-первых, чтобы привести посетителей к нужной им информации, а во-вторых, чтобы им понравилось управление сайтом и они вернулись сюда вновь. Содержи- мое большинства сайтов организовано в виде разделов. Например, продукция, контактная информация, журнал отзывов и т. д. Такая организация позволяет посетителям хорошо ориентироваться в содержимом сайта, и они точно знают, что и где смогут найти. В большинстве случаев ссылки на основные разделы сайта можно найти на панели навигации. CSS облегчает создание красивых и функцио- нальных панелей, эффектов ролловеров и т. д.
Использование маркированных списковПо сути, панель навигации — не что иное, как набор ссылок, а точнее, она представ- ляет собой список разделов сайта. Как разъясняется в гл. 1, задача языка HTML состоит в том, чтобы обеспечить структуру. Следовательно, вы всегда должны ис- пользовать теги в соответствии с их функциональным назначением, чтобы они соответствовали заключенному в них содержимому. Например, для списка элемен- тов это должен быть тег
, или тег неупорядоченного, маркированного списка.
Не имеет значения, будет список вообще без маркеров или будет располагаться горизонтально вдоль верхнего края веб-страницы: все форматирование тега
обеспечено средствами языка CSS. Пример показан на рис. 9.4.
Рис. 9.4. Используя CSS, вы можете превратить обычные теги в то, что захочется, например в вертикальное или горизонтальное управляющее меню (панель навигации)
Применение HTML для создания панели навигации — это и есть использование языка разметки по прямому назначению. В каждом элементе списка имеется по одной ссылке. Кроме того, нам всего лишь необходимо стилизовать этот маркиро- ванный список (не нужно, чтобы его пункты составляли панель навигации). Пра- вильным подходом будет применение стилевого класса или стиля с идентифика- тором (ID-стиля) к тегу
Глава 9. Приводим в порядок навигацию сайта
319CSS-код немного отличается в зависимости от того, нужна нам горизонтальная или вертикальная панель управления. В любом случае вы должны выполнить два шага.
1.
Удалить маркеры. Чтобы панель навигации не была похожа на маркирован- ный список, удалим маркеры, установив для свойства list-style-type значение none
:
ul.nav {
list-style-type: none;
}
2.
Убрать отступы и поля. Поскольку браузеры сами делают отступы для элемен- тов списка, нам придется избавиться от них. Однако одни браузеры используют для этих целей свойство padding
, а другие — margin
, поэтому нам нужно устано- вить для обоих свойств значение
0
:
ul.nav {
list-style-type: none;
padding-left: 0; margin-left: 0; }
По сути, эти два шага обеспечивают всем элементам списка простой вид, как у обычного блочного фрагмента текста — абзаца или заголовка (с одним исключе- нием: браузер не добавляет полей между элементами списка). С этого момента можно начинать стилизацию.
Если вам нужна вертикальная панель навигации, продолжайте читать дальше; если же хотите создать горизонтальную панель управления, то переходите к следующему подразделу.
Вертикальные панели навигацииВертикальная панель навигации — это всего лишь набор ссылок, расположенных одна за другой в виде списка или стека. Удалив маркеры, а также поля и отступы слева (как описано выше), вы выполните большую часть работы. Но вы должны знать, что существует еще несколько дополнительных хитростей, обеспечивающих правильное отображение панели навигации.
1.
Отобразим ссылку в виде блочного элемента. Поскольку тег
является линейным элементом, ссылка будет занимать по ширине пространство, равное ширине содержимого тега. Кнопки со ссылками в виде текста различной ши- рины (например,
Home
(Домой) и
Our Products
(Наши продукты)) будут иметь различную ширину. Ступенчатое вертикальное отображение кнопок друг над другом выглядит не очень хорошо (рис. 9.5, 1). Кроме того, верхние и нижние отступы и поля не оказывают никакого воздействия на линейные элементы.
Чтобы обойти эти ограничения, преобразуем ссылки в блочные элементы:
320 Часть 2. Применение CSS
ul.nav a {
display: block;
}
Параметр отображения block не только выравнивает все кнопки по ширине, но и делает всю область ссылок активной при щелчке на ней кнопкой мыши, подобно настоящим кнопкам. Это тот случай, когда посетители щелкают на области кноп- ки, где нет текста (например, отступы вокруг), но ссылка по-прежнему работает.
Рис. 9.5. Всего четырьмя простыми действиями можно превратить маркированный список ссылок в привлекательную панель навигации
2.
Ограничим ширину кнопок. Преобразование пунктов списка в блочные эле- менты обеспечивает ссылкам ширину тегов, в которые они вложены. Посколь- ку ссылки просто помещены на веб-страницу, их ширина окажется равной ши- рине окна браузера (см. рис. 9.5,
2). Есть несколько способов ограничить ширину ссылок.
Сначала можно просто определить тег
. Например, если вы хотите, чтобы все кнопки имели ширину 8 em, добавьте в стиль свойство width
:
ul.nav a {
display: block;
width: 8em; }
Глава 9. Приводим в порядок навигацию сайта
321Установка ширины для любого тега, в который заключены ссылки, например
или
, приведет к тому же результату.
Если текст кнопки занимает всего одну строку, то можно его центрировать вер- тикально, чтобы над и под ним были одинаковые промежутки. Просто устано- вите высоту ссылки и назначьте такое же значение свойства межстрочного ин- тервала: a { height: 1.25em; line-height: 1.25em;
}
ПРИМЕЧАНИЕ
Не обязательно явно назначать свойство width, если панель навигации вложена в элемент размет- ки веб-страницы, для которого уже установлена ширина. Из части 3 вы узнаете, каким образом элементарно создать боковую панель, примыкающую к левому или правому краю веб-страницы.
Боковая панель имеет свою ширину, и помещенный в нее маркированный список со ссылками- кнопками автоматически приобретает эту ширину.
Теперь, когда мы закончили всю эту малопродуктивную работу, займемся основ- ной задачей — стилизацией кнопок. Можно добавить отступы, поля, изображения, изменить фоновый цвет. Если хотите расположить кнопки так, чтобы они не сопри- касались между собой, можете добавить нижнее (или верхнее) поле для ссылок.
ОБХОДНОЙ ПРИЕМ
Если сливаются границы
Если кнопки панели навигации расположены вплот
ную друг к другу и при этом вы применяете границы, окаймляющие каждую ссылку отдельно, то линии гра
ниц соседних ссылок сливаются между собой и превра
щаются в двойные. Чтобы избавиться от этого, можно добавить границу только к верхней стороне ссылок.
Таким образом, мы получим всего одну границу, от
деляющую кнопки, расположенные рядом.
Однако в результате этого обходного приема послед
няя, нижняя ссылка панели управления получается без границы. Чтобы решить проблему, можно либо создать стилевой класс с нижней границей и приме
нить его к последней ссылке, либо, что еще лучше, до
бавить нижнюю границу к тегу
, завершающему панель навигации (этот прием будет продемонстри
рован на практике в обучающем уроке данной главы).
Горизонтальные панели навигации
CSS позволяет преобразовать список ссылок, расположенных вертикально одна за другой, в список с горизонтальным представлением, как было показано на рис. 9.4.
В этом подразделе описываются два распространенных подхода в создании из спис- ка горизонтальной панели навигации. Первый метод основывается на использова- нии свойства display: inline-block
— он прост, но обычно приводит к маленьким расстояниям между кнопками. Этот вопрос можно решить, но для этого придется возиться с кодом HTML. Если нужна горизонтальная навигационная панель с со- прикасающимися кнопками, обратитесь к методу с применением плавающих эле- ментов
322 Часть 2. Применение CSS
Какой бы метод вы ни использовали, сначала удалите маркеры и левые отступы тегов
, как показано на рис. 9.6, 1.
Использование display:inline и display:inline-block. Самый простой метод со- здания горизонтальной панели навигации заключается в изменении для элементов списка значения block
(блочный элемент) свойства display на inline
(линейный элемент). Это делается средствами CSS.
1. Создаем стиль для маркированного списка, чтобы удалить отступы, поля и мар- керы.
ul.nav {
margin-left: 0px;
padding-left: 0px;
list-style: none;
border-bottom: 1px dashed #000;
}
В данном случае добавляется нижняя граница, которая появится ниже кнопок
(см. рис. 9.6, 1).
Рис. 9.6. Создание горизонтального меню из списка ссылок потребует выполнения всего нескольких действий. Но использование метода inline и inline-block приводит к заметным промежуткам между кнопками (обведено кружком)
2. Преобразуем пункты списка в линейные элементы. Линейные элементы не со- здают переносов строк ни перед элементом, ни после него, как это делают блоч- ные. Установка значения inline свойства display для тегов
приведет к ото- бражению элементов списка в одну строку (см. рис. 9.6, 2).
.nav li { display: inline; }
Глава 9. Приводим в порядок навигацию сайта
323Вы должны быть уверены в том, что панель навигации кнопок-ссылок не слиш- ком большая. Те кнопки, которые не поместятся в одну строку, перенесутся на другую.
ПРИМЕЧАНИЕ
В показанном выше стиле можно также использовать inline-block, но только если не обращать вни- мания на Internet Explorer 7, который допускает применение inline-block только к таким линейным элементам, как ссылки, но не к таким блочным элементам, как тег
.
3. Стилизуем ссылки. Можно убрать подчеркивание под ссылками и вместо этого добавить вокруг них окаймляющую границу. Чтобы обеспечить визуальную глубину и реалистичность настоящих кнопок, нужно изменить цвет фона или добавить рисунок. При необходимости добавьте отступы вокруг текста ссылок.
Если требуется разнести кнопки друг от друга, назначьте для них правое поле.
Следующий стиль обеспечивает ссылкам визуальное подобие кнопок, как по- казано на рис. 9.6, 3:
.nav a { display: inline-block; border: 1px dashed #000; border-bottom: none; padding: 5px 15px 5px 15px; background-color: #EAEAEA; text-decoration: none; color: #333;
}
Сначала нужно установить для свойства ссылок display значение inline-block
Тогда верхние и нижние отступы и поля будут соответствовать требованиям
(как уже упоминалось, обычно линейные элементы игнорируют верхние и ниж- ние отступы и поля, а также значения ширины и высоты). Затем можно будет указать стиль кнопок в соответствии с вашим вкусом. Здесь к ссылкам добав- ляется граница и удаляется нижняя граница, чтобы исключить дублирование нижней границы, применяемой к маркированному списку.
СОВЕТ
Определив ширину ссылок, все кнопки можно сделать одинакового размера.
Чтобы эта навигационная панель появлялась в центре страницы, к стилю тега
нужно добавить объявление text-align: center;
. У данной технологии, по срав- нению с рассматриваемой далее плавающей технологией, есть одно преимуще- ство — при использовании inline и inline-block панель навигации можно центри- ровать, чего нельзя сделать с float
Однако можно заметить, что кнопки не соприкасаются (см. область, обозначен- ную кружком, на рис. 9.6). Это связано с тем, как веб-браузеры рассматривают пустое пространство между
-тегами. Возьмем, например, следующий фрагмент кода HTML:
324 Часть 2. Применение CSS
NewsReviewsСимвол возврата каретки после одного тега
и перед следующим тегом
веб-браузеры рассматривают как пустое пространство. Удалить его можно одним из двух способов.
Поместить закрывающий тег
и открывающий тег
на одной и той же строке:
Обычно так код не записывают, и программы типа Dreamweaver так бы не сде- лали. Чтобы удалить пустое пространство, нужно зайти в код и внести измене- ния вручную.
Добавить к элементам списка правое поле с отрицательным значением. Например, в стиль list в показанном выше шаге 2 можно внести следующее изменение:
.nav li {
display: inline;
px;
}
Отрицательное значение поля приводит к накладке следующего элемента списка на 5 пикселов, закрывая просвет между кнопками. Проблема при использовании данной технологии заключается в том, что конкретное применяемое значение ва- рьируется в зависимости от размера текста — 5 пикселов могут сработать, а могут и нет, поэтому для получения нужного значения следует провести эксперимент.
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
Всплывающие меню
Как создать стильные современные всплы- вающие меню, которые показывают под- меню со ссылками при наведении указате- ля мыши на кнопки панели навигации?
Панели навигации в виде всплывающих многоуровне
вых меню чрезвычайно популярны. Они представляют собой отличный способ вместить огромное количество ссылок в компактную панель управления. Вы можете создать их несколькими способами.
Один из методов создания всплывающих меню ис
пользует только средства CSS. Основное руковод
ство по процессу создания можно найти по адресу http://line25.com/tutorials/howto-create-a-pure-css- dropdown-menu
. Как создать изящное CSSменю, применяющее CSSпереходы для появления и ис
чезновения раскрывающегося меню, можно узнать по адресу www.red-team-design.com/css3-animated- dropdown-menu
Если вы не хотите создавать меню самостоятельно или, возможно, просто ограничены во времени, то можете воспользоваться бесплатным генератором
Pure CSS Menu — мастером, реализованным в виде
Глава 9. Приводим в порядок навигацию сайта
325вебстраницы, которая автоматически создает не
обходимый код HTML и
CSS (http://purecssme- nu.com
). Подход с применением исключительно средств CSS имеет один недостаток: когда посети
тель убирает с кнопкиссылки указатель мыши,
подменю исчезает мгновенно, без задержки, — остается наде яться, что у посетителей сайта доста
точно хорошая реакция.
Есть и другой подход: задействуйте CSSкод для стили
зации кнопокссылок и JavaScriptкод для управления работой подменю.
В качестве очень простого меню JavaScript попробуй
те воспользоваться дополнительным модулем jQuery
Navigation, который находится по адресу https://github.
com/dansdom/plugins-navigation.
Скачать 20.28 Mb.