Menu đẹp mờ ảo mang phong cách nữ tính cho blogger

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ì Viettin365.com 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 Viettin365 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 {
    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).

<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 và xem kết quả

 Chúc các bạn thành công !