При помощи и благодаря CCS мы можем создавать действительно привлекательные вещи, которые могут оценить пользователи и гости сайта для наших проектов, где можно создавать эффекты, где раньше мы могли использовать только JavaScript или Flash. В этом мануале подробно разберем и узнаем, как сделать меню типа аккордеона, используя только HTML и CSS3, где все будет отлично и корректно работать.
В документе HTML5 со ссылкой на таблицу стилей, в теле которого есть список ul с классом меню в этом большом списке, где в качестве родительских элементов используются li. Где каждый li main имеет под список ul со своими соответствующими li и безусловно со ссылками.
Так по умолчанию при открытие страницы и сайта:
Здесь наблюдаем, что навели ссылку и автоматически начали открываться под категорий:
html
Код
<ul class="ketracuvo-suncionam">
<li><a href="#">Первый раздел</a>
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">photoshop</a></li>
</ul>
</li>
<li><a href="#">Учебники по CSS3</a>
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">photoshop</a></li>
</ul>
</li>
<li><a href="#">Создание Аккордеонного Меню</a>
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">photoshop</a></li>
</ul>
</li>
</ul>
css
Код
.ketracuvo-suncionam{
padding:0;
list-style:none;
width:620px;
font-size:18px;
background:#c1c1c1;
border: 1px solid rgba(0,0,0,0.8);
}
.ketracuvo-suncionam li a {
display: block;
border-bottom: 1px solid rgba(29, 27, 27, 0.32);
border-top: 1px solid rgba(228, 226, 226, 0.25);
background: #373840;
text-decoration: none;
color: #f1f0f0;
text-shadow: 1px 0px 1px rgba(27, 25, 25, 0.2);
filter: dropshadow(color=#000, offx=1, offy=0);
padding: 10px;
padding-left: 20px;
}
.ketracuvo-suncionam li ul li a {
font-size: 14px;
color: #e5e6e8;
text-shadow: 1px 0px 1px rgba(208, 200, 200, 0.5);
}
.ketracuvo-suncionam li a:hover{
background:#4a6ba2;
-moz-transition: background 0.3s ease-in;
-webkit-transition: background 0.3s ease-in;
-o-transition: background 0.3s ease-in;
}
.ketracuvo-suncionam ul{
margin:0;
padding:0;
list-style:none;
height:0;
overflow: hidden;
transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.ketracuvo-suncionam li:hover ul{
height:120px;
overflow-y:auto;
overflow-x:hidden;
}
.ketracuvo-suncionam ul li a {
background: #959a9a;
}
.ketracuvo-suncionam ul li a:hover {
background: none repeat scroll 0 0 #ccc;
color: #fff;
-moz-transition: color 0.4s ease;
-webkit-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
}
Также можно уже самому еще больше оформить меню, используя больше свойств CSS3 для стилистики дизайна, где все на ваше усмотрение.
Демонстрация
