Hướng dẫn tạo Menu Responsive tích hợp hệ thống menu dạng gạch dưới cho blogger - CongDEV

Hôm nay mình sẽ hướng dẫn các bạn tạo 1 menu Responsive trượt bên trái khá đẹp, tận dụng widget để làm hệ thông menu, Chắc hẳn 1 số bạn sử dụng template responsive đã thấy kiểu menu dạng linklist rồi nhỉ, khá là dễ sử dụng cũng như chỉnh sửa phải không nào.

Responsive Blogger Menus: 3-Level dropdown from list

Hướng dẫn tạo Menu Responsive tích hợp hệ thống menu dạng gạch dưới cho blogger

Demo

Mục lục

Các bước thực hiện

Bước 1: Truy cập Blogger.com > Bố cục > Thêm tiện ích > Danh sách liên kết - Bạn thêm tiện ích danh sách liên kết.
Bước 2: Tạo một danh sách liên kết với tối đa 3 cấp độ. Mỗi dấu gạch dưới ở đầu tên tương ứng với 1 cấp


parentlink
    _childlink
    __grandchildlink

Sau đó lưu lại.

Tạo hiệu ứng di chuyển nền chữ theo trỏ chuột đẹp mắt

Ảnh minh họa

Bước 3 - Thêm css và js: Bây giờ chúng ta sẽ chỉnh sửa, cá nhân hóa lại các phần tử css/js cho đúng với sở thích của mình. Trước hết bạn kiểm tra lại id wiget mình vừa tạo (có nhiều cách kiểm tra, bạn nào k biết tra google nhé!). Nếu bạn chỉ có một danh sách liên kết trong blog của mình, thì mặc định id sẽ là linklist1. Nhưng vì blogger cho phép tạo nhiều hộp danh sách liên kết nên bạn phải chắc chắn ID của hộp widget mình vừa tạo. Vậy nên mình khuyên các bạn hãy kiểm tra xem. Đối với mình Id là LinkList1.
- Chèn đoạn code sau trên thẻ

</body>


<script>
$(function() {

    // SETTINGS
    //------------------------------------------------------    
    var one_level_list_element = $('#LinkList1 ul'), // mandatory!
        menu_name = 'Navigation', // this will be used next to the hamburger icon for the toggle Button
        menu_wrapper_class = 'menu',
        parent_item_class = 'parent',
        child_item_class = 'child-item',
        grandchild_item_class = 'grandchild-item',
        children_wrapper_class = 'level-two',
        grandchildren_wrapper_class = 'level-three';

    // DOM SETUP
    //------------------------------------------------------

    // locate children and grandchildren and store in variable
    var grandchild = $('li a:contains("__")'),
        child = $('li a:contains("_")');

    // if list wrapper has no class add class nav, otherwise store class in variable
    if (one_level_list_element.attr('class') == undefined) {
        one_level_list_element.addClass('nav');
        var ul_wrapper = 'nav';
    } else {
        var ul_wrapper = one_level_list_element.attr('class');
    }

    // Add class to child items
    child.parent().addClass(child_item_class);

    // wrap children in ul
    var citem = $('.' + child_item_class);
    for (var i = 0; i < citem.length;) {
        i += citem.eq(i).nextUntil(':not(.' + child_item_class + ')').andSelf().wrapAll('<ul></ul>').length;
    }
    citem.parent().addClass(children_wrapper_class);

    // add class to grandchildren
    grandchild.parent().addClass(grandchild_item_class);

    // wrap grandchildren in ul
    var gitem = $('.' + grandchild_item_class);
    for (var i = 0; i < gitem.length;) {
        i += gitem.eq(i).nextUntil(':not(.' + grandchild_item_class + ')').andSelf().wrapAll('<ul></ul>').length;
    }
    gitem.parent().addClass(grandchildren_wrapper_class);

    // add class to parents
    $('.' + ul_wrapper + ' > li').addClass(parent_item_class);

    // remove underscores from Names
    $('.' + ul_wrapper + ' a').each(function() {
        $(this).text($(this).text().replace(/_/g, ' '));
    });

    // append Grandchildren to Children
    $('.' + children_wrapper_class + ' > .' + child_item_class).each(function() {
        if ($(this).next().is('.' + grandchildren_wrapper_class)) {
            $(this).next().appendTo($(this));
        }
    });

    // append Children to parents
    $('.' + ul_wrapper + ' > .' + parent_item_class).each(function() {
        if ($(this).next().is('.' + children_wrapper_class)) {
            $(this).next().appendTo($(this));
        }
    });

    // wrap navigation in div container
    $('.' + ul_wrapper).wrap('<div class="' + menu_wrapper_class + '"></div>');

    // add toggle Links to open and close (uses Font-Awesome)
    $('.' + menu_wrapper_class).before('<span class="navtoggle outside"><i class="fa fa-navicon"></i> ' + menu_name + '</span>');

    $('.' + menu_wrapper_class).prepend('<span class="navtoggle"><i class="fa fa-close"></i></span>');

    // add toggle open link for level one and two (uses FontAwesome again)
    $('.' + children_wrapper_class).before('<i class="fa fa-fw fa-angle-down"></i>');
    $('.' + grandchildren_wrapper_class).before('<i class="fa fa-fw fa-angle-right"></i>');

    // now the basic HTML structure is created, we are ready to care about the menu functionality now

    // MENU STUFF
    //------------------------------------------------------

    // Open function for parents
    $('.fa-angle-down').click(function() {
        if ($(this).siblings('.' + children_wrapper_class).is(':hidden')) {
            $('.' + menu_wrapper_class + ' .' + children_wrapper_class).slideUp();
            $(this).siblings('.' + children_wrapper_class).slideToggle();
        } else {
            $(this).siblings('.' + children_wrapper_class).slideUp();
        }
    });

    // Open function for children
    $('.fa-angle-right').click(function() {
        if ($(this).siblings('.' + grandchildren_wrapper_class).is(':hidden')) {
            $('.' + menu_wrapper_class + ' .' + grandchildren_wrapper_class).slideUp();
            $(this).siblings('.' + grandchildren_wrapper_class).slideToggle();
        } else {
            $(this).siblings('.' + grandchildren_wrapper_class).slideUp();
        }
    });

    // toggle active Class to open and close off-canvas Menu 
    // also change the angled icon's direction for children
    $('.navtoggle').click(function() {
        $('.' + menu_wrapper_class).toggleClass('active');
        $('.' + children_wrapper_class + ' .fa').toggleClass('fa-angle-right, fa-angle-down');
    });

    // add class to child-item which has Grandchildren 
    // (so that toggle and link can be placed on one line)
    if ($('li > .fa-angle-right').length > 0) {
        $('li > .fa-angle-right').parent().addClass('sharewidth');
    }

    // grab the menu's height
    var menuheight = $('.' + menu_wrapper_class).outerHeight();

    // add this height as a margin to the body, so that the menu won't cover everything up.
    $('body').css('margin-top', menuheight + 10)
});
</script>

Chèn đoạn này trên thẻ

</head>


<style>
.Navigation {
  background: #B50A50;
  width: 100%;
  padding: 3px 7px;
  box-sizing: border-box;
  text-align: left;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.Navigation ul,
.Navigation li {
  margin: 0;
  padding: 0;
}
.Navigation a {
  color: white;
}
.Navigation a:hover, .Navigation a:focus {
  color: white;
}
.Navigation &gt; ul {
  width: 100%;
  position: relative;
  display: inline-block;
}
.Navigation &gt; ul li {
  display: inline-block;
  padding: 10px 7px;
}
.Navigation .fa {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  padding: 3px 0px;
  color: white;
  margin: 0 10px;
}
.Navigation .fa a {
  font-size: 0;
  padding: 0 !important;
}
.Navigation .fa:hover, .Navigation .fa:focus {
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.Navigation .level-two {
  display: none;
  position: absolute;
  background: #B50A50;
  top: 100%;
  left: auto;
}
.Navigation .level-two &gt; li {
  display: block;
  background: transparent;
  padding: 0;
  transition: .3s all ease;
  position: relative;
  white-space: nowrap;
}
.Navigation .level-two &gt; li:hover, .Navigation .level-two &gt; li:focus {
  background: rgba(255, 255, 255, 0.1);
}
.Navigation .level-two &gt; li a {
  width: 100%;
  display: block;
  padding: 10px 7px;
  box-sizing: border-box;
}
.Navigation .level-two .sharewidth &gt; a {
  display: inline-block;
  width: auto;
}
.Navigation .level-three {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: #B50A50;
}
.Navigation .level-three li {
  display: block;
  background: transparent;
  padding: 0;
  transition: .3s all ease;
  position: relative;
  white-space: nowrap;
}
.Navigation .level-three li:hover, .menu .level-three li:focus {
  background: rgba(255, 255, 255, 0.1);
}

@media screen and (min-width: 701px) {
  .navtoggle {
    display: none;
  }
}
@media screen and (max-width: 700px) {
  .outside {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 10px;
    box-sizind: border-box;
    text-align: left;
    z-index: 10;
    background: #291018;
    color: white;
  }
  .outside:hover, .outside:focus {
    color: #f2dfe5;
    cursor: pointer;
  }

  .Navigation {
    position: fixed;
    height: 100%;
    top: 0;
    left: -320px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transform: translate(0 0);
            transform: translate(0 0);
    max-width: 320px;
    transition: .3s all ease;
  }
  .Navigation .navtoggle {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    text-align: right;
    font-size: 0;
  }
  .Navigation .navtoggle .fa {
    font-size: 20px;
    border: 0 solid transparent;
  }
  .Navigation .navtoggle .fa:hover, .menu .navtoggle .fa:focus {
    background: transparent;
    opacity: .5;
  }
  .Navigation.active {
    -webkit-transform: translateX(320px);
            transform: translateX(320px);
    transition: .3s all ease;
  }
  .Navigation &gt; ul li {
    display: block;
  }
  .Navigation .level-two,
  .Navigation .level-three {
    position: relative;
    left: 0;
    top: 0;
  }
}
</style>

Hướng dẫn sử dụng

Bây giờ bạn chỉ việc chỉnh và sắp xếp lại menu theo ý mình thôi bằng cách vào phần Bố cục chỉnh sửa cái widget linklist mình tạo ở bước 1.
Phần css là mình demo mẫu cho bạn xem, bạn có thể sửa css thiết kế lại cho giao diện menu mà mình ưng ý nhất. Lưu ý có thể 1 số bạn làm sẽ gặp lỗi vì có thể phần css mới sẽ chèn lên phần css cũ, thì bạn lấy id của linklist như của mình là Linklist 1 thêm vào đoạn code rồi chèn vào cuối phần Jquery


        // add this height as a margin to the body, so that the menu won't cover everything up.
        $('body').css('margin-top', menuheight + 10)

        // below this comment is the new line
        $('#LinkList1').toggleClass('widget', '');

Hoàn thành

Lời kết

Đây là 1 dạng menu không mới nhưng nó sẽ làm cho template của bạn chuyên nghiệp hơn, dễ sử dụng cho các bạn mới dùng blogger. Chúc các bạn thành công nhé!

Tags: #Blogspot, #Tutorial, #Menu, #responsive

7/16/2018 Dlee191 bình luận