[CSS] Табы как в Windows Vista

Discussion in 'PHP' started by Trinux, 24 Aug 2006.

  1. Trinux

    Trinux Members of Antichat

    Joined:
    26 Nov 2004
    Messages:
    1,403
    Likes Received:
    296
    Reputations:
    364
    Сдеалем-ка меню в стиле висты.

    [​IMG]

    Да, вот именно такое =))) Не знаю зачем оно может пригодится, но в данной статье я хотел рассказать небольшой трюк, который недавно использовал. Лучшим примером будет как раз такое Tab-меню.

    Начнем. Для начала нам нужен обычный список:
    PHP:
    <ul id='tabs'>
      <
    li><a href=''>Formats</a></li>
      <
    li><a href=''>Location</a></li>
      <
    li><a href=''>Keyboards and Languages</a></li>
      <
    li><a href=''>Administrative</a></li>
    </
    ul>
    Замечательно.

    [​IMG]

    Теперь разберемся с CSS кодом. Для начала я позиционирую как список, так и все его элементы по левому борту, т.к. нам нужно горизонтальное меню. Одновременно немного настраиваю отображение списка. в частности делаю отступ от левого борта для первого таба и прописываю общую длинну списка:
    PHP:
    <style>
    #tab, #tab li, #tab a{
      
    float:left;
    }
    #tab{
      
    padding-left:2px;
      
    width:300px;
    }
    Замечательно.

    [​IMG]

    Теперь играемся с "a"... Пару бордеров, пару отступов итп:
    PHP:
    <style>
    #tab, #tab li, #tab a{
      
    float:left;
    }
    #tab{
      
    padding-left:2px;
      
    width:500px;
      list-
    style:none;
    }
    #tab a{
      
    padding:0 5px;
      
    height:17px;
      
    line-height:17px;
      
    color:black;
      
    text-decoration:none;
      
    border:1px solid #8B8C91;
      
    border-bottom:0;
      
    font-family:tahomaverdanaarial;
      
    font-size:12px;
      
    background:#EDECF4;
    }
    </
    style>
    замечательно =)))

    [​IMG]

    Теперь используем обычный трюк с class='active'. Элементу, который в данный момент активный, присваивается class='active' и пишется несколько другой CSS код.
    PHP:
    <ul id='tab'>
      <
    li><a href=''>Formats</a></li>
      <
    li class='active'><a href=''>Location</a></li>
      <
    li><a href=''>Keyboards and Languages</a></li>
      <
    li><a href=''>Administrative</a></li>
    </
    ul>
    код списка. Как вы могли заметить, li для "Location" приобрел class='active' (вы уж простите что так разжевываю, просто чтоб вопросов менье было у начинаюих =))
    и пишем CSS для него:
    PHP:
    #tab .active a{
      
    height:19px;
      
    line-height:19px;
      
    color:black;
      
    background:#fff;
    }
    Заметим, что активный элемент сполз вниз, а не возвысился над остальными, как было задумано.

    [​IMG]

    Чтобы поправить это достаточно присвоить margin-top:2px для всех элементов a, кроме активного. Т.е. опустить все элементы на 2 пикселя, кроме активного.

    [​IMG]

    куда лучше =))) ну а теперь тот самый трюк, о котором я и хотел поведать. Как можно заметить, каждый элемент a имеет бордеры справа и слева. Поэтому на стыке получается линия в 2 пикселя, что не очень красиво. Теоритически можно задать только левый или только правый бордер и конечному\начальному элементу присвоить другой класс и заливать оба бордера. Но у нас с вами один из элементов выше других, а значит он должен иметь оба бордера. Какзалось бы ситуация сложная, но все оказалось проще.
    PHP:
    #tab li{
      
    margin-right:-1px;
    }
    мы просто "сдвигаем" все элементы li списка на один пиксель влево, причем их абсолютная позиция не меняется. Т.е. элементы как бы наезжают друг на друга, но зато мы видим то, что хотели добиться


    [​IMG]

    Дело за малым. Осталось прорисовать горизонтальную черту списку и все будет готово. Тут я уже воспользуюсь не своим трюком, а трюком известного немецкого дизайнера Дэна (simplebits.com)
    Ведь если мы просто проведем border-bottom для списка, то получим такую картину

    [​IMG]

    Как видим, линия проходит и под активным элементом. Я долго марался с этим но понял что кроссбраузерно проблему решить нельзя с помощью border-bottom. Трюк Дэна прост - мы заливаем в бэкграунд списка эту линию и активный элемент смещаем чуть вниз. А точнее мы смещаем вниз все элементы, просто у остальных a элементов появляется нижний бордер. Но это не суть, для начала нам нужен 1 пиксель гифом нужного цвета - цвета линии, чтобы залить бэкграунд. делаем. Конечный код выглядит примерно так:

    PHP:
    <style type='text/css'>
    #tab, #tab li, #tab a{
      
    float:left;
    }
    #tab{
      
    padding-left:2px;
      
    width:500px;
      list-
    style:none;
      
    background:url('1px.gif'repeat-x left bottom;
    }
    #tab a{
      
    padding:0 5px;
      
    height:17px;
      
    line-height:17px;
      
    color:black;
      
    text-decoration:none;
      
    border:1px solid #8B8C91;
      
    font-family:tahomaverdanaarial;
      
    font-size:12px;
      
    background:#EDECF4;
      
    margin-top:2px;
    }
    #tab .active a{
      
    height:19px;
      
    line-height:19px;
      
    color:black;
      
    background:#fff;
      
    margin-top:0;
      
    border-bottom:1px solid #fff;
    }
    #tab li{
      
    margin-right:-1px;
    }
    </
    style>
    <
    ul id='tab'>
      <
    li><a href=''>Formats</a></li>
      <
    li class='active'><a href=''>Location</a></li>
      <
    li><a href=''>Keyboards and Languages</a></li>
      <
    li><a href=''>Administrative</a></li>
    </
    ul>
    [​IMG]

    посмотреть вживую можно тут:
    http://exot.ru/trin/vista.php
     
    _________________________
    9 people like this.
  2. r0

    r0 Elder - Старейшина

    Joined:
    17 Jul 2005
    Messages:
    450
    Likes Received:
    149
    Reputations:
    147
    Прикольно, спасибо
     
  3. Trinux

    Trinux Members of Antichat

    Joined:
    26 Nov 2004
    Messages:
    1,403
    Likes Received:
    296
    Reputations:
    364
    =) велком =)
    тут еще пару статей было, как будет время - еще ченить напишу.
    http://doci.nnm.ru/trinux/30.10.2005/php_css_alendar_sobytijnovostej
    http://doci.nnm.ru/trinux/26.01.2006/css_zakruglyaem_kraya_blokov_bez_kartinok
    http://doci.nnm.ru/trinux/27.01.2006/css_effekt_3d_dlya_tablic
     
    _________________________
    1 person likes this.
  4. Dracula4ever

    Dracula4ever Elder - Старейшина

    Joined:
    8 May 2006
    Messages:
    418
    Likes Received:
    183
    Reputations:
    26
    очень полезно =)
    +
     
  5. inSa(Ne)rd

    inSa(Ne)rd В Стране Чудес

    Joined:
    14 Mar 2005
    Messages:
    245
    Likes Received:
    1,368
    Reputations:
    168
    А зачем вообще нужна эта картинка? У тебя в именно последнем варианте как раз сделано, что для a рамка есть всюду и снизу тоже одного цвета
    #tab a{
    ...
    border:1px solid #8B8C91;
    ...
    }

    а у active снизу она закрашивается светлым просто..
    border-bottom:1px solid #fff;

    И так все выглядит хорошо. Убрать то свойство с картинкой
    background:url('1px.gif') repeat-x left bottom;
    И все равно получается все как задумано.. или я что то не вижу?
     
  6. Trinux

    Trinux Members of Antichat

    Joined:
    26 Nov 2004
    Messages:
    1,403
    Likes Received:
    296
    Reputations:
    364
    Да, как вариант, но одно. в случае, если вам нужно нарисовать линию до элементов и после, т.е. как закладки в папке:

    [​IMG]

    (видим что линия начинается не с первого таба, а на 3 пикселя ранее и не заканчивается последним, продалжается), то это достаточно трудно. Нужно еще 2 элемента списка, первый имеет 3 пикселя в длинну, второй - все остальное пространство. Да, моя погрешность, я написал стать относительно своего стиля float позиционирования. А в float я не могу указать 100% =( он его не понимает =( в дивном, абсолютном или табличном позиционировании этот трюк прошел бы, при float не получится - надо заранее знать всю длину. Хотя можно, конечно, поместить список в div без float, ограничить его размером и сделать overflow-x:hidden. Это кстати идея =))) над этим надо будет поработать...
    Но все равно проще намного залить пиксель в бэкграунд списка
     
    _________________________
    1 person likes this.
  7. madnet

    madnet Умиротворенный

    Joined:
    9 Dec 2004
    Messages:
    868
    Likes Received:
    343
    Reputations:
    423
    позновательные статьи.
    P.s. в Опере9 табы не работают.
     
    _________________________
  8. Trinux

    Trinux Members of Antichat

    Joined:
    26 Nov 2004
    Messages:
    1,403
    Likes Received:
    296
    Reputations:
    364
    2 madnet
    =((( можешь скрин скинуть?

    [​IMG]
     
    _________________________
  9. 9822

    9822 Banned

    Joined:
    3 Aug 2005
    Messages:
    273
    Likes Received:
    29
    Reputations:
    8
    Красиво, все статьи хорошии ;)
     
  10. madnet

    madnet Умиротворенный

    Joined:
    9 Dec 2004
    Messages:
    868
    Likes Received:
    343
    Reputations:
    423
    Они отображаются, но не переключаются.
     
    _________________________
  11. Trinux

    Trinux Members of Antichat

    Joined:
    26 Nov 2004
    Messages:
    1,403
    Likes Received:
    296
    Reputations:
    364
    2 madnet
    пишется простой яваскирпт, который меняется element.className у табов и они переключаются =))) я просто не стал делать =))) сегодня, может, напишу статейку =)
     
    _________________________
  12. madnet

    madnet Умиротворенный

    Joined:
    9 Dec 2004
    Messages:
    868
    Likes Received:
    343
    Reputations:
    423
    аааа блин, так бы и сказал =) я то думал в примере уже все написал, я ж сурс не смотрел=)

    Сори что сбил тебя с толку.
     
    _________________________
Loading...