Раздвижные двери CSS
Информация - Компьютеры, программирование
Другие материалы по предмету Компьютеры, программирование
ля остальных браузеров:
#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 уже довольно длительное время доступно для всех желающих, процент Маков c OS 9 и установленным IE5/Mac постоянно сокращается и приближается к нулю.
Варианты
Мы только что детально разобрали метод Раздвижных дверей, который позволяет создавать сверстанную с помощью ненумерованного списка и ссылок и доработанную при помощи нескольких правил CSS закладочную навигацию на основе простого текста. Такая навигация быстро загружается, проста в поддержке, а текст внутри нее может быть значительно масштабирован в любую сторону без нарушения дизайна. Стоит ли говорить, насколько гибким является этот метод при создании любой утонченно выглядящей навигации?
Использование этой техники ограничивается только нашим воображением. Заключительный пример иллюстрирует всего лишь один вариант. Но этот пример не должен ограничивать наши идеи.
Закладки, например, необязательно должны быть симметричными. Я быстро создал второй вариант закладок, в котором использовал простые цвета, угловатые формы и более широкую и сложную по форме левую сторону. Как показывает вариант 2, мы можем свободно менять порядок левого и правого изображений в зависимости от дизайна. При четком планировании и искусном обращении с картинками, можно отказаться от нижней границы в пользу стилевого сочетания картинок с фоном, расположенным позади, как показано в созданном мной варианте 3. Если ваш браузер поддерживает переключение между альтернативными стилями, вы можете просмотреть все представленные варианты, открыв этот мастер-файл и переключаясь в нем между таблицами стилей. [В NN7.1 доступ к альтернативным стилям осуществляется через главное меню View>Use Style, в Opera 7.20через главное меню View>Style, в IE/Win такой возможности нетприм. переводчика]
К примененной технике могут быть добавлены другие эффекты, которые мы здесь не рассматриваем. В нашем примере мы меняли цвет текста для состояния hover, но почему бы не поменять фоновое изображение целиком для получения интересных ролловер-эффектов. При наличии в коде двух вложенных HTML элементов мы всегда можем использовать CSS для накладывания фоновых изображений и получения эффектов, о которых мы и не мечтали. В нашем примере мы создали горизонтальный ряд закладок, но метод Раздвижных дверей можно использовать и во многих других случаях. Какое применение этому методу предложите вы?
Список литературы
Для подготовки данной работы были использованы материалы с сайта