Menu ngang xổ dọc một cấp cho blogspot Style 2

Đây là một dạng menu cổ nhất có từ ngày khai trương lập blog và bây giờ với tiến bộ công nghệ mà nhất là sự phát triển của thiết bị cầm tay thông minh thifloaij menu không responsive này chỉ có đường nằm nghỉ trong kho lưu trữ. Hôm nay lục lọi và lau chùi lại xem ai có dùng thì dùng.

Ảnh minh họa

Demo

DEMO

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> 

ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
width: 100%;
float: left;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqVYHEz7y0OgbK-oPFUnQGndc3BCGMprkrVP6tlbWJIevIDGfkYqj8VpwxIGvEMi5pUvQGLBOzaxrxC__1LZV-ZPCzCT2LPPGIihQYbB6v6EBGmo20kZJn3pmnJvt_2hZRwiYB5dI95MeD/s35/topnav_bg.gif) repeat-x;
z-index:100}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
z-index:100}
ul.topnav li a{
padding: 10px 5px;
color: #F5FFFA;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_XIe9uNgho3DoI2j4UkSYJHx3xT5sWvg9EjrLUk_a988VVoVMaClOgC8kGt9cSueIaBxuhPbKDi3PXCUcJfOpgzJHNhT974whl03XYnL6H_aTlfqvfghD32UhdD77aeHoJV4i8EnZQg/s46/topnav_hover.gif) no-repeat center top;
z-index:100}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiViJA9DIRXbephB-mFTUcEJ9DoxIknbmL_ovbzUXkT9z740fQE96Y3ocM8_YSYrxQmV2USYdtDUzVOTGvSmSP6_DCpGDyE7IPHPbKzF-cz2MyDABQasPn7Q8qE3VlxLUd_Ief9cqeL0gPI/s70/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; 
border-bottom: 1px solid #444; 
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfVUzGqblC9f9gAJ2KI4Zv1lyL9mtiT2sF6AWwzXh2J5emd7I_xZW7-hcXf8Fq_zGv4BSQmWsBswLjsYVHeDFMp4QwHpcBlDK6Jz-bOrJWZziDSQIci-gqPZ76phyphenhyphenVCbJP7Wsh2Au5A4v/s9/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfVUzGqblC9f9gAJ2KI4Zv1lyL9mtiT2sF6AWwzXh2J5emd7I_xZW7-hcXf8Fq_zGv4BSQmWsBswLjsYVHeDFMp4QwHpcBlDK6Jz-bOrJWZziDSQIci-gqPZ76phyphenhyphenVCbJP7Wsh2Au5A4v/s9/dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}

5- Thêm đoạn mã sau vào trước thẻ  </head> 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$("ul.topnav li span").click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

});
</script>

6- Lưu lại
7- Thêm đoạn code bên dưới vào trước thẻ  </header> .

<ul class='topnav'>
<li><a href='/'>Home</a></li>
<li>
<a href='#'>Menu 1</a>
<ul class='subnav'>
<li><a href='#'>Menu con 1.1</a></li>
<li><a href='#'>Menu con 1.2</a></li>
<li><a href='#'>Menu con 1.3</a></li>
<li><a href='#'>Menu con 1.4</a></li>
<li><a href='#'>Menu con 1.5</a></li>
</ul>
</li>
<li>
<a href='#'>Menu 2</a>
<ul class='subnav'>
<li><a href='#'>Menu con 2.1</a></li>
<li><a href='#'>Menu con 2.2</a></li>
<li><a href='#'>Menu con 2.3</a></li>
<li><a href='#'>Menu con 2.4</a></li>
<li><a href='#'>Menu con 2.5</a></li>
<li><a href='#'>Menu con 2.6</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
</ul>

- Trong đó:  

• Thay dấu # (màu đỏ)bằng liên kết tới nhãn, bài viết
• Thay dấu # (màu cam) thành liên kết tới nhãn bài đăng thuộc Menu con.
• Thay chữ màu xanh đậm thành tên nhãn, bài viết thuộc menu chính.
• Thay chữ màu xanh nhạt thành tên bài viết nhãn thuộc menu con.

8. Lưu tiện ích lại. Nếu ở bước 7 không hiển thị thì bạn vào Phần tử trang Thêm 1 tiện íchHTML/Javarscrip trên phần header và thêm đoạn code ở bước 7 vào.

Chúc thành công!