Tạo menu Responsive cho blog của bạn
Hướng dẫn cách làm
Bước 1: Thêm đoạn code menu này vào chỗ bạn muốn nó hiển thị
Chúc bạn thành công!
<!-- Menu List -->Bước 2: Thêm đoạn JS này lên trên thẻ </body> cho nó Responsive
<div id='header-tail'>
<div class='menu section row' id='menu'>
<ul id='nav'>
<li><a href='/'><i class='fa fa-home'/> Home</a></li>
<li class='hasSub'>
<a href='#'>
<i class='fa fa-lightbulb-o'/> THỦ THUẬT</a>
<ul id='sub-menus'>
<li class='menu-items'>
<a href='/search/label/Facebook?&max-results=9'>Thủ thuật Facebook </a>
</li>
<li class='menu-items'>
<a href='/search/label/Blogspot?&max-results=9'>Thủ thuật Blogspot </a>
</li>
</ul>
</li>
<li class='hasSub'>
<a href='#'>
<i class='fa fa-picture-o'/> HÌNH ẢNH</a>
<ul id='sub-menus'>
<li class='menu-items'>
<a href='/search/label/Ảnh%20Đại%20Diện'>Ảnh đại diện</a>
</li>
<li class='menu-items'>
<a href='/search/label/Ảnh%20Bìa%20Facebook'>Ảnh bìa Facebook</a>
</li>
<li class='menu-items'>
<a href='/search/label/12%20Cung%20Hoàng%20Đạo'>12 cung hoàng đạo</a>
</li>
</ul>
</li>
<li class='hasSub'>
<a href='#'>
<i class='fas fa-cog'/> CÔNG CỤ</a>
<ul id='sub-menus'>
<li class='menu-items'>
<a href='/p/photoshop.html'>Photoshop online </a>
</li>
<li class='menu-items'>
<a href='/p/font-awesome.html'>Font Awesome </a>
</li>
<li class='menu-items'>
<a href='/p/viet-chu-gach-ngang_22.html'>Status gạch ngang </a>
</li>
<li class='menu-items'>
<a href='/p/viet-chu-nguoc.html'>Status chữ ngược </a>
</li>
<li class='menu-items'>
<a href='/p/html-editor.html'>Kiểm tra Code </a>
</li>
<li class='menu-items'>
<a href='/p/nen-css.html'>Nén CSS </a>
</li>
<li class='menu-items'>
<a href='/p/ma-hoa-html.html'>Mã hóa Html </a>
</li>
</ul>
</li>
<li class='hasSub mega-menu'><a href='#add'><i class='fas fa-ellipsis-h'/></a>
<ul class='sub-menu1' style='width:450px;background:#fff'>
<div class='colst1'>
<li class='stb'><a href='/search/label/Blogger?&max-results=9'>Template blogspot</a></li>
<li><a href='/search/label/Blogger?&max-results=9'>Template blogger</a></li>
</div>
<div class='colst2'>
<li class='stb'><a href='#'>Thủ thuật blogger</a></li>
<li><a href='/search/label/Blogger?&max-results=9'>Thủ thuật blogspot</a></li>
</div>
<div class='colst3'>
<li class='stb'><a href='#'>Hướng dẫn</a></li>
<li><a href='/search/label/Blogger?&max-results=9'>Fix lỗi blogspot</a></li>
</div>
</ul>
</li>
</ul>
</div>
</div>
<script type='text/javascript'>Bước 3: Thêm CSS này lên trên thẻ ]]></b:skin>
//<![CDATA[
// Sub menu
(function(c){c.fn.hoverTimeout=function(d,e,f,g){return this.each(function(){var a=null,b=c(this);b.hover(function(){clearTimeout(a);a=setTimeout(function(){e.call(b)},d)},function(){clearTimeout(a);a=setTimeout(function(){g.call(b)},f)})})}})(jQuery);
(function(e){e.fn.replaceText=function(t,n,r){return this.each(function(){var i=this.firstChild,s,o,u=[];if(i){do{if(i.nodeType===3){s=i.nodeValue;o=s.replace(t,n);if(o!==s){if(!r&&/</.test(o)){e(i).before(o);u.push(i)}else{i.nodeValue=o}}}}while(i=i.nextSibling)}u.length&&e(u).remove()})}})(jQuery);
window.selectnav=function(){"use strict";var e=function(e,t){function c(e){var t;if(!e)e=window.event;if(e.target)t=e.target;else if(e.srcElement)t=e.srcElement;if(t.nodeType===3)t=t.parentNode;if(t.value)window.location.href=t.value}function h(e){var t=e.nodeName.toLowerCase();return t==="ul"||t==="ol"}function p(e){for(var t=1;document.getElementById("selectnav"+t);t++);return e?"selectnav"+t:"selectnav"+(t-1)}function d(e){a++;var t=e.children.length,n="",l="",c=a-1;if(!t){return}if(c){while(c--){l+=o}l+=" "}for(var v=0;v<t;v++){var m=e.children[v].children[0];if(typeof m!=="undefined"){var g=m.innerText||m.textContent;var y="";if(r){y=m.className.search(r)!==-1||m.parentNode.className.search(r)!==-1?f:""}if(i&&!y){y=m.href===document.URL?f:""}n+='<option value="'+m.href+'" '+y+">"+l+g+"</option>";if(s){var b=e.children[v].children[1];if(b&&h(b)){n+=d(b)}}}}if(a===1&&u){n='<option value="">'+u+"</option>"+n}if(a===1){n='<select class="selectnav" id="'+p(true)+'">'+n+"</select>"}a--;return n}e=document.getElementById(e);if(!e){return}if(!h(e)){return}if(!("insertAdjacentHTML"in window.document.documentElement)){return}document.documentElement.className+=" js";var n=t||{},r=n.activeclass||"active",i=typeof n.autoselect==="boolean"?n.autoselect:true,s=typeof n.nested==="boolean"?n.nested:true,o=n.indent||"›",u=n.label||"MENU",a=0,f=" selected ";e.insertAdjacentHTML("afterend",d(e));var l=document.getElementById(p());if(l.addEventListener){l.addEventListener("change",c)}if(l.attachEvent){l.attachEvent("onchange",c)}return l};return function(t,n){e(t,n)}}();$(document).ready(function(){selectnav('nav');selectnav('nav1');selectnav('nav3');});
$(document).ready(function(){$("ul#sub-menus").parent("li").addClass("hasSub");$("#header-search .search-icon").click(function(){var e=$("#header-search input");if(e.is(":hidden")){e.fadeIn(300);$(this).removeClass("icon-search");$(this).addClass("icon-cancel");$("#menu").hide()}else{e.fadeOut(300);$(this).removeClass("icon-cancel");$(this).addClass("icon-search");$("#menu").show()}return false});$(document).bind("click",function(e){if($(e.target).parents("#header-search").length===0){$("#header-search input").fadeOut(300);$("#header-search .search-icn").removeClass("icon-cancel");$("#header-search .search-icn").addClass("icon-search");$("#menu").show()}});$(".menu li").each(function(){$(this).hoverTimeout(0,function(){$(this).children("ul").slideDown()},0,function(){$(this).children("ul").hide()})});var e="[";var t="]";$(".menu li *").replaceText(e,'<span class="msubtitle">');$(".menu li *").replaceText(t,"</span>");$(".menu #nav").show()});
//]]>
</script>
#header-tail{position:relative;float:left;width:100%;background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee;line-height:1.66}
.menu #nav{display:none}
.selectnav{display:none}
.selectnav{font:normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;border:0}
.sub-menu{display:none}
#menu li,#menu ul{transition:all 0s ease;-webkit-transition:all 0s ease;-moz-transition:all 0s ease;-o-transition:all 0s ease}
.menu ul li{float:left;padding:5px 0;display:inline;position:relative}
.menu ul li a{text-transform:uppercase;font-size:14px;color:#222;font-weight:500;padding:0 10px;display:block;height:35px;margin:0;position:relative;line-height:34px;}
.menu ul li a:hover{color:#3b5998}
.menu ul li ul li{padding:0;margin:0;display:block;float:none;background-color:#fff}
.menu ul li ul a:hover{color:#222}
.menu ul .hasSub a{text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;overflow:hidden;-webkit-box-orient:vertical;padding-right:30px}
.hasSub>a:after{right:11px}
.hasSub>a:after{content:'\f101';font-family:'Font Awesome 5 Solid';top:0px;position:absolute;color:#222;font-size:14px}
.mega-menu a:after{display:none}
.hasSub>a:after
.hasSub ul a:after{content:'';line-height:0}
.has-Sub:after{position:absolute;right:7px;top:50%;display:inline-block;content:'';width:0;height:0;border:4px solid transparent;border-top:4px solid #bbb}
.menu ul li ul{box-shadow:0 3px 10px 1px rgba(0,0,0,0.14);border-top:2px solid #3c8dbc;position:absolute;visibility:hidden;z-index:999;padding-top:0px;display:none;width:200px;-moz-transform:inherit;-o-transform:scale(0.7);-webkit-transform:scale(0.7);transform:scale(0.7);transition:all .3s ease-in-out!important;display:block!important;opacity:0;margin-top:3px}
.hasSub:hover>ul{visibility:visible;opacity:1;-moz-transform:scale(1.0);-o-transform:scale(1.0);-webkit-transform:scale(1.0);transform:scale(1.0)}
.menu ul li ul a{text-transform:none;color:#222;height:auto;line-height:16px;line-height:35px;height:35px;font-size:14px;font-weight:400}
.menu ul .mega-menu a{padding:0 11.4px!important}
.mega-menu li .hasSub>a:after{display:none}
.colst1,.colst2,.colst3{width:33.3333333%;padding:0 10px}
.colst1{float:left}
.colst2,.colst3{float:right}
.iconmn{margin:0 5px 0 0}
.stb{border-bottom:1px dotted rgba(0,0,0,0.15)}
@media screen and (max-width: 980px) {
#header-tail{background:#dddfe2;border:0}
.menu.section.row{width:100%!important}
.menu #nav{display:none!important}
.selectnav{display:block!important}
.menu .selectnav{float:left;width:100%;box-sizing:border-box;background-color:#f4f4f4;color:#222;border:2px solid #dddfe2!important;border-radius:3px;position:relative;top:0;height:45.3px;padding:10px}
}
0 Response to "Tạo menu Responsive cho blog của bạn"
Đăng nhận xét