19 Февраля 2012 11:18

Меню с перекрывающимися вкладками HTML+CSS без javascript

Еще одна статья посвященная верстки меню в виде вкладок.



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

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


Отказываться от подсветки пунктов меню при наведении курсора мыши - клиента не устраивает. Просто нарезать на кусочки (как показано на рисунке), но тогда проблема с перекрывающимися частями меню.
Выхода нет делаем нормальные вкладки. ;)

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

HTML код вкладок
Код
<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> 
Здесь все просто и думаю понятно. Единственное на что следует обратить внимание, это на последовательность вкладок. Он перевернута. Т.е. начинается с последней а заканчивается первой. Это из-за того что выравнивание в данном методе идет по правому краю (float:right;).


CSS код для вкладок
Код
#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;
}



Немного прокомментирую в чем суть этого метода:

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

Код
#lineTabs li{
   float:right;
}



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

Код
#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;
}



Вот и все.
Просмотров:5637 0   Комментариев:0
'bitrix:asd.share.buttons' is not a component


IT-технологии
WEB сервера, настройка и конфигурирование, интересные решения
Программирование
WEB программирование, WEB дизайн, Кросс-браузерная верстка
Технические науки
Физика, Математика, Химия и все-то, что лежит в основе наших знаний