Приветствую, дорогие друзья!
Хочу предложить Вашему вниманию ещё одно аккордеонное меню с использованием только таблицы стилей. В отличии от предыдущих меню в данном для отслеживания клика по основному пункту меню применен псевдоклас :focus, который в общих случаях используется для стилевого оформления элементов, получающих фокус ввода. В нашем случае будет меняться величина отступа от верхнего края элемента списка - margin-top (с 23px на 0px). Для динамики применен также эффект перехода transition.
HTML код может выглядеть примерно так:
Соответственно таблица стилей 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;
}
На этом - всё! До встречи!
