Aккордеонное меню средствами CSS3
Приветствую тебя, дорогой читатель!
В сегодняшней статье хочу рассказать, как организовать простенькое аккордеонное меню только средствами CSS3, без использования всяких там скриптов и библиотек. Данное меню достаточно легковесно и работоспособно во всех современных браузерах. К сожалению (или к радости..:) ) не поддерживается глючными IE ниже 9 версии.
Меню реализовано с помощью замечательного псевдокласcа target, благодаря которому можно управлять любым элементом на html-страничке. В нашем случае такими элементами выступают объекты span с идентификаторами tab1, tab2, tab3, tab4 соответственно (для четырёх пунктов меню).
Данные идентификаторы одновременно выступают якорями для ссылок (которые по существу являются пунктами меню). Таким образом при нажатии на ссылку (пункт меню) происходит обращение к соответствующему объекту span, который в свою очередь стилизован с помощью псевдокласса target (в нашем случае в этом объекте раскрывается блок div на высоту 100px.)
Итак, для начала создадим разметку страницы:
Аккордеонное меню на CSS3
<div class="accordion">
<!--создаём 4 группы сидентфикаторами-якорями-->
<span id="tab1"></span>
<span id="tab2"></span>
<span id="tab3"></span>
<span id="tab4"></span>
<div class="tabs"><dl class="tab1"><dd>
<!-- ссылка на группу с якорем tab1-->
<a class="pp" href="#tab1">Пункт №1</a>
<div>
<ul>
<li><a href="http://bulatlab.ru/">подпункт 1</a></li>
<li><a href="http://bulatlab.ru/">подпункт 2</a></li>
<li><a href="http://bulatlab.ru/">подпункт 3</a></li>
<li><a href="http://bulatlab.ru/">подпункт 4</a></li>
</ul>
</div>
</dd>
</dl><dl class="tab2"><dd>
<!-- ссылка на группу с якорем tab2-->
<a class="pp" href="#tab2">Пункт №2</a>
<div>
<ul>
<li><a href="http://bulatlab.ru/">подпункт 1</a></li>
<li><a href="http://bulatlab.ru/">подпункт 2</a></li>
<li><a href="http://bulatlab.ru/">подпункт 3</a></li>
<li><a href="http://bulatlab.ru/">подпункт 4</a></li>
</ul>
</div>
</dd>
</dl><dl class="tab3"><dd>
<!-- ссылка на группу с якорем tab3-->
<a class="pp" href="#tab3">Пункт №3</a>
<div>
<ul>
<li><a href="http://bulatlab.ru/">подпункт 1</a></li>
<li><a href="http://bulatlab.ru/">подпункт 2</a></li>
<li><a href="http://bulatlab.ru/">подпункт 3</a></li>
<li><a href="http://bulatlab.ru/">подпункт 4</a></li>
</ul>
</div>
</dd>
</dl><dl class="tab4"><dd>
<!-- ссылка на группу с якорем tab4-->
<a class="pp" href="#tab4">Пункт №4</a>
<div>
<ul>
<li><a href="http://bulatlab.ru/">подпункт 1</a></li>
<li><a href="http://bulatlab.ru/">подпункт 2</a></li>
<li><a href="http://bulatlab.ru/">подпункт 3</a></li>
<li><a href="http://bulatlab.ru/">подпункт 4</a></li>
</ul>
</div>
</dd>
</dl>
</div>
</div>
Теперь добавим соответствующую таблицу стилей 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 можно размещать практически любой контент (при этом конечно необходимо следить за размерами).
До встречи!