[Tips] - Menu chuyên mục Css full Responsive cho Blogspot

Tiếp tục share cho các bạn một mẫu menu dùng css siêu đẹp cho blogspot dùng làm menu chuyên mục, điều đặc biệt ở menu này là tích hợp Responsive co giản theo các loại màn hình.

XEM DEMO

Làm seo để thêm menu này vào Blogspot

Để thêm menu này vào Blogspot thì chúng ta có 2 bước đơn giản, 2 bước này chúng ta thao tác trên templates blogspot của mình.

1. Thêm Css

Css thì chúng ta thêm vào trước thẻ ]]></b:skin>

#nav{padding:15px 0 0;height:46px}
#menu{float:left;width:472px}
#menu a{display:block}
#menu a:hover{text-decoration:none}
#menu .title{position:relative;z-index:100;padding:5px 10px;font-size:14px;line-height:20px}
#menu li{float:left}
#menu li:hover .title,#menu li .nav{background:#2a2a2a}
#menu li:hover .title{color:#ddd}
#menu li:hover .nav{left:auto}
#menu li .nav{position:absolute;z-index:101;left:-999em}
#menu li .nav a{color:#ddd; font-size: 12px;}
#menu li .nav a:hover{color:#066}
#menu li .nav h3{margin:5px 10px;color:#666;font-size: 15px;}
#menu li .nav li{width:100%}
#menu li .nav li.links{width:100%!important}
#menu li .nav .border-top{border-top:1px solid #444}
#menu li .nav .border-right{border-right:1px solid #444}
#menu li .nav .border-left{border-left:1px solid #444}
#menu .horizontal{padding:5px 0}
#menu .horizontal a{margin:5px}
#menu .horizontal ul{padding:0 5px}
#menu .vertical{padding:0 10px}
#menu .vertical a{margin:5px 0}
#menu .vertical ul{float:left;padding:5px 0;width:100%}
#menu .cloumn{width:150px}
#menu .cloumn3{width:370px}
.cloumn3 li {float: left;width: 33%!important;}
li {text-align: -webkit-match-parent;}
ul {list-style-type: none;}
.left {float: left;}
.right{float:right}
.fullwidth {min-width: 930px;height: 100%;}
@media screen and (max-width:930px){
.fullwidth{min-width:0}
#search,#FollowByEmail1,#BlogArchive1,#PageList1,#info,.separate,#rc .name{display:none}
}
@media screen and (max-width:658px){
#menu,#menu .cloumn,#menu .cloumn3{width:auto}
#header-wrapper,#copyright-wrapper{padding:0 20px}
}

2. Hiển thị menu

Để hiển thị menu thì chúng ta đặt đoạn code sau ở nơi cần hiển thị menu

<div id='menu'>
<ul>
<li onmouseover=''>
<h2 class='title'>Chuyên mục <small>▼</small></h2>
<div class='nav horizontal'>
<div class='left cloumn'>
<h3>Computer</h3>
<ul>
<li><a href='/search/label/Phần%20mềm'>Phần mềm</a></li>
<li><a href='/search/label/Windows'>Windows</a></li>
</ul>
</div>
<div class='left cloumn3 border-left border-right'>
<h3>Thủ Thuật Blogger</h3>
<ul>
<li><a href='/search/label/Blogger%20Cơ%20Bản'>Blogger Cơ Bản</a></li>
<li><a href='/search/label/Thiết%20kế%20Blogger'>Thiết kế Blogger</a></li>
<li><a href='/search/label/Lập%20trình%20Blogger'>Lập trình Blogger</a></li>
<li><a href='/search/label/SEO%20Blogger'>SEO Blogger</a></li>
<li><a href='/search/label/Widget%20Blogger'>Widget Blogger</a></li>
<li><a href='/search/label/Blogger%20Templates'>Blogger Templates</a></li>
<li><a href='/search/label/Tiện%20ích%20Blogger'>Tiện ích Blogger</a></li>
<li class='links'><a class='right button small' href='/'>Xem tất cả</a></li>
</ul>
</div>
<div class='left cloumn'>
<h3>Photoshop</h3>
<ul>
<li><a href='/'>Hiệu Ứng Chữ</a></li>
</ul>
</div>
</div>
</li>
<li onmouseover=''>
<h2 class='title'>Thông tin <small>▼</small></h2>
<div class='nav vertical cloumn'>
<ul>
<li><a href='/p/sitemap-web.html'>Sitemap</a></li>
<li><a href='/p/archive.html'>Archive</a></li>
<li><a href='/p/gui-bai-viet.html'>Gửi bài</a></li>
<li><a href='/p/recent-comment.html'>Nhận xét mới</a></li>
<li class='links'><a class='right button small' href='/'>Xem tất cả</a></li>
</ul>
</div>
</li>
</ul>
</div>

Thế là xong, lưu mẫu lại và kiểm tra thành quả tại nơi mình đã thêm menu .

Kết luận : Đây là một dạng menu mà tôi khuyên các bạn nên saì, vì nó đơn giản và điều đặc biệt là hỗ trợ xem trên các loại thiết bị di động. Rất chuyên nghiệp mà góp phần để seo blogspot của bạn tốt hơn,