РЕКЛАМА

  • Подробный видеокурс по Python

    Подробный видеокурс по Python

    Получи видеокурс по Python с упражнениями сейчас

    ПОДРОБНЕЕ

     

  • Как создаются сложные проекты на Java?

    Как создаются сложные проекты на Java?

    Узнай это в бесплатных видеоуроках

    ПОДРОБНЕЕ

     

  • Как открыть свою Web-студию?

    Как открыть свою Web-студию?

    Пошаговый Видеокурс с заданиями от владельца Web-студии

    ПОДРОБНЕЕ

     

  • Создание движка для сайта

    Создание движка для сайта

    Научись создавать профессиональные движки на PHP и MySQL!

    ПОДРОБНЕЕ

     

НОВИНКА+

Конструктор сайтов для бизнеса

Конструктор сайтов для бизнеса

Создайте сайт за 5 минут и начинайте продавать в интренете.

ПОДРОБНЕЕ

 

Английский Язык для Среднего Уровня

Английский Язык для Среднего Уровня

Научись говорить, понимать английский на слух. От профессиональных преподавателей на основе легендарных фильмов и песен.

ПОДРОБНЕЕ

 

Узнавайте о новостях по теме программирования

Aккордеонное меню средствами CSS3

Дата: 11.01.2014
Автор: Сергей
Источник: bulatlab.ru

Приветствую тебя, дорогой читатель!

 

В сегодняшней статье хочу  рассказать, как организовать простенькое аккордеонное меню только средствами CSS3,  без использования  всяких там скриптов и библиотек. Данное меню достаточно легковесно и работоспособно во всех современных браузерах. К сожалению (или к радости..:) ) не поддерживается глючными IE ниже 9 версии.

 

Меню реализовано с помощью замечательного псевдокласcа target, благодаря которому можно управлять любым элементом на html-страничке. В нашем случае такими элементами выступают объекты span с идентификаторами tab1, tab2, tab3, tab4 соответственно (для четырёх пунктов меню).

 

Данные идентификаторы одновременно выступают якорями для ссылок (которые по существу являются пунктами меню). Таким образом при нажатии на ссылку (пункт меню) происходит обращение к соответствующему объекту span, который в свою очередь стилизован с помощью псевдокласса target (в нашем случае в этом объекте раскрывается блок div на высоту 100px.)

 

Итак, для начала создадим разметку страницы:

 

Аккордеонное меню на CSS3

 

Теперь добавим соответствующую таблицу стилей accordion.css

 

*{ margin:0; padding:0;}
body {color:#fff;font:14px/1.3 Tahoma;}
.accordion {
    color: #000000;
    margin: 50px auto;
    position: relative;
    width: 300px;
}
.accordion span {
    display: none
}
.tabs {
    background-color: #FFFFFF;
    overflow: hidden;
}
.tabs dl dd  a{
   text-decoration: none;
   padding: 5px 40px;
   color:#777;
}
.tabs dl dd  a:hover{
color:#444;
text-decoration: underline;
}
.tabs dl dd  .pp {
    color:#444;
    background-color: #C8CEFF;
    border: 1px solid;
    border-color:#ccc;border-bottom-color:#aaa;
    display: block;
    font-size: 18px;
    line-height: 32px;
    padding: 5px 20px;
    text-decoration: none;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
    background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
    background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.tabs dl dd div {
    background-color: #FFF;
    height: 0;
    overflow: hidden;

    box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.tabs dl dd .pp:hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
     text-decoration: none;
}
.tabs dl dd .pp:active {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 30%);
}

#tab1:target ~.tabs .tab1 dd div {height: 100px;}
#tab2:target ~ .tabs .tab2 dd div {height: 100px;}
#tab3:target ~ .tabs .tab3 dd div {height: 100px;}
#tab4:target ~ .tabs .tab4 dd div {height: 100px;}

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

 

До встречи!

 

 

 

Оценить эту статью:   
Просмотров: 2832
Комментариев: 0
Оценка: (0)


Добавить комментарий
Поделитесь этой страничкой в социальных сетях