Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Wednesday, July 9, 2014

Tạo Fly drop Menu cực đẹp từ CSS cho blogspot

XEM DEMO

Tạo Menu có hiệu ứng mờ ảo đẹp cho blogger


.aii:before,
.aii:after {
    content: " ";
    display: table;
}

.aii:after {
    clear: both;
}

.aii {
    *zoom: 1;
}
/* Menu chính */
.menu {           
    margin: 50px auto;
    width: 800px;
    width: fit-content;   
}

.menu li {list-style:none!important;
    background:
    float: left;
    position: relative;
    transform: skewX(25deg);
}

.menu a {
    display: block;
    color:
    text-transform: uppercase;
    text-decoration: none;
    font-family: Arial;
    font-size: 13px;
}       

.menu li:hover {
    background:
}       

.menu li a {
    transform: skewX(-25deg);
    padding: 1em 2em;
}

/* Trình Menu thả xuống*/
.submenu {
    position: absolute;
    width: 200px;
    left: 50%; margin-left: -100px;
    transform: skewX(-25deg);
    transform-origin: left top;
}

.submenu li {
    background-color:
    position: relative;
    overflow: hidden;       
}                       

.submenu li a {
    padding: 1em 2em;           
}

.submenu li::after {
    content: '';
    position: absolute;
    top: -125%;
    height: 100%;
    width: 100%;           
    box-shadow: 0 0 50px rgba(0, 0, 0, .9);           
}       

/* Odd stuff */
.submenu li:nth-child(odd){
    transform: skewX(-25deg) translateX(0);
}

.submenu li:nth-child(odd) a {
    transform: skewX(25deg);
}

.submenu li:nth-child(odd)::after {
    right: -50%;
    transform: skewX(-25deg) rotate(3deg);
}               

/* Even stuff */
.submenu li:nth-child(even){
    transform: skewX(25deg) translateX(0);
}

.submenu li:nth-child(even) a {
    transform: skewX(-25deg);
}

.submenu li:nth-child(even)::after {
    left: -50%;
    transform: skewX(25deg) rotate(3deg);
}

/* Xem menu thả xuống */
.submenu,
.submenu li {
    opacity: 0;
    visibility: hidden;           
}

.submenu li {
    transition: .2s ease-out transform;
}

.menu li:hover .submenu,
.menu li:hover .submenu li {
    opacity: 1;
    visibility: visible;
}       

.menu li:hover .submenu li:nth-child(even){
    transform: skewX(25deg) translateX(15px);           
}

.menu li:hover .submenu li:nth-child(odd){
    transform: skewX(-25deg) translateX(-15px);           
}
ul class="menu aii"
lia href=""Menu 1/a/li
li
a href=""Menu 2/a
ul class="submenu"
lia href=""Submenu 1/a/li
lia href=""Submenu 2/a/li
lia href=""Submenu 3/a/li
/ul
/li
li
a href=""Menu 3/a
ul class="submenu"
lia href=""Submenu 1/a/li
lia href=""Submenu 2/a/li
lia href=""Submenu 3/a/li
lia href=""Submenu 4/a/li
/ul
/li
lia href=""Menu 4/a/li
lia href=""Menu 5/a/li
/ul

Vậy là xong , chúc các bạn thành công với hiệu ứng menu đẹp lung linh này !


Theo Namka.blogspot.com

0 comments:

Post a Comment

Popular Posts