Вертикальное выпадающее меню «Аккордеон»
Нет ничего проще. Идем в Дизайн, добавить гаджет – жобавить HTML/JavaScript и вставляем код:
<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: 45px;
cursor:pointer;
margin: 0 0 0
0;
text-align:
center;
color:white;padding: 12px 0px 0px 0px;
border-radius:
8px;
-moz-border-radius: 8px;
-webkit-border-radius:
8px;
background: #999999;/*цвет наружного
меню*/
}
#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:
8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #cccccc; /*цвет фона
внутреннего меню*/
filter: progid:DXImageTransform.Microsoft.gradient
( startColorstr='#E1A3370',
endColorstr='#E1A337',GradientType=0 );
}
#mymenu p:hover {
background:
#999999;
cursor:pointer;
}
#mymenu div:hover
> p {
height:
45px;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 = "#">Под меню1</a></p>
<p><a
href = "#">Под меню2</a></p>
</div>
<div
class="mydiv">
<h3>Меню
2</h3>
<p><a
href = "#">Под меню1</a></p>
<p><a
href = "#">Под меню2</a></p>
<p><a
href = "#">Под меню3</a></p>
</div>
<div
class="mydiv">
<h3>Меню
3</h3>
<p><a
href = "#">Под меню1</a></p>
<p><a
href = "#">Под меню2</a></p>
<p><a
href = "#">Под меню3</a></p>
<p><a
href = "#">Под меню4</a></p>
</div>
<div
class="mydiv">
<h3>Меню
4</h3>
<p><a
href = "#">Под меню1</a></p>
<p><a
href = "#">Под меню2</a></p>
<p><a
href = "#">Под меню3</a></p>
<p><a
href = "#">Под меню4</a></p>
<p><a
href = "#">Под меню5</a></p>
</div></div>
Здесь можно посмотреть как сделать вертикальное выпадающее слева или справа меню блога. Спасибо за предоставленный материал: "Blogodel - Blogger, Блогспот"
Комментариев нет:
Отправить комментарий