Как создать вкладку с помощью CSS и без изображений

Навигация по веб-страницам является формой списка, а навигация с вкладками похожа на горизонтальный список. Довольно просто создать горизонтальную навигацию с вкладками с помощью CSS, но CSS 3 дает нам еще несколько инструментов, чтобы они выглядели еще лучше.

Этот учебник проведет вас через HTML и CSS, необходимые для создания CSS-меню с вкладками. Нажмите на эту ссылку, чтобы увидеть, как она будет выглядеть.

В этом меню с вкладками используется нет изображений , только HTML и CSS 2 и CSS 3. Его можно легко редактировать, чтобы добавить дополнительные вкладки или изменить текст в них.

Поддержка браузера

Это меню вкладок будет работать во всех основных браузерах, включая Firefox, Safari, Opera, Edge и Chrome.

Написать свой список меню

Все навигационные меню и вкладки – это просто неупорядоченный список. Поэтому первое, что вы хотите сделать, это написать неупорядоченный список ссылок, куда вы хотите перейти с помощью вкладок.

В этом руководстве предполагается, что вы пишете свой HTML в текстовом редакторе и знаете, где разместить HTML для вашего меню на веб-странице.

Напишите свой неупорядоченный список следующим образом:

    •  CSS 3 
    •  ID = "текущий"> Вкладки 
    •  Для 
    •  Меню 
  •  class = "tablist"> 

    Вы заметите, что код вызывает две вещи:

     class = "tablist" 

    и

     id = "current". 

    Первый – требуется . Если вы не поместите класс tablist в неупорядоченный список, вкладки не будут работать. Второй не является обязательным. Поместите id = “current” на любую вкладку, которую вы хотите выделить на этой странице. Мы обычно используем это, чтобы выделить страницу, на которой мы находимся, но вы можете использовать ее, чтобы выделить самую важную вкладку. Или вы можете удалить его полностью.

Начните редактировать свою таблицу стилей

Вы можете использовать либо внешнюю таблицу стилей, либо внутреннюю таблицу стилей. Пример страницы меню использует внутреннюю таблицу стилей в документе.

Сначала мы создадим стиль UL

Здесь мы используем класс

в HTML. Вместо того, чтобы стилизовать тег UL, который бы стилизовал все неупорядоченные списки на вашей странице, вы должны стилизовать только класс UL.

Итак, первая запись в вашем CSS должна быть:

Нам нравится вставлять конечную фигурную скобку (}) заранее, поэтому мы не забудем это позже.

Хотя мы используем неупорядоченный тег списка для списка меню вкладок, но мы не хотим, чтобы в нем появлялись маркеры или цифры. Поэтому первый стиль, который вы должны добавить, – это.

Это говорит браузеру, что, хотя это список, это список без предопределенных стилей (таких как маркеры или цифры).

Затем вы можете установить высоту вашего списка, чтобы он соответствовал пространству, которое вы хотите заполнить. Мы выбрали 2em для нашей высоты, так как это в два раза больше стандартного размера шрифта и дает примерно половину над и под текстом вкладки.

Но вы можете установить ширину на любой размер, который вы хотите. UL-теги автоматически будут занимать 100% ширины, поэтому, если вы не хотите, чтобы он был меньше текущего контейнера, вы можете не указывать ширину.

Наконец, если ваша основная таблица стилей не имеет предустановок для тегов UL и OL, вы захотите вставить их. Это означает, что вы должны отключить границы, поля и отступы в вашем UL.

Если вы уже сбросили тег UL, вы можете изменить поля, отступы или границы, чтобы они соответствовали вашему дизайну.

Ваш последний класс .tablist должен выглядеть так:

Редактирование элементов списка LI

После того, как вы создали свой неупорядоченный список, вам нужно стилизовать теги LI внутри него. В противном случае они будут действовать как стандартный список, и каждый переместится на следующую строку без правильного размещения вкладок.

Сначала настройте свойство стиля:

Затем вы хотите плавать ваши вкладки так, чтобы они выровнялись на горизонтальной плоскости.

И не забудьте добавить поле между вкладками, чтобы они не сливались вместе.

Ваши стили li должны выглядеть так:

Создание вкладок в виде вкладок с помощью CSS 3

Чтобы выполнить большую часть тяжелой работы в этой таблице стилей, мы ориентируемся на ссылки в неупорядоченном списке. Браузеры признают, что ссылки на веб-странице делают больше, чем другие теги, поэтому более старые браузеры легче соответствуют таким вещам, как состояния наведения, если вы прикрепляете их к тегу привязки (ссылкам). Итак, сначала напишите ваши свойства стиля:

Поскольку эти вкладки должны действовать как вкладки в приложении, вы хотите, чтобы вся область вкладки была интерактивной, а не только связанный текст. Для этого вам нужно преобразовать тег A из его обычного «встроенного» состояния в блочный элемент.

(Если вам интересно узнать больше о разнице, прочитайте

,)

Затем, простой способ заставить ваши вкладки быть симметричными друг другу, но при этом изгибаться, чтобы соответствовать ширине текста, состоит в том, чтобы сделать правый и левый отступы одинаковыми. Мы использовали сокращенное свойство padding, чтобы установить верх и низ на 0, а правое и левое на 1em.

Мы также решили удалить подчеркивание ссылки, чтобы вкладки выглядели как ссылки. Но если ваша аудитория может быть смущена этим, пропустите эту строку.

Помещая тонкие рамки вокруг вкладок, они выглядят как вкладки. Мы использовали сокращенное свойство border, чтобы обвести границу вокруг всех четырех сторон

А потом использовал

свойство удалить его снизу.

Затем мы внесли некоторые коррективы в шрифт, цвет и цвет фона вкладок. Установите эти стили, которые соответствуют вашему сайту.

Все вышеперечисленные стили должны идти в селекторе

правило, чтобы они влияли на теги привязки в целом. Затем, чтобы вкладки выглядели более кликабельными, вы должны добавить несколько правил состояния.

Нам нравится менять цвет текста и фона, чтобы вкладка всплывала при наведении на нее курсора.

И мы добавили еще одно напоминание браузерам, что мы хотим, чтобы ссылка оставалась не подчеркнутой.

Другой распространенный метод – снова включить подчеркивание при наведении курсора на вкладку. Если вы хотите сделать это, измените его на

Но где же CSS 3?

Если вы обратили внимание, вы, вероятно, заметили, что в таблице стилей не использовались стили CSS 3. Это имеет преимущество работы в любом современном браузере, включая Internet Explorer. Но это не делает вкладки похожими на квадратные поля. Добавив вызов border-radius в стиле CSS 3 (и связанные с ним вызовы для браузера), вы можете сделать края округленными, чтобы они больше походили на вкладки в папке манилы.

Стили, которые вы должны добавить к

Правило:

Вот последние правила стиля, которые мы написали:

Благодаря этим стилям у вас есть меню с вкладками, которое работает во всех основных браузерах и выглядит как красивые печатные вкладки в браузерах, совместимых с CSS 3. На следующей странице представлен еще один вариант, который вы можете использовать, чтобы одеть его еще больше.

Выделите текущую вкладку

В созданном нами HTML-коде у UL был один элемент списка с идентификатором. Это позволяет придать одному LI стиль, отличный от остальных. Наиболее распространенная ситуация – выделить текущую вкладку в некотором роде. Еще один способ думать об этом заключается в том, что вы хотите выделить серые вкладки, которые не являются активными. Затем вы меняете местонахождение идентификатора на разных страницах.

Мы стилизуем как тег #current A, так и #current A: hover sta, так что они немного отличаются друг от друга. Вы можете изменить цвет, цвет фона, даже высоту, ширину и отступы этого элемента. Делайте любые изменения, которые имеют смысл в вашем дизайне.

И вы сделали! Вы только что создали меню с вкладками для своего сайта.

Оцените статью
Solutics.ru
Добавить комментарий