Меню акордеон

Вставити код на нову сторінку! Всі параметри настроюються - ширина, колір букв і колір фону. Працює супер!

<style> #mymenu { width: 200px; margin: 0 auto; } #mymenu .mydiv { width: 200px;/*ширина всего меню*/

transition: height ease-in-out 500ms; -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } .mydiv h3{height: 40px; cursor:pointer; margin: 0 0 0 0;

text-align: center; color:white;padding: 12px 0px 0px 0px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #8b00ff;/*цвет наружного меню*/ }

#mymenu p { text-align: center; margin: 0 0 1px 0; height: 0px; overflow: hidden; transition: height ease-in-out 500ms; -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #0065db; /*цвет фона внутреннего меню*/

filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#E1A3370', endColorstr='#E1A337',GradientType=0 ); } #mymenu p:hover { background: #999999; cursor:pointer; } #mymenu div:hover > p { height: 40px;padding: 12px 0px 0px 0px; } * html #mymenu .mydiv { filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 ); height: 45px; overflow: hidden; forIE: expression( onmouseover = function() {this.className += ' hover'}, onmouseout = function() {this.className = this.className.replace('hover', '')} ); } * html #mymenu .mydiv.hover { height: auto; } #mymenu p a { color:white; } </style> <div id="mymenu">

<div class="mydiv">

<h3 >Название заголовка 1</h3>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

</div>

<div class="mydiv">

<h3>Название заголовка 2</h3>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

</div>

<div class="mydiv">

<h3>Название заголовка 3</h3>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

<p><a href = "http://адрес ссылки">название ссылки "вверх"</a></p>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

</div>

<div class="mydiv">

<h3>Название заголовка 4</h3>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

<p><a href = "http://адрес ссылки">название ссылки</a></p>

</div></div> - See more at: http://www.bdblogov.ru/2014/02/drop-vertical-menu-for-blog-blogspot.html#sthash.Sx3x2oPl.dpuf






Взято з http://www.bdblogov.ru/2014/02/drop-vertical-menu-for-blog-blogspot.html