[Blogger] Tạo menu dropdown (menu thả xuống ) tùy chỉnh

avatar

blogger80
220
30
blogger
An toàn
cập nhật
Thành viên quen thuộc
Thành viên quen thuộc

Bài viết :
80
Points :
220
Like :
30
blogger
An toàn
cập nhật

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.



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



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>
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá