Hôm nay mình giới thiệu thêm cho các bạn một mẫu drop menu mới từ blog của namkna. Với
mẫu nàu menu con sẽ chia thành 2 cột thay vì một cột như các style trước
đây mà mình đã giới thiệu.
Mình cũng đã áp dụng mẫu này thành công nhất so với những mẫu khác của namkna.
Ảnh minh họa:
Cách tiến hành:
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/AVvXsEg4YL1rQc-Kyt76dVOsBHTjvMUnELP1hwAclsuHhrKtrLMb-78nu-wrPb1lTL-u17McokfMPAISZdYh0N99-A11QlsYH2rI6kQafEGsJ5dlfJoMka5Lm1_HSeRC_kttVWJFJf2B8-OpHD8/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>
4- Lưu mẫu lại và xem kết quả.Tùy chỉnh:
Thay dấu sổ chéo / thành link liên kết tới bài viết hoặc nhãn.
