Menu dạng thư mục dơn giản cho blogger

về cơ bản menu này giống với các dạng menu dạng thư mục mình đã giới thiệu trước đây. Cấu tạo gồm các menu chính và các menu con ẩn hiển dạn thư mục như trên máy tính. Ngoài ra mình bổ xung thêm 2 nút mở rộng và thu gọn để tiện hơn cho menu.

Xem Demo ngay bên duwois. Hãy bấm vào các menu nha:

Mở rộng + | - Thu gọn

• Tiều đề 1
• Tiều đề 2
• Thư Mục 1
• Tiều đề 3
• Thư Mục 2
• Tiều đề 4

Có loại menu thư mục nào khác không?

Cấu trả lời là có. Mình đã giới thiệu 2 lọa menu dạng thư mục với Jquery rất mượt các bạn có thẻ theo dõi:

1. Menu dọc xổ xuống dạng thư mục từ JQuery cho blogspot style 1
2. Menu dọc xổ xuống dạng thư mục từ JQuery cho blogspot style 2

☼ Cách tiến hành:

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

2- Chọn Bố cục (Layout)

3- Chọn Thêm Tiện ích (Add widget)=> Tạo 1 widget HTML/Javarscrip và dán đoạn code bên dưới vào.

<style>
.treeview ul{
margin: 0px;
padding: 0;
}
.treeview li{
background: white url(http://2.bp.blogspot.com/-FBPFfVctrlM/UMSYxfJi8wI/AAAAAAAAEEE/CVjKbEce41U/s1600/list-namkna-blogspot-com.gif) no-repeat 0px 3px;
list-style-type: none;
padding-left: 32px;
margin-bottom: 3px;
}
.treeview li.submenu{
background: white url(http://2.bp.blogspot.com/-c2d2kx8XrLQ/UMSZGN6Z4iI/AAAAAAAAEEM/kfyYBfa_lak/s1600/foder-namkna-blogspot-com.gif) no-repeat  0px 3px;
cursor: hand !important;
cursor: pointer !important;
}
.treeview li.submenu ul{
display: none;
}
.treeview .submenu ul li{
cursor: default;
}
</style>
<script type="text/javascript" >
var persisteduls=new Object()
var ddtreemenu=new Object()
ddtreemenu.closefolder="http://2.bp.blogspot.com/-c2d2kx8XrLQ/UMSZGN6Z4iI/AAAAAAAAEEM/kfyYBfa_lak/s1600/foder-namkna-blogspot-com.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="http://3.bp.blogspot.com/-NLHy_eptL7g/UMSZk1iIyMI/AAAAAAAAEEU/EYnMl0VjVic/s1600/open-foder-namkna-blogspot-com.gif" //set image path to "open" folder image
//////////No need to edit beyond here///////////////////////////
ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
if (typeof persisteduls[treeid]=="undefined")
persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
for (var i=0; i<ultags.length; i++)
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist==true){ //if enable persist feature
var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload
}
}
ddtreemenu.buildSubTree=function(treeid, ulelement, index){
ulelement.parentNode.className="submenu"
if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index)){
ulelement.setAttribute("rel", "open")
ulelement.style.display="block"
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else
ulelement.setAttribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
ulelement.parentNode.onclick=function(e){
var submenu=this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel")=="closed"){
submenu.style.display="block"
submenu.setAttribute("rel", "open")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else if (submenu.getAttribute("rel")=="open"){
submenu.style.display="none"
submenu.setAttribute("rel", "closed")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")"
}
ddtreemenu.preventpropagate(e)
}
ulelement.onclick=function(e){
ddtreemenu.preventpropagate(e)
}
}
ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
var rootnode=document.getElementById(treeid)
var currentnode=ulelement
currentnode.style.display="block"
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
while (currentnode!=rootnode){
if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
currentnode.style.display="block"
currentnode.setAttribute("rel", "open") //indicate it's open
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
currentnode=currentnode.parentNode
}
}
ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
for (var i=0; i<ultags.length; i++){
ultags[i].style.display=(action=="expand")? "block" : "none"
var relvalue=(action=="expand")? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i].parentNode.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
}
}
ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
}
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
}
////A few utility functions below//////////////////////
ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
isfound=true
thearray.shift() //delete this element from array for efficiency sake
break
}
}
return isfound
}
ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
if (typeof e!="undefined")
e.stopPropagation()
else
event.cancelBubble=true
}
ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
</script>
<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Mở rộng  +</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">- Thu gọn</a>
<p></p>
<ul id="treemenu1" class="treeview">
  <li><a href="#">Tiều đề 1</a></li>
  <li><a href="#">Tiều đề 2</a></li>
  <li>Thư Mục 1
    <ul>
      <li><a href="#">Tiều đề 1.1</a></li>
      <li><a href="#">Tiều đề 1.2</a></li>
    </ul>
  </li>
  <li><a href="#">Tiều đề 3</a></li>
  <li>Thư Mục 2
    <ul>
      <li><a href="#">Tiều đề 2.1</a></li>
      <li>Thư Mục 2.1
        <ul>
          <li><a href="#">Tiều đề 2.1.1</a></li>
          <li><a href="#">Tiều đề 2.1.2</a></li>
        </ul>
      </li> 
    </ul>
  </li>
  <li><a href="#">Tiều đề 4</a></li>
</ul>
<script type="text/javascript">
//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)
</script>

Trong đó:

• Thay dấu thăng (#) thành URL địa chỉ bài viết hoặc nhãn bạn muốn cho vào menu.
• Các chữ Thư Mục  là tên các thư mục cính
• Các chữ Tiều đề là tên các menu con.

Chúc thành công!

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   

Phụ trách thiết kế : Mr.Mika 

Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 

Phụ trách kỹ thuật và kinh doanh : Mr. Sơn

Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!