Menu Accordion Vertical Part 2 ~ Berbagi Ide & Inspirasi

Pernah saya Share mengenai Menu Accordion Vertikal tetapi kesempatan itu menu Accordion masih banyak kekurangan terutama ketika menggunakan browser selain FireFox. Kesempatan ini ternyata ada Menu Accordion Vertikal yang lebih stabil dan bisa diterapkan untuk Browser yang biasa kita gunakan Firefox, Crome dam teman - teman sejenisnya.

Masuk Dasboard Blog, Design kemudian menuju Edit HTML
Cari ]]></b:skin> letakan scrip dibawah ini Di atas ]]></b:skin>

/*accordion menu
********************/
.verticalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
       width: 280px;
}

.verticalaccordion>ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style:none;
    height:40px;
    width: 280px;

/* Decorative CSS */
    background-color:#f0f0f0;

/* CSS3 Transition Effect */
    transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;

}

.verticalaccordion>ul>li>h3 {
    display:block;
    margin: 0;
    padding:10px;
    height:19px;

/* Decorative CSS */
    border-top:#f0f0f0 1px solid;
    font-family: Flavors, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: red;
    background: #cccccc;

/* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #999999, #cccccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";   /* IE 8 */
}

.verticalaccordion>ul>li>div {
    margin:0;
    overflow: auto;
    padding:10px;
    height:220px;
}

.verticalaccordion>ul>li:hover {
    height: 280px;
}

.verticalaccordion:hover>ul>li:hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background: #000000;

/* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
    background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";   /* IE 8 */
}

.verticalaccordion>ul>li>h3:hover {
    cursor:pointer;}

Tambah Gadget HTML Scrip dan gunakan scrip Berikut

Berbagi Ide & Inspirasi

Menu Accordion Vertical Part 2

1 komentar:

Blog Archive

Popular Posts