Fly drop Menu đẹp từ CSS cho blogger

By Unknown - Thứ Hai, 18 tháng 1, 2016 - No Comments Lượt xem :

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...

Bạn có thể xem demo trực tiếp ở đây:

» XEM DEMO

☼ Thêm Menu hiệu ứng mờ ảo đẹp cho blogger 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/Javascriptsvà 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).

<ul class="menu aii">
    <li><a href="">Menu 1</a></li>
    <li>
        <a href="">Menu 2</a>
        <ul class="submenu">
            <li><a href="">Submenu 1</a></li>
            <li><a href="">Submenu 2</a></li>
            <li><a href="">Submenu 3</a></li>
        </ul>            
    </li>
    <li>
        <a href="">Menu 3</a>
        <ul class="submenu">
            <li><a href="">Submenu 1</a></li>
            <li><a href="">Submenu 2</a></li>
            <li><a href="">Submenu 3</a></li>
            <li><a href="">Submenu 4</a></li>
        </ul>            
    </li>
    <li><a href="">Menu 4</a></li>
    <li><a href="">Menu 5</a></li>
</ul>

7- Lưu tiện ích lại và quay trở lại blog của bạn để xem tiện ích này hoạt động tốt như thế nào nha.

Tin Mới Nhất

Fly drop Menu đẹp từ CSS cho blogger

☼ Thêm Menu hiệu ứng mờ ảo đẹp cho blogger của bạn

Share This:

Post Tags:

Khóc Cười24h

Social Links:

No Comment to " Fly drop Menu đẹp từ CSS cho blogger "