Аккордеонное меню на псевдоклассе :focus.

Приветствую, дорогие друзья!

Хочу предложить Вашему вниманию ещё одно аккордеонное меню с использованием только таблицы стилей. В отличии от предыдущих меню в данном для отслеживания клика по основному пункту меню применен псевдоклас :focus, который в общих случаях используется для стилевого оформления элементов, получающих фокус ввода. В нашем случае будет меняться величина отступа от верхнего края элемента списка - margin-top (с 23px на 0px). Для динамики применен также эффект перехода transition.

HTML код может выглядеть примерно так:


<ul id="nav">
   <li><a class="sub" tabindex="1" href="#">Пункт №1</a>
      <ul>
         <li><a href="#">Подпункт 1</a></li>
         <li><a href="#">Подпункт 2</a></li>
         <li><a href="#">Подпункт 3</a></li>
         <li><a href="#">Подпункт 4</a></li>
         <li><a href="#">Подпункт 5</a></li>
      </ul>
   </li>

   <li><a class="sub" tabindex="1" href="#">Пункт №2</a>
      <ul>
         <li><a href="#">Подпункт 1</a></li>
         <li><a href="#">Подпункт 2</a></li>
         <li><a href="#">Подпункт 3</a></li>
         <li><a href="#">Подпункт 4</a></li>
         <li><a href="#">Подпункт 5</a></li>
      </ul>
   </li>

   <li><a class="sub" tabindex="1" href="#">Пункт №3</a>
      <ul>
         <li><a href="#">Подпункт 1</a></li>
         <li><a href="#">Подпункт 2</a></li>
         <li><a href="#">Подпункт 3</a></li>
         <li><a href="#">Подпункт 4</a></li>
         <li><a href="#">Подпункт 5</a></li>
      </ul>
   </li>

   <li><a class="sub" tabindex="1" href="#">Пункт №4</a>
      <ul>
         <li><a href="#">Подпункт 1</a></li>
         <li><a href="#">Подпункт 2</a></li>
         <li><a href="#">Подпункт 3</a></li>
         <li><a href="#">Подпункт 4</a></li>
         <li><a href="#">Подпункт 5</a></li>
      </ul>
   </li>

   <li><a class="sub" tabindex="1" href="#">Пункт №5</a>
      <ul>
         <li><a href="#">Подпункт 1</a></li>
         <li><a href="#">Подпункт 2</a></li>
         <li><a href="#">Подпункт 3</a></li>
         <li><a href="#">Подпункт 4</a></li>
         <li><a href="#">Подпункт 5</a></li>
      </ul>
   </li>
</ul>

Соответственно таблица стилей menu.css:

#nav {border:1px solid #8e8888;}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;
    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
	opacity: .9;
	background-color: #ddd;                     	
	background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
   color:#000;
   display:block;
   font-size:16px;
   font-weight:bold;
   line-height:28px;
   outline:0;
   padding-left:15px;
   text-decoration:none;
}


#nav>li >a: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;
}
#nav ul li a {
    background-color:#fff;
    color:#444;
    font-size:14px;
    line-height:23px;
	 margin-left:10px;
	 font-weight:normal;
}
#nav ul li a:hover {
    background-color:#fff;
	 color:#119;
	 text-decoration:underline;
}

#nav a:focus ~ ul li {
    margin-top:0;
    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}

На этом - всё! До встречи!

ДЕМО СКАЧАТЬ

1602