Menu xổ dọc với 2 cột sub cho blogger

Menu là một thành phần có tác dụng điều hướng và tạo sự chuyên nghiệp cho trang blog hoặc web có nhiều nội dung, hôm nay namkna giới thiệu thêm cho các bạn một mẫu drop menu mới. Với mẫu nàu menu con sẽ chia thành 2 hay nhiều cột thay vì một cột như các style trước đây mà namkna đã giới thiệu.

Các bạn có thể xem Demo để thấy rõ hơn,

XEM DEMO

Ảnh minh họa:

» Cách tạo menu xổ dọc thành 2 hay nhiều cột cho blogspot:

1. Đăng nhập vào blog

2. Chọn Bố cục

3. Chọn Thêm Tiện ích => Tạo HTML/Javarscip và dán code bên dưới vào.

<style>
#toppic {width:910px;height:30px;background:#2c2c2c;border-top:0px solid #444;margin:0 auto;padding:0;overflow:hidden;text-shadow:1px 1px 2px #002851}
#topwrapper {width:910px;height:30px;margin:0 auto;padding:0}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {border-right:1px solid #444;border-left:1px solid #111;text-align:left;display: block;text-decoration: none;padding:6px 12px 8px;font:12px Arial;text-transform:none;color:#eee;}
#top a:hover {background:#111;}
#top a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDl6frgVXymrgtpL9fltg73Dj27NCzbgxjpa-0vuoXuOAeSwdGfj8euTJeyWh0SMxGwOJ3X2VfVnmwublMG0hCLR5eVRvHTc73stXfqXN7l3ronxghzR5dqraY3y9vWB48AbrgMeOVock/s1600/arrow_white.gif);background-repeat: no-repeat;padding: 6px 24px 8px 12px;background-position: right center;}
#top li {float: left;position: relative;}
#top li {position: static; width: auto;}
#top li ul, #top ul li {width:240px;}
#top ul li a  {text-align:left;padding: 6px 10px;font-size:13px;font-weight:normal;text-transform:none;font-family:Arial, sans-serif;border:none;}
#top li ul {z-index:100;position: absolute;display: none;background-color:#111;margin-left:-60px;padding:10px 0;-moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; border-bottom-left-radius:6px; border-bottom-right-radius:6px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#top li ul li {width:120px;float:left;margin:0;padding:0}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {color:#ddd;background-color:transparent;text-decoration:none;}
#top ul a:hover {text-decoration:underline!important;color:yellow}
</style>
<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li class='home'><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='trigger' href='#'>Drop menu 1</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 2</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
<li><a href='#'>Sub menu 5</a></li>
<li><a href='#'>Sub menu 6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 3</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
<li><a href='#'>Sub menu 5</a></li>
<li><a href='#'>Sub menu 6</a></li>
<li><a href='#'>Sub menu 7</a></li>
<li><a href='#'>Sub menu 8</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
<br class='clearit'/>
</div>
</div>

» Tùy chỉnh menu xổ dọc thành nhiều cột:

• Nếu bạn muốn menu con xổ xuống chia thành nhiều hơn 2 cột thì bạn chỉ cần tăng thuộc tính width:240px lên là được. Ví dụ để chia thành 3 cột thì bạn sửa nó thành width:360px là được:
• width:910px là chiều rộng của menu hãy điều chỉnh lại nó cho phù hợp với chiều rộng blog của bạn nha.
• Thay dấu sổ chéo (#) thành link liên kết tới bài viết, trang hoặc nhãn mà bạn muốn.
• Thay các phần màu xanh dương và màu xanh da trời thành tiêu đề hoặc mô tả của link tương ứng trước nó.

4- Lưu mẫu lại và quay trở lại trang blog của bạn để xem kết quả đã làm được nha.

Nếu gặp bất cứ khó khăn gì khi áp dụng vui lòng comment ở dưới bài đăng này mình sẽ giải đáp cho các bạn trong thời gian sớm nhất có thể.