Fly drop Menu đẹp từ CSS cho blogger ~ Phạm Đình An

Bạn đã từng nghĩ sẽ tự tạo cho blog mình một mẫu menu hoàn toàn khác so với các blog khác chư? Nếu chưa thì namkna chắc chắn bạn sẽ thay đổi các nhìn sau khi đọc bài viết này.

Mẫu meunu xổ dọc hôm nay namkna giới thiệu đến các bạn có điểm đặc biệt là các sub menu mang phong cách hoàn toàn mới đan xen nhau mang lại cảm giác mờ ảo khi nó hiện ra, Màu hồng khá nữ tính nhưng bạn có thể thay đổi nó cho phù hợp với phong cách và màu chủ đạo trong blog của bạn...

1- Đăng nhập vào Blog

2- Vào thẻ Mẫu (Template)

3- Bấm vào nút Chỉnh sửa HTML (Edit HTML)

4- Thêm đoạn code bên dưới vào trước thẻ ]]></b:skin> trong mẫu của bạn:

.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: #FE80DF;
    float: left;
    position: relative;
    transform: skewX(25deg);
}

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

.menu li:hover {
    background: #FE80DF;
}

.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: #FEBFEF;
    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);            
}

» Tùy chỉnh:

background: #FE80DF; là màu nền menu chính khi chưa dê chuột vào
background: #FE80DF; Là màu nền của các tiêu đề menu chính và các sub menu xổ xống khi dê chuột lên đó
background-color: #FEBFEF; là màu nền của sub menu xổ xuống khi chưa dê chuột lên các submenu con.

5- Lưu mẫu của bạn lại và tiến hành bước tiếp theo.

6- Quay trở lại Bố cục (Layout) blog của bạn và thêm một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào phần nội dung của tiện ích bạn vừa thêm nha (Tất nhiên là bạn có thể thêm nó thẳng vào mẫu (template) của bạn nếu bạn am hiểu về code. Nếu không thì hãy comment ở dưới mình sẽ chỉ vị trí đó cho các bạn).

Phạm Đình An

Monday, June 23, 2014

Fly drop Menu đẹp từ CSS cho blogger

0 nhận xét:

Post a Comment

Bài viết mới

Xem nhiều nhất

Labels

Số lượt truy cập

About