Вы здесь: Главная > CSS > Вкладки CSS

Вкладки CSS

Опубликовано автором Просмотры: 18

Модная форма дизайна навигации ─ меню с вкладками — группа ссылок, которые создают впечатление выступов, прикреплённых к различным областям невидимого контента.

Навигация с вкладками, выполненная из элементов списка и dollops CSS

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

Мы собираемся попробовать несколько разных способов работы с CSS, но будем придерживаться следующей базовой структуры HTML:

<header> 

<h1>Tabs</h1>
<nav>
    <ul>
        <li><a href="this.html">This</a></li>
        <li id="selected"><a href="that.html">That</a></li>
        <li><a href="theOther.html">The Other</a></li>
        <li><a href="banana.html">Banana</a></li>
    </ul>
</nav>

</header>

<section id="content">
    <p><!-- Big lovely oodles of content --></p>
<section>

Теперь, что мы хотим сделать с этим кодом HTML, так это превратить каждый элемент списка во вкладку, при этом выбранный элемент будет выглядеть как часть соответствующей области содержимого.

Прежде всего, мы можем удалить маркеры элементов списка и обнулить поля и отступы ul элемента:

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

Теперь перейдём к делу…

Встроенный список элементов

Самое очевидное, что мы можем сделать, это сделать список горизонтальным. Самое простое решение для этого ─ установить для свойства блоков display, созданных элементами li, значение inline:

nav li {
    display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 5px 0 0;
}

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

Теперь мы можем сделать все немного аккуратнее, заполнив поля элементов a.

nav li a {
    padding: 0 10px;
}

Преимущество настройки заполнения поля a элемента, а не полей элементов li, заключается в том, что вкладка становится кликабельной по всей ширине.

Пока вкладки ни на чём не расположены, поэтому мы можем добавить границу к содержимому section:

#content {
    border: 1px solid;
}

Но не хватает одной существенной вещи. Как бы то ни было, вкладки просто расположены в верхней части окна содержимого, и все они выглядят практически одинаково. Что нам нужно сделать, так это сделать так, чтобы “активная” вкладка — та, которая относится к странице, на которой мы находимся, — выглядела так, как будто она является частью поля содержимого, например, вкладкой сбоку разделительной карточки.

Поскольку вертикальное заполнение во встроенных полях на самом деле ничего не выделяет вокруг себя, мы можем просто сделать это:

#selected {
    padding-bottom: 1px; 
    background: white;
}

Это увеличивает нижнюю часть поля элемента li с идентификатором “selected” на один пиксель, что выводит его за верхнюю границу поля содержимого. Поскольку цвет фона белый (при условии, что цвет фона поля содержимого также белый), создаётся иллюзия, что вкладка и её граница являются частью поля содержимого.

Простые вкладки с использованием display: inline

Плавающий список элементов

Метод отлично подходит для базовых вкладок. Цвета, границы, оформление текста можно изменять по своему усмотрению. Однако, когда дело доходит до заполнения, всё идёт наперекосяк. По той же причине, по которой вкладка “выбрано” работает путём переноса на поле содержимого, заполнение не может быть применено к начальным состояниям вкладки. Они просто не будут себя так вести.

Итак, если мы хотим сделать что-то более интересное с вкладками, нам нужно выровнять по горизонтали  элементы списка другим способом:

#header li {
    float: left;
    border: 1px solid;
    border-bottom-width: 0;
    margin: 0 5px 0 0;
}

Это то же самое, что и раньше, за исключением того, что вместо отображения встроенных полей элементов li мы перемещаем их влево.

Выполнение этого нарушает некоторые правила в других местах, поэтому, прежде чем мы сможем продолжить, нам нужно очистить поле содержимого от злой хватки float, а затем нам нужно избавиться от любых полей над списком:

#content {
    border: 1px solid;
    clear: both;
}

h1 {
    margin: 0;
    padding: 0 0 10px 0;
}

Мы почти освоили этот метод, но вместо того, чтобы применять дополнение к выбранному элементу списка, как мы делали при использовании подхода к элементу встроенного списка (который здесь просто дополнял бы элементы, потому что плавающее поле имеет тип отображения “блок”), мы собираемся поднять всё это и уменьшить на один пиксель:

#selected {
    position: relative;
    top: 1px;
    background: white;
}

Итак, теперь всё выглядит почти так же, как и при использовании встроенного метода. Одно небольшое отличие заключается в том, что выбранная вкладка на один пиксель ниже остальных, потому что она была сдвинута вниз, чтобы закрыть нижнюю строку. Чтобы избежать этого, вы можете применить блок последнего объявления с позиционированием и цветом фона к ссылке внутри элемента списка (#selected a) вместо самого элемента списка (#selected), что может достичь более желаемого эффекта.

Другой подход к борьбе с контролем над размером вкладок заключается в использовании display: inline-block.

Чтобы все выглядело лучше…

Есть небольшие вещи, которые мы можем сделать, чтобы эти вкладки выглядели лучше, такие как удаление подчеркиваний, предоставление разных цветов для границ, изменение цвета фона при наведении курсора и т.д., Что может сделать вкладки более различимыми, а вкладку “активный” более заметной.

Играем вокруг

Конечно, вкладки не обязательно должны иметь такие чёткие границы, как в приведённых выше примерах. Основные принципы остаются теми же — вы устанавливаете элементы горизонтального списка, а затем оформляете их по своему усмотрению.

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

Узкие вкладки

И вкладки также не обязательно должны иметь квадратные 90-градусные углы. Применение border-radius к верхнему левому и верхнему правому углам каждой вкладки сделает их ещё более похожими на разделительные карточки, которым мы так хотим подражать.

Страницы в тему:

Примеры CSS:

Добавить комментарий