Навигация на веб-страницах - это форма списка, а вкладка навигации похожа на горизонтальный список. Довольно легко создать горизонтальную навигацию с вкладками с CSS, но CSS 3 дает нам еще несколько инструментов, чтобы они выглядели еще лучше.
В этом учебном пособии мы рассмотрим HTML и CSS, необходимые для создания меню с вкладками CSS. Нажмите на эту ссылку, чтобы увидеть, как она будет выглядеть.
Это меню с вкладками используетнет изображений, только HTML и CSS 2 и CSS 3. Его можно легко редактировать, чтобы добавить дополнительные вкладки или изменить текст в них.
Поддержка браузера
Это меню вкладки будет работать ввсе основные браузеры, Internet Explorer не будет показывать округленные углы, но в остальном он будет показывать вкладки, такие как Firefox, Safari, Opera и Chrome.
Написать свой список меню
Все навигационные меню и вкладки - это действительно неупорядоченный список. Итак, первое, что вы хотите сделать, это написать неупорядоченный список ссылок, куда вы хотите, чтобы ваша вкладка навигации была включена.
В этом учебнике предполагается, что вы пишете свой HTML в текстовом редакторе и знаете, где разместить HTML для своего меню на своей веб-странице.
Напишите свой неупорядоченный список следующим образом:
класс = "tablist">CSS 3ID = "текущие"> ВкладкиЗаменю
класс = "tablist"а такжеID = "ток".Первый требуется, Если вы неtablistкласс в вашем неупорядоченном списке, вкладки не будут работать. Второй вариант является необязательным. ПоместитеID = "ток"на какой вкладке вы хотите быть выделены на этой странице. Обычно мы используем это, чтобы выделить страницу, на которой мы находимся, но вы можете использовать ее для выделения самой важной вкладки. Или вы можете полностью удалить его.
Начать редактирование таблицы стилей
Вы можете использовать либо внешнюю таблицу стилей, либо внутреннюю таблицу стилей. Страница меню примера использует внутреннюю таблицу стилей в
документа.Сначала мы будем стилизовать UL
Здесь мы используем классtablist в HTML. Вместо того, чтобы стилизовать тег UL, который будет стилизовать все неупорядоченные списки на вашей странице, вы должны стилизовать только класс UL.tablist Итак, первая запись в вашем CSS должна быть:
.tablist {}
Мы хотели бы добавить конец фигурной скобки (}) раньше времени, поэтому мы не забудем это позже.
Хотя мы используем тэг неупорядоченного списка для списка меню вкладок, но мы не хотим, чтобы в нем появлялись пули или числа. Таким образом, первый стиль, который вы должны добавить, - это.список-стиль: нет; Это говорит браузеру, что в то время как это список, это список без заранее определенных стилей (например, пуль или цифр).
Затем вы можете установить высоту своего списка в соответствии с пространством, которое вы хотите заполнить. Мы выбрали 2em для нашей высоты, так как это вдвое превышает стандартный размер шрифта и дает примерно половину em выше и ниже текста вкладки.высота: 2em; Но вы можете установить ширину любого размера. Теги UL будут автоматически занимать 100% от ширины, поэтому, если вы не хотите, чтобы он был меньше текущего контейнера, вы можете оставить ширину.
Наконец, если ваша таблица стилей мастеров не имеет пресетов для тегов UL и OL, вы захотите их вставить. Это означает, что вы должны отключить границы, поля и отступы на вашем UL. обивка: 0; Маржа: 0; border: none; Если вы уже сбросили тег UL, вы можете изменить поля, отступы или границы на то, что соответствует вашему дизайну.
Ваш окончательный класс .tablist должен выглядеть следующим образом:
.tablist {list-style: none; высота: 2em; обивка: 0; Маржа: 0; border: none; }
Редактирование элементов списка LI
После того, как вы создали свой неупорядоченный список, вам нужно стилизовать теги LI внутри него. В противном случае они будут действовать как стандартный список, и каждый переход на следующую строку не будет правильно помещать ваши вкладки.
Сначала настройте свойство стиля:
.tablist li {}
Затем вы хотите поплавать вашими вкладками так, чтобы они выстроились на горизонтальной плоскости. плыть налево;
И не забудьте добавить некоторый запас между вкладками, чтобы они не сливались вместе. Маржа направо: 0.13em;
Ваши стили li должны выглядеть так:
.tablist li {float: left; Маржа направо: 0.13em; }
Как сделать вкладки похожими на вкладки с CSS 3
Чтобы выполнить большую часть тяжелого подъема в этой таблице стилей, мы ориентируемся на ссылки в неупорядоченном списке. Браузеры признают, что ссылки делают больше на веб-странице, чем другие теги, поэтому проще заставить старые браузеры выполнять действия, подобные состояниям наведения, если вы прикрепляете их к тегу привязки (ссылки). Поэтому сначала напишите свои свойства стиля:
.tablist li a {} .tablist li a: hover {}
Поскольку эти вкладки должны действовать как вкладки в приложении, вы хотите, чтобы вся область вкладки была интерактивной, а не только связанный текст. Для этого вам нужно преобразовать тег A из обычного «встроенного» состояния в элемент блока. Дисплей: блок; (Если вам интересно узнать больше об этой разнице, прочитайте «Блокировка уровня» и «Встроенные элементы»).
Затем простой способ заставить ваши вкладки быть симметричными друг с другом, но все же сгибаться, чтобы соответствовать ширине текста, - это сделать правое и левое дополнение одинаковым. Мы использовали свойство сокращения пробелов, чтобы установить верх и низ в 0, а справа и слева - 1em. padding: 0 1em;
Мы также решили удалить ссылку, подчеркнув, что вкладки выглядят не так, как ссылки.Но если ваша аудитория может быть смущена этим, оставьте эту строку. ссылка-украшение: нет;
Поставив тонкую границу вокруг вкладок, она делает их похожими на вкладки. Мы использовали свойство сокращения границ, чтобы разместить границу по всем четырем сторонам border: 0.06em solid # 000; И затем использовал свойство border-bottom, чтобы удалить его снизу. границы снизу: 0;
Затем мы внесли некоторые изменения в шрифт, цвет и цвет фона вкладок. Установите их в соответствии со стилями, которые соответствуют вашему сайту. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; цвет: # 000; цвет фона: #ccc;
Все вышеуказанные стили должны идти в селекторе.tablist li a, правило, чтобы они влияли на привязывающие метки в целом. Затем, чтобы вкладки выглядели более интерактивными, вы должны добавить несколько правил штата.tablist li a: hover.
Мы хотели бы изменить цвет текста и фона, чтобы сделать вкладку нажатой над ней. фон: # 3CF; цвет: #fff;
И мы включили другое напоминание браузерам, что мы хотим, чтобы ссылка оставалась не подчеркнутой. текст-отделка: нет; Другой распространенный метод - включить подчеркивание, когда вы наводите указатель мыши на вкладку. Если вы хотите это сделать, измените его на текст-отделка: подчеркнуть;
Но где CSS 3?
Если вы обратили внимание, вы, вероятно, заметили, что в таблице стилей не было стилей CSS 3. Это имеет то преимущество, что вы работаете в любом современном браузере, включая Internet Explorer. Но это не означает, что вкладки выглядят как нечто большее, чем квадратные. Добавляя граничный радиус вызова стиля CSS 3 (и связанные с ним вызовы для браузера), вы можете сделать края округлыми, чтобы больше походить на вкладки в папке manila.
Стили, которые вы должны добавить в .tablist li a правило: -webkit-граница-верхний правый-радиус: 0.50em; -webkit-границы верхнего левого радиуса: 0.50em; -moz-границы радиуса-topright: 0.50em; -moz-границы радиуса-TopLeft: 0.50em; границы верхнего правого радиуса: 0.50em; границы верхнего левого радиуса: 0.50em;
Это окончательные правила стиля, которые мы написали:
.tablist li a {display: block; padding: 0 1em; текст-отделка: нет; border: 0.06em solid # 000; границы снизу: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; цвет: # 000; цвет фона: #ccc; / * CSS 3 элементы * / webkit-border-top-right-radius: 0.50em; -webkit-границы верхнего левого радиуса: 0.50em; -moz-границы радиуса-topright: 0.50em; -moz-границы радиуса-TopLeft: 0.50em; границы верхнего правого радиуса: 0.50em; границы верхнего левого радиуса: 0.50em; } .tablist li a: hover {background: # 3cf; цвет: #fff; текст-отделка: нет; }
В этих стилях у вас есть меню с вкладками, которое работает во всех основных браузерах и выглядит как красивые печатные вкладки в CSS 3-совместимых браузерах. На следующей странице вы получите еще один вариант, который вы можете использовать, чтобы одеть его еще больше.
Выделите текущую вкладку
В HTML, который мы создали, UL имел один элемент списка с идентификатором. Это позволяет вам дать LI другой стиль от остальных. Наиболее распространенной ситуацией является то, что текущая вкладка каким-то образом выделяется. Другой способ подумать об этом - это то, что вы хотите оторвать вкладки, которые не являются живыми. Затем вы меняете место нахождения идентификатора на разных страницах.
Мы создаем как тег #current A, так и #current A: hover sta, так что оба они немного отличаются. Вы можете изменить цвет, цвет фона, даже высоту, ширину и дополнение этого элемента. Сделайте любые изменения, имеющие смысл в вашем дизайне.
.tablist li # current a {background-color: # 777; цвет: #fff; } .tablist li # current a: hover {background: # 39C; }
И вы сделали! Вы только что создали меню с вкладками для своего сайта.
