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. 
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.
Hướng dẫn tạo mega menu cho blogspot hoàn toàn bằng CSS3

Để 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!

Loading...

Quang Trường

Giá trị của một con người không phải là khi họ đang ở vị trí thuận lợi mà là khi họ đang rơi vào hoàn cảnh khó khăn và đau khổ nhất.

Cùng tham gia bình luận bài viết nhé!