Аккордеонное меню средствами CSS3 без target

И снова здравствуйте! :)

В предыдущей статье я рассказывал, как с помощью только средств CSS3 сделать простенькое аккордеонное меню. При этом для обработки клика был использован псевдокласс target. В данной же статье пойдёт речь об аккордеонное меню, также выполненном только средствами CSS3, но без использования target, и реагирующему на помещение мышки на пункт меню без клика. При этом для добавления стилей к соответсвующим пунктам меню будет использован другой псевдокласс - nth-of-type, с помощью которого можно получить доступ к элементу на основе нумерации в дереве элементов.

Итак, для начала создадим html-документ:


<div class="main">Пункт 1
<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>
Пункт 2
<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>
Пункт 3
<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>
Пункт 4
<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>

Как видно разметка состоит из четырёх групп gigure с описанием figcaption (которые выполняют функцию пунктов меню). А в каждой из групп содержится список со ссылками, которые выполняют функцию подпунктов меню).

В раздел head документа добавим необходимые стили, в которых определим нужные размеры, цвета, время и т.п.


   .main { 
      height: calc(120px + 35px*4 + 1px*3); 
      overflow: hidden; box-shadow: 0 0 0 1px #808080 inset; 
      width:200px;
    } 
   
   .main > figure { 
      overflow: hidden; 
      margin: 0; 
      transition: 1s; 
   } 
   
   .main > figure ul{ list-style-type:none;}
   
   .main > figure:nth-of-type(1), .main:hover > figure:hover { 
      height: calc(120px + 35px + 1px); 
   } 
   
   .main > figure:nth-of-type(n+2), .main:hover > figure:not(:hover) { 
      height: calc(35px + 1px); 
   } 
   
   .main > figure:nth-of-type(n+3), .main:hover > figure:not(:hover) { 
      height: calc(35px + 1px); 
   } 
   
   .main > figure a{
      text-decoration: none;
      padding: 5px 5px;
      color:#777;
    }
   
   .main > figure a:hover{
      color:#444;
      text-decoration: underline;
   }
   
   .main > figure > figcaption { 
      overflow: hidden; 
      height: 35px; line-height: 35px; 
      border-bottom: 1px solid #808080; 
      text-indent: .5em; 
      color: rgb(200,200,200); 
      white-space: nowrap; 
      word-wrap: normal; 
      text-overflow: ellipsis; 
      cursor: pointer; 
      font-weight:bold;
      background: -moz-linear-gradient(#999999, #cccccc);
      background: -ms-linear-gradient(#999999, #cccccc);
      background: -o-linear-gradient(#999999, #cccccc);
      background: -webkit-linear-gradient(#999999, #cccccc);
      color:#000;   
   }

Вот такое несложное меню у нас получилось…

ДЕМО СКАЧАТЬ

В следующей статье постараюсь рассказать ещё об одном CSS3 аккордеоне без target, но уже с реагированием на клик!

До встречи!

2322