Drop menu hiệu ứng đẹp - Yêu cầu

Yêu cầu của bạn le0desktop

Chào Huy!- Đầu tiên cảm ơn bạn vì những bài viết rất hay, rất bỏ ích.- Bạn có thể hướng dẫn mình làm cái menu black giống như giao diện mới của bạn ko hiệu ứng sổ dọc rất đẹp.- Thanks and Nice Day.

Demo

Làm cách nào để thêm Menu vào blog?

Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTML
Bước 2: Chèn code bên dưới trước thẻ ]]></b:skin>

/* Navigation
----------------------------------------------- */
#nav{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuNrH1EOmrNoWryyeJzAkYNfao7Aj4xQyMMsnFBQzhtQ0GiKk5HblF46URcReQZ7sI0ILsvLCRWiqEC9ynzyhlLhftVt699OqwJrN_Inkzv697JYo8vUQuIpuVscPPRxg-Giq8JywKqK0/s1600/main-menu-bg.png);background-repeat:repeat-x;height:57px;border-bottom:5px solid #0F83A0;padding-left:10px}
#nav ul{height:52px;margin:0;padding:0}
#nav li{position:relative;display:inline-block;float:left;border:1px solid #222;border-width:0 0 0 1px;height:47px;margin-top:5px}
#nav li a{display:block;line-height:45px;height:45px;text-decoration:none;color:#D5D5D5;padding:0 15px;text-shadow:0 1px 1px black;border-left:1px solid #383838}
#nav li:last-child a{border-right:0 none}
#nav li a:hover{color:#fff}
#nav ul.submenu li{float:none;width:100%;margin:0;border-bottom:1px solid #222;border-top:1px solid #383838;border-left:0 none;height:30px}
#nav ul.submenu{display:none;padding:0;position:absolute;top:42px;width:180px;z-index:99;float:left;background:#2D2D2D!important;-webkit-box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-bottom-right-radius:3px;-moz-border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:auto}
#nav ul.submenu.hidden{display:block;-khtml-opacity:0;-moz-opacity:0;opacity:0;visibility:hidden;-webkit-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s}
#nav li:hover ul.submenu.hidden{-khtml-opacity:1;-moz-opacity:1;opacity:1;visibility:visible}
#nav ul.submenu li:first-child{border-top:0 none}
#nav ul.submenu a{height:30px;line-height:1em;padding:7px 10px}
#nav ul.submenu a:hover{padding-left:15px}
#nav li.mhome{border:0;margin-top:0;height:52px}
#nav li.mhome a{height:52px;border-left:0 none;text-indent:-9999px;width:55px;background-color:#0F83A0;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgspmacT55q1C9ZudEsVdeESurnorowFCmIUilpscVo3s4TBUejuZuaXjIU2tl9YrT8aLoRhlO1mh7nKffmSWq4WiOvR_tunEVYuV_gNkRhcMIRXlt1k5E8PnIlVWsY7QJYGg03MSp-XJc/s1600/home+(1).png');background-repeat:no-repeat;background-position:50% 9px}
#menuatas{color:#474747;background:#F1F1F1;padding:3px 0;border-bottom:1px solid #CCC}
#menuatas a:hover{text-decoration:none}
#ktuskrg{display:inline-block;height:18px;float:left;line-height:18px;padding:0 10px;border-right:1px solid #ACACAC}
#navtop{display:inline-block;margin-left:5px}
#navtop ul,#navtop li{padding:0;margin:0;list-style:none}
#navtop li{float:left;height:18px;position:relative}
#navtop li a{height:18px;padding:0 10px;line-height:18px;display:block}
#navtop li.dgnsubtop{padding-right:10px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1mO9akq6X_3UwaPNQEodxuZ2ekW_P8zuFieVo24sRsq15Ex3egpMP5WsIkewRkRifl6ymI493q_TtXUfNTKY6mzD5IA28x2sDoNQCzcIrbYL2us2UVw5Hq2Pcn5q4yiGqwrts4IXLtvc/s7/downarrow-dark.png);background-repeat:no-repeat;background-position:90% 50%}
#navtop ul.sub-menu-top{display:none;position:absolute;width:140px;background:#F1F1F1;top:23px;-webkit-box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);z-index:2}
#navtop ul.sub-menu-top.hidden{display:block;-khtml-opacity:0;-moz-opacity:0;opacity:0;visibility:hidden;-webkit-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s}
#navtop li:hover ul.sub-menu-top.hidden{-khtml-opacity:1;-moz-opacity:1;opacity:1;visibility:visible}
#navtop ul.sub-menu-top li{width:100%;height:22px;border-bottom:1px solid white;border-top:1px solid lightGrey}
#navtop ul.sub-menu-top li:first-child{border-top:0 none}
#navtop ul.sub-menu-top a:hover{padding-left:15px}

 Bước 3: Tìm thẻ đóng </head> và chèn trước nó code sau

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// JQuery hover event with timeout by Taufik Nurrohman
// https://plus.google.com/108949996304093815163/about
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);
// SelectNav.js (v. 0.1)
// Converts your <ul>/<ol> navigation into a dropdown list for small screens
// https://github.com/lukaszfiszer/selectnav.js
window.selectnav=function(){return function(p,q){var a,h=function(b){var c;b||(b=window.event);b.target?c=b.target:b.srcElement&&(c=b.srcElement);3===c.nodeType&&(c=c.parentNode);c.value&&(window.location.href=c.value)},k=function(b){b=b.nodeName.toLowerCase();return"ul"===b||"ol"===b},l=function(b){for(var c=1;document.getElementById("selectnav"+c);c++);return b?"selectnav"+c:"selectnav"+(c-1)},n=function(b){g++;var c=b.children.length,a="",d="",f=g-1;if(c){if(f){for(;f--;)d+=r;d+=" "}for(f=0;f<
c;f++){var e=b.children[f].children[0];if("undefined"!==typeof e){var h=e.innerText||e.textContent,i="";j&&(i=-1!==e.className.search(j)||-1!==e.parentElement.className.search(j)?m:"");s&&!i&&(i=e.href===document.URL?m:"");a+='<option value="'+e.href+'" '+i+">"+d+h+"</option>";t&&(e=b.children[f].children[1])&&k(e)&&(a+=n(e))}}1===g&&o&&(a='<option value="">'+o+"</option>"+a);1===g&&(a='<select class="selectnav" id="'+l(!0)+'">'+a+"</select>");g--;return a}};if((a=document.getElementById(p))&&k(a)){document.documentElement.className+=
" js";var d=q||{},j=d.activeclass||"active",s="boolean"===typeof d.autoselect?d.autoselect:!0,t="boolean"===typeof d.nested?d.nested:!0,r=d.indent||"\u2192",o=d.label||"- Navigation -",g=0,m=" selected ";a.insertAdjacentHTML("afterend",n(a));a=document.getElementById(l());a.addEventListener&&a.addEventListener("change",h);a.attachEvent&&a.attachEvent("onchange",h)}}}();
//]]>
</script>

Nếu trong template đã có Jquery rồi thì xóa dòng màu đỏ đi tránh xung đột
Bước 4: Chèn menu vào vị trí thích hợp với code bên dưới

<nav id='nav'>
       <ul id='menuhlng1'>
           <li class='mhome'><a expr:href='data:blog.homepageUrl'>Home</a></li>
           <li><a href='#'>About</a></li>
           <li><a href='#'>Archive</a>
<ul class='submenu hidden'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
           <li><a href='#'>Comments</a></li>
       </ul>
    </nav>
<script type='text/javascript'>
//<![CDATA[
$('#nav li ul, #navtop li ul').removeClass('hidden');
    $('#nav li, #navtop li').hoverTimeout(100, function() {
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
    }, 500, function() {
        $('ul', this).slideUp(800, 'easeInExpo');
    });
//]]></script>