Like Page để cập nhật tin mới ngay trên facebook nhé

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!

Không có nhận xét nào

- Bình luận của bạn sẽ được kiểm duyệt trước khi xuất bản

- Những bình luận mang tính xây dựng đóng góp bài viết mới được duyệt

- Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

- Hãy là con người văn minh từ những câu nói