Когда-то навигационные панели делались из таблиц, заполненных нарисованными в Фотошопе кнопками. В последнее время, когда появилась возможность все больше и больше полагаться на возможности CSS, происходит движение в сторону большей семантичности. С точки зрения семантики, навигационнное меню — это список ссылок. С этой точки зрения мы на него и будем смотреть.
С помощью CSS можно с легкостью достичь множества эффектов, для которых ранее пришлось нарезать бы множество графических элементов. Разумеется, чем сложнее эффект, тем лучше браузер требуется для его поддержки, поэтому стоит в любой сложный эффект включать какой-нибудь простой элемент, чтобы обеспечить удобство для посетителей со старыми версиями. Сейчас мы рассмотрим несколько любопытных эффектов для вертикального меню. Горизонтальные меню в настоящее время менее удобны в реализации списками, поскольку обычно требуют поддержки псевдоклассов :before, :after, :first-child, свойства content и прочих сложных вещей.
Подготовительная работа
Нам понадобится список из нескольких ссылок и простейшие базовые стили для начала работы:
<style>
ul {border:1px solid black; width:30%; padding:0; margin:1em}
ul li {list-style:none}
ul li a {text-decoration:none; color:blue}
ul li a:hover {color:red}
</style>
<ul>
<li><a href="#">Первая ссылка</a></li>
<li><a href="#">Вторая ссылка</a></li>
<li><a href="#">Третья ссылка</a></li>
<li><a href="#">Еще какая-то ссылка</a></li>
</ul>
Пара замечаний по этому коду. Во-первых, тут мы уже задали один простой эффект: перемену цвета при наведении мыши. Это самый простой элемент, и я бы рекомендовал включать его во все hover-эффекты, поскольку он понятен любому браузеру, понимающему hover, тогда как более сложные эффекты кто-то может и не понять. Второе замечание: list-style, конечно, можно написать в ul, ничего от этого не изменится. Просто мне захотелось сразу обозначить те четыре селектора, с которыми мы будем работать в дальнейшем.
Блокировка
Вообще мысль оформить навигацию списком довольно очевидна. Но у графических кнопок есть большое преимущество перед текстовыми ссылками: на кнопки можно нажимать по всей площади, тогда как у ссылки клику поддается только сам текст. Раньше люди клали жизнь на алтарь, пытаясь сделать "кликабельной" клетку таблицы. Теперь есть куда более простое (и что немаловажно, легальное) средство: display:block.
Установка этого атрибута сделает нашу ссылку нажимаемой по всей ширине списка. Чтобы нам было легче это заметить, добавим изменение фона у ссылки:
<style>
ul {border:1px solid black; width:30%; padding:0; margin:1em;}
ul li {list-style:none;}
ul li a {text-decoration:none; color:blue; display:block}
ul li a:hover {color:red; background:#eff}
</style>
Два очень важных замечания по MSIE 5.0 (что-то, возможно, верно и для более новых). Во-первых, он норовит вставить лишние пробелы между строками:
Эта проблема решается неэлегантно, но просто: нужно убрать переносы строк между элементами списка:
<ul><li><a href="#">Первая ссылка</a></li><li><a href="#">Вторая ссылка</a></li><li><a href="#">Третья ссылка</a></li><li><a href="#">Еще какая-то ссылка</a></li></ul>
Вторая проблема куда серьезнее, и у нее, кажется, нет решения: если у списка или у какого-либо родительского элемента задана ширина (возможно даже 100%), ссылка не становится нажимаемой вне области текста. Правда, при наведении мыши на текст ссылки фоновый цвет меняется на всей ширине списка. Таким образом, заключаем, что MSIE5.0 более или менее правильно обрабатывает стили, но не инициализирует событие onMouseOver в согласии со свойством display. Что интересно: если список является непосредственным ребенком элемента body и ширина у него не задана, то display:block приносит ожидаемый эффект. Удивительно, не правда ли?
Кроме того, если у самого списка задана ширина (вне зависимости от его предков), то MSIE создает левый отступ (виден на картинке выше), от которого, кажется, никак не избавиться. Разве что насильственным text-indent:-1em.
Ссылка в рамке
Очень интересных эффектов можно достичь с помощью рамок. Рамки бывают толстые и тонкие, сплошные и прерывистые, и многие другие (смотря в каком браузере, разумеется). При создании эффекта, основанного на изменении свойств рамки, следует учитывать следующее: ширина рамки в общем случае должна быть задана заранее, а изменяться должен только цвет (например, с прозрачного на какой-то, или наоборот), иначе может возникнуть нежелательное дрожание: едва ли дрожание может быть желательным, а обеспечивать сохранение размеров блока другими средствами - полями или отступами - обычно более беспокойно.
А вот стиль для такого эффекта (я добавил отступ у списка, чтобы граница подсвеченной ссылки не сливалась с границей списка):
<style>
ul {border:1px solid black; width:35%; padding:1em; margin:1em;}
ul li {list-style:none;}
ul li a {text-decoration:none; color:blue; display:block; border-width:0 0 1px 0.5em; border-style:solid; border-color:white}
ul li a:hover {color:red; border-color:#00f}
</style>
Похожего эффекта (маркер слева при выбранной ссылке) можно достичь с помощью ul li:hover {list-style:square}, но на даный момент это не сработает почти ни в одном браузере (в NS7, например, работает, а в NS6 - нет).
Рисуем кнопку
Вернемся на исходные позиции: представьте, что мы захотели оформить навигацию в виде кнопок (мне лично такой стиль не кажется привлекательным, но он бесспорно достоин обсуждения). Кнопка - это то, что покрашено серым цветом, выпукло и вдавливается. Все это вполне осуществимо с помощью CSS.
Я нарочно не хочу использовать сложных средств вроде малоизвестных border-style, и никогда не пользуюсь ими, поскольку они не слишком надежны: многие браузеры и с border-style:solid справляются с трудом. Все, что мне нужно - это solid рамка да небольшой padding.
<style>
ul {border:1px solid black; width:35%; padding:1em; margin:1em;}
ul li {list-style:none; margin:1px;}
ul li a {text-decoration:none; color:black; display:block; border-width:1px; border-style:solid; border-color:#eee #666 #666 #eee; background:#ccc; padding:2px 3px 3px 2px;}
ul li a:hover {color:black; border-color:#666 #eee #eee #666; padding:3px 2px 2px 3px;}
</style>
Тут нет ничего сложного: изменение цвета границы создает эффект нажимания кнопки, а изменение отступов необходимо для того, чтобы текст двигался вместе с "поверхностью кнопки", а не повисал в воздухе (к сожалению, в Opera изменение отступов отработано не будет, поэтому css-кнопки в ней выглядят немного хуже, чем в прочих браузерах). Кто-то сочтет мои комбинации цветов или размеры отступов неоптимальными - что ж, тут, как и в других эффектах, есть место фантазии.
Экстремальное вождение
Еще несколько идей, для тех, кто любит экспериментировать и не заботится о совместимости: стили, которые не сработают в большинстве браузеров.
Стиль, основанный на content'е. Это более требовательная (и более мощная) версия эффекта с передвигающимся маркером. Можно описывать свойство content для псевдоклассов :before и :after активной ссылки, добавляя маркер произвольного вида перед ссылкой или после нее.
Перенос на другую сторону. Несложный эффект, практическое применение которого, увы, исключено из-за глюка в MSIE, который я описывал в начале: изменять по :hover атрибут text-align, перенося активную ссылку слева направо (или наоборот). В Explorer'е вызывает хаотическое прыгание текста из стороны в сторону, если при переносе текст выходит из под курсора.
Игры с li:hover. Работает только с новейшими браузерами (все проверить не могу, но в NS6, как я уже говорил, не работает). Ключевой плюс - возможность менять маркер: его форму, цвет, расположение. Кстати, замечание: маркер, расположенный inside, принципиально конфликтует с a {display:block}, особенно перемены с outside на inside и обратно. Во всяком случае, мне не придумать эффект, в котором бы они разумно соседствовали. А вообще, на подходе XHTML2.0, где ссылками можно будет делать сами элементы списка, не вставляя в них <A>. Вот тогда-то и повеселимся.
Другие работы по теме:
Сказание
Сказание (греч. historia, diegemata) — в настоящее время термин, не прикрепленный к определенному литературному жанру. Даже специалисты употребляют часто безразлично слова — сказание, легенда, предание, сага.
Экономическое равновесие
[править] Материал из Википедии — свободной энциклопедии (Перенаправлено с Рыночное равновесие) Перейти к: навигация, поиск Цена при рыночном равновесии:
Москва в 50-80-е годы
План: 1. Москва в годы оттепели. 2. Москва при Брежневе. 1)В годы хрущёвской оттепели началось массовое жилищное строительство. Егосимволом стал московский район Черёмушки. Построенные там типовые дома, в основ-ном блочные и панельные пятиэтажки, по современным стандартам малоудобны, но онипозволили расселить из бараков и подвалов миллионы людей.
Информационные интернет ресурсы по маркетингу
Лабораторная работа №1. . Государственные ресурсы. Сайт www.gks. Содержит стат информацию федерального и регионального уровня. Сайт президента РФ www.president.kremlin. Найти две ссылки на сервер гос. ресурсов.
Его зарыли в шар земной, а был он лишь солдат... по произведениям В. Быкова, К. Воробьева 5
«Его зарыли в шар земной, а был он лишь солдат...» (по произведениям В. Быкова, К. Воробьева) Автор: Разное Наша земля — это частичка нас. Это то, где мы работаем, учимся, живем. Это цветущие сады, это реки, это мирное небо над головой, это радостная и спокойная жизнь свободных людей, которые стремятся улучшить эту землю и обеспечить мир.
Михайловская ссылка Пушкина
Над Пушкиным сгустилась новая туча. В годы южной ссылки литературная его слава неслыханно возрастает; тем с большей тревогой и злобой следят за ним царь и Аракчеев. Летом 1823 года поэту удалось добиться перевода из Кишинева в Одессу. Но не проходит и года, как новый его начальник, граф М. С. Воронцов, шлет на него донос в Петербург.
К Чаадаеву
Анализ стихотворения А. С. Пушкина «». К Чаадаеву. Это стихотворение относится к 1818 году, а опубликовано в 1829 без ведома Пушкина, хотя до этого получило известность в рукописных списках. Посвящено Петру Яковлевичу Чаадаеву, одному из друзей Пушкина.
Акмеизм как литературное направление 2
Graphics Ссылки (links): ozon/multimedia/books_covers/1000266533.jpgt-smertina.narod/biloe/nikita-struve/ahmatova1.jpgfoto.rambler/public/dima_4udik/20/Mandelstam/Mandelstam-web.jp
Я все-таки горд был за самую милую, за горькую землю, где я родился... 2
«Я все-таки горд был за самую милую, за горькую землю, где я родился...» Автор: Быков В. Давно отгремели залпы Великой Отечественной войны. Но о ней продолжают вспоминать, рассказывать, писать. И вспоминают и рассказывают, естественно, по-разному: по-своему, часто о своем. Что же важно в наши дни знать и помнить о войне? Что из рассказов о войне способно взволновать ум и сердце молодежи? На эти вопросы нам помогут ответить книги В.
Достопримечательности Бразилии
Text Text Ссылки (links): zateevo/userfiles/image/Strani/Brazil/brazil002.jpgbrazil/image.php?static_image_id=3721brazilssian-club/Image/Brazil/salvador_zaliv.jpgbrazil/image.php?static_image_id=1067i.bigmir/img/prikol/images/large/5/5/105555_148105.jp
Cataglyphis bicolor
Введение 1 Распространение 2 Описание 3 Навигация 4 Систематика Список литературы Введение Cataglyphis bicolor (англ. Sahara Desert ant) — вид африканских муравьёв-бегунков рода Cataglyphis, специализированных к обитанию в пустынях.
Декларация о преступлениях коммунизма
Введение 1 Подписавшие 3 Внешние ссылки Список литературы Введение Декларация о преступлениях коммунизма, является декларацией, подписанной 25 февраля 2010 года несколькими известными европейскими политиками, бывшими политическими заключенными и историками, в которой содержится призыв к осуждению коммунистических режимов[1] Декларация была принята в ходе международной конференции «Преступления коммунистических режимов», которая была организована правительством Чешской республики, при содействии «Института по изучению тоталитарных режимов», совместно с учреждениями-партнерами из рабочей группы «Европейской памяти и совести» и прошла в Чешском Сенате с 24 по 26 февраля 2010 года, под патронажем премьер-министра Чехии Ян Фишера.
Вороницын, Иван Петрович
Иван Петрович Вороницын (28 января 1885(18850128), Нарва — 1938 или 1939) — российский революционер и публицист. Сын подполковника П. И. Вороницына. Вырос в Житомире, в 17 лет ушёл из дома на почве революционных убеждений. Осенью 1902 г. в Харькове вступил в РСДРП. За распространение нелегальной литературы в 1903 г. выслан в Холмогоры, в июне 1904 г. бежал из ссылки и через Берлин и Женеву нелегально вернулся в Россию.
Группа историков Коммунистической партии Великобритании
Введение 1 Крупнейшие представители 2 Цели и исследовательские методы 3 Группа после 1956 года 4 Внешние ссылки Введение «Историческая группа» (англ. Communist Party Historians Group) — подразделение внутри Коммунистической партии Великобритании, состоящее из крупных британских историков-марксистов, способствовавших распространению «народной истории».
Ау Ко
Введение 1 Мифология 2 Во вьетнамской литературе 3 Значение 5 Внешние ссылки Введение Ау Ко (Хан ту: 嫗姬, Вu Cơ), согласно вьетнамским мифам, была бессмертной горной феей, взятой замуж Лак Лонг Куаном, драконом-государем Лаков. Она породила мешок яиц, из которых вылупились сто детей, известных как Белые Вьеты, или Юэ — предки вьетнамского народа.
Юдитта Чешская
Введение 1 Происхождение 2 Брак и дети 4 Внешние ссылки Введение Юдитта Чешская, также Юдифь Богемская, (чеш. Judita Českб, Judita Přemyslovna), (ок. 1202 — 2 июня 1230 года) — чешская принцесса из рода Пржемысловичей, дочь короля Чехии Пржемысла Оттокара I и Констанции Венгерской, жена герцога Каринтии Бернарда.
Грисвольд против Коннектикута
Введение 1 Предыстория 1.1 Тайлстон против Ульмана 1.2 Поу против Ульмана 2 Внешние ссылки Грисвольд против Коннектикута Введение Дуглас, присоединились Уоррен, Кларк, Бреннан, Голдберг
Книга о заселении Исландии
(«Ланднамабок», исл. Landnбmabуk) — один из важнейших источников по колонизации Исландии. История Основное внимание автором при составлении Ланднамабок уделяется генеалогическим спискам первопоселенцев, по большей части норвежского происхождения. Несмотря на отдельные неточности, Книга имеет огромное историческое значение.
Балтийская Антанта
План Введение 1 История 5 Внешние ссылки Введение Антанта Балтийская — пакт о сотрудничестве, согласии и взаимной помощи, заключённый между Литвой, Латвией и Эстонией.
Имперское Евангелие
План Введение 1 Описание 2 Галерея 4 Внешние ссылки Введение Имперское Евангелие или Коронационное Евангелие (нем. Reichsevangeliar (Krцnungsevangeliar)) — артефакт, церемониальное евангелие, является одним из экспонатов сокровищницы Хофбургского замка и символов Священной Римской Империи.
Похвала Витовту
«Похвала Витовту», «Сказание о великом князе Витовте» — памятник белорусской литературы XV в., одно из первых произведений белорусской светской панегирической прозы.
Виленская, Эмилия Самойловна
(род. 1909, станция Ханьдоухэдзы, в полосе отчуждения КВЖД — 1988) — историк. Биография Еврейка[1]. Училась в ИФЛИ (г. Москва). Была арестована 25 ноября 1938 года. Приговорена ОСО НКВД СССР к 5 годам ссылки: отбывала в селе Балахта Туруханского района Красноярского края. Освобождена в 1941 году.
Шварце, Бронислав
Бронислав Шварце (польск. Bronisław Antoni Szwarce, 7 октября 1834, имение Локрист в Бретани — 18 февраля 1904, Львов) — польский революционер, один из руководителей антирусского восстания 1863 года.
Продвижение сайта: ссылки
Ссылки, которые другие веб-мастера ставят на ваш сайт - это один из важнейших факторов, учитываемых поисковыми системами при ранжировании, то есть при определении места вашего сайта при выдаче по поисковым запросам.
Электронные таблицы Excel
Overview Диаграмма1 Диаграмма3 Диаграмма2 Лист1 Sheet 1: Диаграмма1 Sheet 2: Диаграмма3 Sheet 3: Диаграмма2 Sheet 4: Лист1 остатки денежных средств на счетах клиентов
Логическое проектирование
Логическое проектирование включает организацию информации на сайте, построение его структуры и навигации по разделам.
Оптимизация сайта: ошибки
Очень часто в дизайне сайта используется графический заголовок (шапка), то есть картинка во всю ширину страницы, содержащая, как правило, логотип компании, название и некоторую другую информацию.
Гипертекст и язык гипертекстовой разметки HTML
КОНТРОЛЬНАЯ РАБОТА на тему: “Гипертекст и язык гипертекстовой разметки HTML” Оглавление Введение В 1989 году гипертекст представлял новую многообещающую технологию, которая имела относительно большое число реализаций, с одной стороны, а с другой стороны, делались попытки построить формальные модели гипертекстовых систем, которые носили скорее описательных характер и были навеяны успехом реляционного подхода описания данных.
Что такое интернет
Text Text большая библиотека из разных книг … большая библиотека из разных книг на Web-узлах, состоящие из интернет-страниц