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

Приветствую Вас, дорогие читатели моего маленького блога!

Сегодня речь пойдет не о программировании а о верстке. Будем делать себе на сайт табы. Табы — это миниатюрные вкладки, в которых расположен разный контент. Они занимают очень мало места, но контента вмещается много. Обычно их располагают в сайдбаре (боковой колонке) сайта.

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

Итак — делаем табы!

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

Шаг 1

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

Шаг 2

Следующим шагом нам нужно создать хотя бы приблизительную Html верстку, которая вглядит следующим образом:

<h4>Heading</h4>
    <div>
        <ul>
            <li><a>Tab</a></li>
            <li><a>Tab</a></li>
            <li><a>Tab</a></li>
        </ul>
        <div>Content for Tab 1</div>
        <div>Content for Tab 2</div>
        <div>Content for Tab 3</div>
    </div>
</div>

Здесь мы заключили все в тег <div> для последующего перемщения его в любое место нашего сайта. Также использовали для заголовка тег <h4>, а для вкладок использовали список, далее находятся три дива в них будет располагать контент вкладок.

Шаг 3

Добавляем к нашему Html Css, надеюсь подключение CSS в HTML не нужно описывать. После чего выделяем и сохранияем фон из PSD документа как отдельное изображение в той же директории где и Html, я обозвал свою фоновую картинку backraund.jpg. Далее прописываем для body следующее:

body {
        background-image:url(background.jpg);
        background-repeat:no-repeat;
        background-position:top center;
        background-color:#657077;
        margin:40px;
}

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

Шаг 4

Далее мы добавляем к каждому элементу свои классы и идентификаторы для дальнейшей манипуляции ими с помощю CSS и JavaScript то есть class и id, где это необходимо:

<div id="tabbed_box_1" class="tabbed_box">
<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">
        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Archives</a></li>
            <li><a href="" id="tab_2">Topics</a></li>
            <li><a href="" id="tab_3">Pages</a></li>
        </ul>
        <div id="content_1" class="content">Content for Tab 1</div>
        <div id="content_2" class="content">Content for Tab 2</div>
        <div id="content_3" class="content">Content for Tab 3</div>
    </div>
</div>

Единственное что бы я хотел бы здесь отметить это класс active который будут иметь активные вкладки, ну а остальное надеюсь понятно. Сейчас наше все выглядит следующим образом:

Шаг 5

Теперь мы начнем описывать все классы и идентификаторы, а начнем мы с самого верхнего уровня это <div id=”tabbed_box” class=”container”> пропишем ему позицию, так чтобы он стоял в центре нашего экрана:

#tabbed_box {
        margin: 0px auto 0px auto;
        width:300px;
}

Шаг 6

Далее описываем наш заголовок прописываем ему шрифты и т.д. :

.tabbed_box h4 {
        font-family:Arial, Helvetica, sans-serif;
        font-size:23px;
        color:#ffffff;
        letter-spacing:-1px;
        margin-bottom:10px;
}
.tabbed_box h4 small {
        color:#e3e9ec;
        font-weight:normal;
        font-size:9px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        position:relative;
        top:-4px;
        left:6px;
        letter-spacing:0px;
}

Ну здесь вроде все понятно ничего сложного объяснять ничего не буду поехали дальше.

Шаг 7

Далее описываем внутренний div с классом tabbed_area описываем:

.tabbed_area {
        border:1px solid #494e52;
        background-color:#636d76;
        padding:8px;
}

Здесь мы описали границы с размером в 1пиксель и цвета #494e52, также описали для него серый фон и внутренний отступ в 8 пикселей то есть padding.

Шаг 8

Теперь мы наконец то перейдем к вкладкам. Нам нужно будет проделать большой путь перед тем как наши элементы li станут похожи на вкладки:

ul.tabs {
        margin:0px; padding:0px;
}
ul.tabs li {
        list-style:none;
        display:inline;
}

В этом коде описано то что ul с классом tabs не должен иметь не внутренних не внешних отступов, также что li элементы находящиеся в списке с классом tabs не имеют картинок слева которые появляются по умолчанию, также для этих элементов описано такое свойство как display по умолчанию оно равно block, но для того чтобы элементы списка то есть li располагались горизонтально мы display приравниваем inline.

Шаг 9

Конечно наши вкладки выглядят пока не очень, но мы это сейчас исправим, для их позиционирования мы использовали <li> элемент, но для их стилизации будем использовать элемент <a> которые находятся в li:

ul.tabs li a {
        background-color:#464c54;
        color:#ffebb5;
        padding:8px 14px 8px 14px;
        text-decoration:none;
        font-size:9px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-weight:bold;
        text-transform:uppercase;
        border:1px solid #464c54;
}
ul.tabs li a:hover {
        background-color:#2f343a;
        border-color:#2f343a;
}
ul.tabs li a.active {
        background-color:#ffffff;
        color:#282e32;
        border:1px solid #464c54;
        border-bottom: 1px solid #ffffff;
}

Здесь мы описали элементы <a> установили им фон, определили шрифты, убрали подчеркивание, описали отступы и т.д. Также описали для них Hover то есть при наведении на вкладку курсора фон и границы вкладки будут менять свой цвет. Далее описан класс active он нужен, как я уже упоминал, для выделения активной вкладки. Сейчас все наше дело должно выглядеть следующим образом:

Шаг 10

Следующее что мы должны сделать так чтобы отображался только тот контент вкладка которого сейчас активна для этого нам нужно контенту других вкладок прописать display:none после чего они будут не видны, затем мы с помощью JavaScript’а будем налету менять dispaly:none на dispaly:block ну это потом. Сейчас пока ппишем:

.content {
        background-color:#ffffff;
        padding:10px;
        border:1px solid #464c54;
}
#content_2, #content_3 { display:none; }

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

Шаг 11

Изменяем ul.tabs следующим образом для того чтобы они не пересекались с контентом:

ul.tabs {
        margin:0px; padding:0px;
        margin-top:5px;
        margin-bottom:6px;
}

Шаг 12

Теперь наполняем наши вкладки осмысленным контентом у меня это будут списки ссылок меняем Html код на:

<div id="tabbed_box_1" class="tabbed_box">
        <h4>Browse Site <small>Select a Tab</small></h4>
        <div class="tabbed_area">
        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Topics</a></li>
            <li><a href="" id="tab_2">Archives</a></li>
            <li><a href="" id="tab_3">Pages</a></li>
        </ul>
        <div id="content_1" class="content">
            <ul>
                <li><a href="">HTML Techniques <small>4 Posts</small></a></li>
                <li><a href="">CSS Styling <small>32 Posts</small></a></li>
                <li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
                <li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
                <li><a href="">Site News <small>6 Posts</small></a></li>
                <li><a href="">Web Development <small>8 Posts</small></a></li>
            </ul>
        </div>
        <div id="content_2" class="content">
            <ul>
                <li><a href="">December 2008 <small>6 Posts</small></a></li>
                <li><a href="">November 2008 <small>4 Posts</small></a></li>
                <li><a href="">October 2008 <small>22 Posts</small></a></li>
                <li><a href="">September 2008 <small>12 Posts</small></a></li>
                <li><a href="">August 2008 <small>3 Posts</small></a></li>
                <li><a href="">July 2008 <small>1 Posts</small></a></li>
            </ul>
        </div>
        <div id="content_3" class="content">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contribute</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Ну и для их красоты пишем им следущие стили:

.content ul {
        margin:0px;
        padding:0px 20px 0px 20px;
}
.content ul li {
        list-style:none;
        border-bottom:1px solid #d6dde0;
        padding-top:15px;
        padding-bottom:15px;
        font-size:13px;
}
.content ul li a {
        text-decoration:none;
        color:#3e4346;
}
.content ul li a small {
        color:#8b959c;
        font-size:9px;
        text-transform:uppercase;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        position:relative;
        left:4px;
        top:0px;
}
.content ul li:last-child {
  border-bottom:none;
}

Я это дело описывать не буду так как это не урок осоздании крассивых списков, тот кто не знает css может просто скопировать код, а тот кто знает все поймет единственное что я бы хотел отметить это .content ul li:last-child с помошью этого мы удбираем последнюю линию в списке, а так как это CSS3 то в старых браузерах и некоторых новых она все таки будет стоять:

Шаг 13

С CSS покончено теперь нам нужно создать всего лишь одну JavaScript Функцию, а вот и она:

function tabSwitch(new_tab, new_content) {

        document.getElementById('content_1').style.display = 'none';
        document.getElementById('content_2').style.display = 'none';
        document.getElementById('content_3').style.display = 'none';
        document.getElementById(new_content).style.display = 'block';   

        document.getElementById('tab_1').className = '';
        document.getElementById('tab_2').className = '';
        document.getElementById('tab_3').className = '';
        document.getElementById(new_tab).className = 'active';          
}

Коротко опишем логику функции. Как вы заметили нашей функции нужно передать два значения это new_tab и new_content, так вот передать мы ей должны id нажатой вкладки и соответствующий контент этой вкладки, далее функция убирает у всех вкладок класс active, даже нажатой так как мы не знаем которая вкладка активна, и ставим класс active переданному id тоесть new_tab после чего она становится белого цвета и т.д. Соответсятвенно тоже самое проделываем для контента только мы ему ставим не класс а делаем его видимым, а остольной контент невидимым с помошью dispaly:none;

Последний шаг 14

Теперь нам нужно сделать так чтобы на клике по вкладке выполнялась функция tabSwitch() и передовались ей id текущей вкладки и id соответсвющего вкладке контента, для этого изменяем список вкладок следующим образом:

<ul class="tabs">
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">Topics</a></li>
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Archives</a></li>
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">Pages</a></li>
</ul>

Вот такие получились у нас табы!

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

На этом разрешите откланятся! С Вами был — ваш Юрич!

P.S. В следующей статье мы с Вами разберем как сделать календарь посредством PHP и CSS. До скорой встречи!

Юрич:

Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Похожие записи

Как добавить CSS в WordPress, легкий путь

Понимание Bootstrap: как это работает и что нового

Создание адаптивного меню в WordPress для мобильных устройств

Круглые изображения с помощью CSS3

Адаптивная многоколоночная форма

Основные CSS Границы