Реферат: Раздвижные двери CSS
padding-bottom:5px;
}
Сделав это, мы получаем пример 4. Заметьте, что предпринятые нами для создания прозрачных углов шаги, привели к появлению небольшой «мертвой» зоны в левой части закладки, где она не реагирует на наведение мыши. Мертвая зона находится вне текста, но она все же заметна. Прозрачные картинки для каждой стороны нашей закладки использовать необязательно. Если мы предпочтем не иметь на нашей закладке «мертвого» участка, нужно всего лишь использовать позади закладок сплошную заливку, а не градиент, и сделать уголки закладок такого же цвета. Пока же мы сохраним прозрачность углов. [В IE/Win упомянутая «мертвая» зона существовала и до предпринятых шагов, причем со всех сторон от текста ссылки. Решение этой проблемы освещено в следующей статье серии SlidingDoorsofCSS, PartII.—прим. переводчика]
- - -
Ну и, наконец, последние штрихи. Все за один раз: делаем весь текст полужирным, текст на обычных закладках коричневым, а на текущей—темно-серым, этот же цвет присваиваем тексту для состояния ссылки hover, убираем подчеркивание ссылок. Все сделанные к этой минуте добавления и изменения представлены в примере 5.
Еще один метод для обеспечения совместимости
Рассмотрев пример 2, мы признали наличие проблемы с IE5/Mac, который растягивал закладки на всю ширину окна, выстраивая их вертикально одна под другой. Не совсем тот эффект, которого мы добиваемся.
В большинстве браузеров применение к элементу свойства float влечет его сжатие до минимально возможного размера, определяемого его контентом. Если плавающий элемент содержит картинку (или сам является картинкой), то он сожмется до ширины картинки. Если он содержит только текст, то сожмется до ширины самой длинной строки текста, не содержащей переносов.
Проблемы возникают в IE5/Mac, когда блочный элемент с шириной auto помещается внутрь плавающего элемента. В этом случае все браузеры сжимают плавающий элемент до минимально возможной ширины, не обращая внимания на внутренний блочный элемент. А вот IE5/Mac в описанной ситуации этого не делает. Вместо этого он растягивает плавающий и внутренний блочный элементы на всю доступную ширину. Чтобы обойти такое поведение, нам нужно применить float также и к ссылке, но только для IE5/Mac, не затрагивая другие браузеры. Сначала добавим float к уже существующему правилу. Затем применим «Метод обратного слэша», чтобы спрятать от IE5/Mac новое правило, которое удаляет float для остальных браузеров:
#header a {
float:left;
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
В соответствии с примером 6 IE5/Mac теперь отображает закладки как положено. Для остальных браузеров ничего не изменилось. IE5/Mac содержит огромное количество CSS-багов, которые были исправлены в версии IE5.1. От этих багов в IE5/Mac страдает и метод «Раздвижных дверей». Их число превосходит все мыслимые пределы, и я не собираюсь с ними бороться. А так как обновление до 5.1 уже довольно длительное время доступно для всех желающих, процент Маков cOS 9 и установленным IE5/Mac постоянно сокращается и приближается к нулю.
Варианты
Мы только что детально разобрали метод «Раздвижных дверей», который позволяет создавать сверстанную с помощью ненумерованного списка и ссылок и доработанную при помощи нескольких правил CSS закладочную навигацию на основе простого текста. Такая навигация быстро загружается, проста в поддержке, а текст внутри нее может быть значительно масштабирован в любую сторону без нарушения дизайна. Стоит ли говорить, насколько гибким является этот метод при создании любой утонченно выглядящей навигации?
Использование этой техники ограничивается только нашим воображением. Заключительный пример иллюстрирует всего лишь один вариант. Но этот пример не должен ограничивать наши идеи.
Закладки, например, необязательно должны быть симметричными. Я быстро создал второй вариант закладок, в котором использовал простые цвета, угловатые формы и более широкую и сложную по форме левую сторону. Как показывает вариант 2, мы можем свободно менять порядок левого и правого изображений в зависимости от дизайна. При четком планировании и искусном обращении с картинками, можно отказаться от нижней границы в пользу стилевого сочетания картинок с фоном, расположенным позади, как показано в созданном мной варианте 3. Если ваш браузер поддерживает переключение между альтернативными стилями, вы можете просмотреть все представленные варианты, открыв этот мастер-файл и переключаясь в нем между таблицами стилей. [В NN7.1 доступ к альтернативным стилям осуществляется через главное меню View>UseStyle, в Opera 7.20—через главное меню View>Style, в IE/Winтакой возможности нет—прим. переводчика]
К примененной технике могут быть добавлены другие эффекты, которые мы здесь не рассматриваем. В нашем примере мы меняли цвет текста для состояния hover, но почему бы не поменять фоновое изображение целиком для получения интересных ролловер-эффектов. При наличии в коде двух вложенных HTML элементов мы всегда можем использовать CSS для накладывания фоновых изображений и получения эффектов, о которых мы и не мечтали. В нашем примере мы создали горизонтальный ряд закладок, но метод Раздвижных дверей можно использовать и во многих других случаях. Какое применение этому методу предложите вы?