Правильное меню «Вкладки» на HTML+CSS (без JavaScript)

Правильное меню «Вкладки» на HTML+CSS (без JavaScript)

В дебрях интернет можно встретить множество разнообразных меню — от простых списков и до различного рода сложноструктурированных flash-меню. Быстрыми темпами сокращается количество браузеров не соблюдающие стандарты w3c (да-да, Я про IE6), браузеры становятся более безопасными, тем самым всё меньшее количество пользователей отключают JavaScript в своих браузерах. Благодаря этому, чуть ли не каждый веб-разработчик старается «нашпиговать» своё меню JavaScript’овыми анимациями, а некоторые даже забывают, что данное можно было реализовать на чистом HTML+CSS, не нагружаю страницу лишним программным кодом. В этом посте хочу описать процесс создания меню аля «Вкладки», без JavaScripta на чистом HTML+CSS.

Встреча с «вкладками»

Так сложилось, что Я всё-таки переехал в Москву и устроился на работу HTML-верстальщиком. Буквально в первую же неделю понадобилось переверстывать горизонтальное меню навигации, которое было оформленно в виде вкладок (табов). Предыдущая реализация была «неуклюжей», разметка этого меню не знала про слово «семантика». Подсветка пункта меню при наведении на него курсора меняла бэкграунд не у текущего пункта, а фон всего меню, и делалось это с помощью JavaScript’а.

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

Меню на вкладках: Суть

Как многие знают: дизайнер придумывает дизайн и рисует макет страницы, верстальщик должен сверстать по макету HTML-страницу.

А теперь представте, что дизайнер придумал сделать меню на вкладках, нарисовал и отправил макет верстальщику. Верстальщик получает этот макет и начинает думать: «как сверстать?». Тут есть два варианта: отказаться от подсветки при наведении мыши и просто нарезать данный макет как на картинке:

Вкладки

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

Либо же сделать нормальные, правильные вкладки. Суть правильной вкладки в том, что доведя курсор до последнего пиксела вкладки, он(курсор) должен быть еще на этой же вкладке, а не на соседней. При чем левая(кому нравится можно правую) часть вкладки должна частично скрываться за вкладкой, которая находится левее, а при наведении на эту вкладку, она должна полностью выходить на передний план. В прочем, всё это хорошо продемонстрировано в примере из шапки данного поста.

HTML для вкладок

В HTML-разметке ничего сложного: стандартный ненумированный список и пару блоков для оформления.

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New Beautyfull Tabs from Belyash</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
</head>
<body>
    <div id="wrap">
        <ul id="lineTabs">
            <li><a href="#">4rd Tab</a></li>
            <li><a href="#">Third Tab</a></li>
            <li><a href="#" class="active">Second Tab</a></li>
            <li><a href="#">First Tab</a></li>
        </ul>
        <div id="content">
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard 	McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
        </div>
    </div>
</body>
</html>

Если Вы заметили, в разметке список начинается с последнего элемента и заканчивается первым — это из-за того, что в CSS я прописал обтекание по правому краю (float:right;).

Секреты CSS для вкладок

Сначала пойдем тем же путем, котором обычно пользуемся при созданиии горизонтальных меню: элементам списка задаем обтекание. Но как Я уже заметил, здесь необходимо задать обтекание справа (float:right;). Это первый секрет:

1. Обтекание справа для элементов списка — дает нам возможность производить наложение элементов справа-налево.

#lineTabs li{
    float:right;
}

2. Общую ширину (width+padding) вложенных тегов a в тег li делаем больше, чем у родительского элемента li.

#lineTabs li{
    margin:0px;
    padding:0px;
    width:110px;
}
#lineTabs li a{
    margin:0px;
    padding:7px 20px;
    width:90px;
}

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

#lineTabs li a{
    margin:0px -10px;
}

4. Задаем относительное позиционирование на случай для IE6.

#lineTabs li a{
    position:relative;
}

5. «Подымаем» вкладку под курсором над остальными, за счет z-index.

#lineTabs li a:hover{
    z-index:30;
}

Пожалуй это основные моменты для создания меню на вкладках. Всё остальноё оформляется подобно горизонтальным меню. Далее привожу полный CSS-код, который использовал Я для примера из шапки:

html, body{
    background:#eee;
    margin:0px;
    padding:0px;
}
#wrap{
    margin:30px auto;
    width:480px;
}
#lineTabs{
    height:30px;
    list-style:none;
    margin:0px auto;
    padding:0px;
    padding-right:30px;
    padding-left:10px;
    width:440px;
}
#lineTabs li{
    display:block;
    float:right;
    margin:0px;
    padding:0px;
    position:relative;
    overflow:visible;
    text-align:center;
    width:110px;
}
#lineTabs li a{
    background:url(images/tab.png);
    color:#dbdbdb;
    display:block;
    font:normal 14px arial;
    height:16px;
    margin:0px -10px;
    padding:7px 20px;
    position:relative;
    text-decoration:none;
    width:90px;
}
#lineTabs li a.active{
    background:url(images/tab_act.png);
    color:white;
    z-index:50;
}
#lineTabs li a:hover{
    background:url(images/tab_act.png);
    color:white;
    z-index:30;
}
#content{
    background:white;
    border:1px solid #4c9ac3;
    margin:0px;
    padding:10px;
    text-align:justify;
}

О кроссбраузерности и валидации

Правильный CSS!Valid XHTML 1.0 StrictВ коде ничего сложного, код без хаков и костылей, благодаря чему проходит валидацию и должне одинаково отображатся во всех браузерах. Лично проверять не стал. Единственный момент — это прозрачность png24 в IE6, но если уж на то пошло то можно воспользоваться pngfix или еще каким-нибудь аналогом.

Немного слов в конце

Я мог бы нарисовать красивые табы в фотошопе, нарисовать бэкграунд для странички, но Я не дизайнер, Я — верстальщик. И суть этого поста была показать как сделать правильные табы, а не как их красиво нарисовать. Зачастую люди оценивают способности верстальщика по «красивости» внешнего вида страницы, а него его исходного кода(разметки). Это не правильно и многие к сожалению этого не понимают.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *