Tạo menu dropdown tùy chỉnh với linklist
Một trong những điểm yếu của Blogger là tuỳ chỉnh kém. Mỗi khi bạn muốn chỉnh sửa một cái gì đó bạn phải 'Chỉnh sửa HTML' để tìm mã link của các tập lệnh. Nó thực sự rất bất tiện, đặc biệt là cho người không có kiến thức về lập trình.
![[Blogger] Tạo menu dropdown (menu thả xuống ) tùy chỉnh Vaj3rBG](https://i.imgur.com/Vaj3rBG.jpg)
Vì vậy, trong bài viết này, tôi sẽ hướng dẫn bạn làm thế nào để sử dụng một “ LINKLIST ” để làm menu dropdown nhiều cấp.
Các nhu cầu các bạn không dùng đến dropdow thì có thể dùng kiểu mặc định ở bài này : http://www.hotrofm.net/t583-topic
1. Đầu tiên các bạn cho code này vào vị trí cần hiện menu
Code này sẽ không có css vì mỗi menu sẽ có style riêng và mình sẽ không để vào dành cho các bạn tự phát triển nhé.
Code:
<div class='tm-menu'>
<b:section class='menu row' id='menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>
<b:widget id='LinkList210' locked='true' title='Menu hotrofm' type='LinkList' version='1'>
<b:widget-settings>
<b:widget-setting name='link-5'>http://</b:widget-setting>
<b:widget-setting name='link-3'>http://</b:widget-setting>
<b:widget-setting name='link-4'>http://</b:widget-setting>
<b:widget-setting name='text-1'>_hotrofm cấp 2</b:widget-setting>
<b:widget-setting name='text-0'>hotrofm</b:widget-setting>
<b:widget-setting name='text-3'>_hotrofm cấp 2</b:widget-setting>
<b:widget-setting name='text-2'>__hotrofm cấp 3</b:widget-setting>
<b:widget-setting name='text-5'>hotrofm</b:widget-setting>
<b:widget-setting name='text-4'>hotrofm</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>http://</b:widget-setting>
<b:widget-setting name='link-2'>http://</b:widget-setting>
<b:widget-setting name='link-0'>http://</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<ul itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<b:loop values='data:links' var='link'>
<li itemprop='name'><a expr:href='data:link.target' itemprop='url'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<script>
//<![CDATA[
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||"- Navigation -",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($) {
var k = -1,
o = "",
p = "";
$("#menu").find("ul").find("li").each(function() {
for (var text = $(this).text(), url = $(this).find("a").attr("href"), x = 0, z = 0; z < text.length && (x = text.indexOf("_", x), -1 != x); z++)
x++;
if (level = z, level > k && (o += "<ul>", p += "<ul>"), level < k) {
offset = k - level;
for (var z = 0; z < offset; z++) o += "</ul></li>", p += "</ul></li>";
}
text = text.replace(/_/gi, ""), o += "<li><a href='" + url + "'>" + text + "</a>", p += "<li><a href='" + url + "'>";
for (var z = 0; z < level; z++) p += "";
p += text + "</a>", k = level;
});
for (var x = 0; k >= x; x++) o += "</ul>", p += "</ul>", 0 != x && (o += "</li>", p += "</li>");
$("#menu .LinkList").html(p), $("#menu > .LinkList > ul").attr("id", "nav1"), selectnav('nav1'), $("#menu ul > li > ul").parent("li").addClass("parent"), $("#menu .widget").attr("style", "display:block!important;");
});
//]]>
</script>2. Thêm tiện ích liên kết vào menu
Từ Bảng điều khiển Blogger các bạn vào phần Bố cục
Chỉnh sửa listlink như hình dưới đây
![[Blogger] Tạo menu dropdown (menu thả xuống ) tùy chỉnh 46vvmwT](https://i.imgur.com/46vvmwT.jpg)
Chú ý: phần __ (shift trừ này là tầng menu nhé) càng nhiều tầng thì thêm một _
và kết quả là đây
P/S: Tặng các thím cái css để các thím dễ hình dung
Code:
<style>
/* ######## Navigation Menu Css ######################### */
.selectnav {
display:none;
}
.tm-menu {
font-weight: 400;
margin: 0 auto;
}
ul#nav1 {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
#menu .widget {
display: none;
}
#menu {
height: 52px;
position: relative;
text-align: center;
z-index: 15;
margin:0 auto;
border-top: 1px rgba(230, 230, 230, 0.7) solid;
border-bottom: 1px rgba(230, 230, 230, 0.7) solid;
}
#menu ul > li {
position: relative;
vertical-align: middle;
display: inline-block;
padding: 0;
margin: 0;
transition: background .3s
}
#menu ul > li:hover > a {
color: $maincolor
}
#menu ul > li > a {
color: $textcolor;
font-size: 15px;
font-weight: 400;
line-height: 52px;
display: inline-block;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
margin: 0;
padding: 0 12px;
transition: color .3s;
}
#menu ul > li:first-child > a {
padding-left: 0
}
#menu ul > li > ul > li:first-child > a {
padding-left: 12px
}
#menu ul > li > ul {
position: absolute;
background: #fff;
border: 1px solid;
border-bottom: none;
border-color: #e5e5e5;
top: 100%;
left: 0;
min-width: 180px;
padding: 0;
z-index: 99;
margin-top: 0;
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px)
}
#menu ul > li > ul > li > ul {
position: absolute;
top: 0;
left: 180px;
width: 180px;
background: #fff;
z-index: 99;
margin-top: 0;
margin-left: 0;
padding: 0;
border-left: 1px solid #e5e5e5;
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px)
}
#menu ul > li > ul > li {
display: block;
float: none;
text-align: left;
position: relative;
border-bottom: 1px solid;
border-top: none;
border-color: #e5e5e5;
}
#menu ul > li > ul > li:hover {
background-color: rgba(255, 255, 255, 0.03)
}
#menu ul > li > ul > li a {
font-size: 11px;
display: block;
color: #827E79;
line-height: 35px;
text-transform: uppercase;
text-decoration: none;
margin: 0;
padding: 0 12px;
border-right: 0;
border: 0
}
#menu ul > li.parent > a:after {
content: '\f107';
font-family: FontAwesome;
float: right;
margin-left: 5px
}
#menu ul > li:hover > ul,
#menu ul > li > ul > li:hover > ul {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0)
}
#menu ul > li > ul > li.parent > a:after {
content: '\f105';
float: right
}
#menu ul ul {
transition: all .3s ease
}
</style>
