Hướng dẫn tạo mega menu cho blogspot hoàn toàn bằng CSS3

Ưu điểm của mega dropdown này là nó chỉ dùng CSS3 nên khá nhẹ, và một cái nữa là phần dropdown các bạn có thể tùy biến nhiều thứ trong đó, chứ không đơn thuần chỉ hiện các liên kết con. 

XEM DEMO

Bởi thế nó mới được gọi là mega menu. Và nhược điểm của menu này là chưa có responsive nên bạn có thể tuỳ biến một dạng menu dành cho màn hình nhỏ hơn.

Để thực hiện thêm menu này vào bạn cần Backup giao diện nếu có xảy ra lỗi để cài lại mẫu nhanh chóng hơn.

Cách tạo mega menu

Bước 1: Bạn đăng nhập Blogger -> Mẫu -> tìm đến thẻ ]]></b:skin và dán đoạn CSS sau lên phía trên

.nav,.nav a,.nav ul,.nav li,.nav div,.nav form,.nav input {
border:none;
margin:0;
outline:none;
padding:0
}

.nav a {
text-decoration:none
}

.nav li {
list-style:none
}

.nav,input {
font-size:14px
}

.nav {
cursor:default;
display:inline-block;
position:relative;
z-index:500
}

.nav > li {
display:block;
float:left
}

.nav > li > a {
background:#f90;
border-left:1px solid #f0c36d;
display:block;
color:#fff;
height:54px;
line-height:54px;
padding:0 50px;
position:relative;
-webkit-transition:all .3s ease;
transition:all .3s ease;
z-index:510;
font-weight:400
}

.nav > li:hover > a {
background:#f90
}

.nav > li:first-child > a {
border-left:none
}

.nav > li > div {
background:#fff;
box-shadow:0 0 10px #ccc;
position:absolute;
display:block;
left:0;
opacity:0;
overflow:hidden;
top:54px;
-webkit-transition:all .3s ease .15s;
transition:all .3s ease .15s;
visibility:hidden;
width:100%
}

.nav > li:hover > div {
opacity:1;
overflow:visible;
visibility:visible
}

.nav .nav-column {
float:left;
padding:2.5%;
width:25%
}

.nav .nav-column h3 {
color:#372f2b;
font-size:14px;
font-weight:700;
line-height:18px;
margin:20px 0 10px;
text-transform:uppercase
}

.nav .nav-column h3.orange {
color:#ff722b
}

.nav .nav-column li a {
color:#888;
display:block;
font-weight:700;
line-height:26px
}

.nav .nav-column li a:hover {
color:#666
}

.footer-bar {
display:block;
width:100%;
height:45px;
line-height:45px;
background:#111;
border-top:1px solid #E62600;
position:fixed;
bottom:0;
left:0
}

.footer-bar .article-wrapper {
font-family:arial,sans-serif;
font-size:14px;
color:#888;
float:left;
margin-left:10%
}

.footer-bar .article-link a,.footer-bar .article-link a:visited {
text-decoration:none;
color:#fff
}

.site-link a,.site-link a:visited {
color:#888;
font-size:14px;
font-family:arial,sans-serif;
float:right;
margin-right:10%;
text-decoration:none
}

.site-link a:hover {
color:#E62600
}

Bước 2: Bạn dán HTML menu vào nơi muốn hiển thị, thường là ở phía đầu blog !

<div class="menu-wrapper">
    <ul class="nav">
        <li>
            <a href="#">Menu 1</a>
            <div>
                <div class="nav-column">
                    <h3>Heading</h3>
                    <ul>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                    </ul>
                </div>
                <div class="nav-column">
                    <h3>Heading</h3>
                    <ul>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                    </ul>
                    <h3>Heading 3</h3>
                    <ul>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                    </ul>
                </div>
                <div class="nav-column">
                    <h3>Heading</h3>
                    <ul>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                    </ul>
                </div>
                <div class="nav-column">
                    <h3 class="orange">Heading</h3>
                    <ul>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                    </ul>
                    <h3 class="orange">Heading</h3>
                    <ul>
                        <li><a href="#">Item</a>
                        </li>
                        <li><a href="#">Item</a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li><a href="#">Menu 2</a>
        </li>
        <li><a href="#">Menu 3</a>
        </li>
        <li><a href="#">Menu 4</a>
        </li>
        <li><a href="#">Menu 5</a>
        </li>

    </ul>
</div>

Lưu mẫu lại và xem kết quả, chúc bạn thành công!