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

  • blogger

    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>

Thông tin tác giả
avatar
MEM LV2
Bài viết :
88
Points :
236
Like :
36
blogger
An toàn
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết