Menu sổ xuống đẹp cho blogger

Hôm nay mình xin chia sẻ kiểu Menu sổ xuống đẹp cho blogger . cho các bạn nào có nhu cầu thì làm nha.

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

2. Vào Bố cục (Layout)

3. Chọn Thêm Tiện ích (Add Widget)

4. Tạo 1 tiện ích HTML/Javarscip và chèn đoạn code phía dưới vào

<style>
/***** BEGIN Dark Menu Styles *****/
.clear:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
html[xmlns] .clear { display: block;}
* html .clear { height: 1%;}

nav.dark {border-top: 1px solid #282c2f; border-bottom: 1px solid #121317; border-radius: 3px; width: 804px; display: block!important;}
nav.dark ul {margin: 0px; padding: 0px; border-left: 1px solid #2e3235;}

/* Top level */
nav.dark li {list-style: none; float: left; border-right: 1px solid #2e3235; position: relative;}
nav.dark li.first, nav li.first a {border-top-left-radius: 2px; border-bottom-left-radius: 2px; -moz-border-top-left-radius: 2px; -moz-border-bottom-left-radius: 2px;}
nav.dark li.last, nav li.last a {border-top-right-radius: 2px; border-bottom-right-radius: 2px; -moz-border-top-right-radius: 2px; -moz-border-bottom-right-radius: 2px;}
nav.dark li.drop a {padding-right: 30px;}
nav.dark li a {display: block; padding: 9px 23px 10px; text-decoration: none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjS_-JY65fAxvBEIcWM9zWkL0B9YdNY13E5b-kYLR79C68E-HNOSOSEziDhQ2U49ak0uhJtD9q-Mws5a1JKY250x_7wIIh7pX8n8ps8YUDXCcLNY-OM-0k9F2KRkx2h79a4AGrcf-gWVA/s1600/navigation-sprite.png); background-repeat: repeat-x; font-size: 12px; color: #fff; border-top: 1px solid #5a5d60; border-left: 1px solid #525659; text-shadow: 0px -1px 0px #000;}
nav.dark li a {background-position: 0px 0px;}
nav.dark li a:hover, nav li.active a {background-position: 0px -36px;}
nav.dark li a:active {background-position: 0px -72px;}
nav.dark .dropdown {display: block; float: right; width: 7px; height: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxwJu5s-nV3rNLP6tDPtUCEWwsa3Kr_N8u3xR9FsNfvrSa5HwYSyPBSNoRZf0KXIBiSDUfTLZ4BPjz_Qrr_lkLDQ1TjlExvB4_sAw6YyqiQTcBtxBDL3bqQe_BF0QokgEzTFVixQG480/s1600/drop-down.png) no-repeat; margin: -20px 15px 0px 12px;}

/* Drop down */
nav.dark li ul {opacity: 0; position: absolute; top: 45px; left: -26px; padding: 12px 15px; border-radius: 3px; -moz-border-radius: 3px; background: #222; display: none; z-index: 100;}
nav.dark li ul li {border-right: 0px; float: none!important; border-bottom: 1px solid #444; width: 125px;}
nav.dark li ul li:last-child { border-bottom: 0px;}
nav.dark li ul li a {background: none!important; border-left: 0px; border-top: 0px; padding: 10px 0px; font-size: 11px}
nav.dark li ul li a:hover {opacity: 0.5;}

nav.dark li ul li.arrow {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBGqJPJtoHS-7RJlU7iPAD67AtbJtzB7VxpcmJSHcnB1MeiFSp7wP1zBjgIOtzAkb6iTLa-jrISBxBlz61715y0x5YVxZqIkWehEM-7OV6nL4qYcWhWx17AROGkDBEq-K-3ZqyWJpKoog/s1600/arrowtop.png) top left no-repeat; border-bottom: 0px; height: 10px; margin-top: -22px; margin-bottom: 10px;}

/***** END Dark Menu Styles *****/
</style>

<!– BEGIN JavaScript –>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

// Requried: Navigation bar drop-down
$(“nav ul li”).hover(function() {
$(this).addClass(“active”);
$(this).find(“ul”).show().animate({opacity: 1}, 400);
},function() {
$(this).find(“ul”).hide().animate({opacity: 0}, 200);
$(this).removeClass(“active”);
});

// Requried: Addtional styling elements
$(‘nav ul li ul li:first-child’).prepend(‘<li></li>’);
$(‘nav ul li:first-child’).addClass(‘first’);
$(‘nav ul li:last-child’).addClass(‘last’);
$(‘nav ul li ul’).parent().append(‘<span></span>’).addClass(‘drop’);

});
</script>
<!– END JavaScript –>

<!– BEGIN Dark navigation bar –>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a>
<ul>
<li><a href=”#”>Branding</a></li>
<li><a href=”#”>Print</a></li>
<li><a href=”#”>Web</a></li>
<li><a href=”#”>Marketing</a></li>
</ul>
</li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>Our blog</a></li>
<li><a href=”#”>Downloads</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>
</nav>
<!– END Dark navigation bar –>

Chúc các bạn thành thành thành công nha !