Menu dọc đa tầng cho blogspot/blogger

Hướng dẫn tạo menu dọc đa tầng cho blogspot đơn giản, dễ thực hiện. Menu này khá nhỏ gọn và đầy đủ chức năng khi thiết kế website/blog.

XEM DEMO

Hướng dẫn thực hiện

Bước 1: Bạn đăng nhập Blogspot -> Mẫu -> Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ ]]></b:skin và dán đoạn CSS sau lên trước thẻ đó

#cssmenu-doc,#cssmenu-doc ul,#cssmenu-doc ul li,#cssmenu-doc ul li a{margin:0;padding:0;border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu-doc{width:200px;font-family:Helvetica,Arial,sans-serif;color:#fff;margin:70px auto}
#cssmenu-doc ul ul{display:none}
.align-right{float:right}
#cssmenu-doc > ul > li > a{padding:15px 20px;border-left:1px solid #1682ba;border-right:1px solid #1682ba;border-top:1px solid #1682ba;cursor:pointer;z-index:2;font-size:14px;font-weight:700;text-decoration:none;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.35);background:#36aae7;background:-webkit-linear-gradient(#36aae7,#1fa0e4);background:-moz-linear-gradient(#36aae7,#1fa0e4);background:-o-linear-gradient(#36aae7,#1fa0e4);background:-ms-linear-gradient(#36aae7,#1fa0e4);background:linear-gradient(#36aae7,#1fa0e4);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15)}
#cssmenu-doc > ul > li > a:hover,#cssmenu-doc > ul > li.active > a,#cssmenu-doc > ul > li.open > a{color:#eee;background:#1fa0e4;background:-webkit-linear-gradient(#1fa0e4,#1992d1);background:-moz-linear-gradient(#1fa0e4,#1992d1);background:-o-linear-gradient(#1fa0e4,#1992d1);background:-ms-linear-gradient(#1fa0e4,#1992d1);background:linear-gradient(#1fa0e4,#1992d1)}
#cssmenu-doc > ul > li.open > a{box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.15);border-bottom:1px solid #1682ba}
#cssmenu-doc > ul > li:last-child > a,#cssmenu-doc > ul > li.last > a{border-bottom:1px solid #1682ba}
.holder{width:0;height:0;position:absolute;top:0;right:0}
.holder::after,.holder::before{display:block;position:absolute;content:"";width:6px;height:6px;right:20px;z-index:10;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg)}
.holder::after{top:17px;border-top:2px solid #fff;border-left:2px solid #fff}
#cssmenu-doc > ul > li > a:hover > span::after,#cssmenu-doc > ul > li.active > a > span::after,#cssmenu-doc > ul > li.open > a > span::after{border-color:#eee}
.holder::before{top:18px;border-top:2px solid;border-left:2px solid;border-top-color:inherit;border-left-color:inherit}
#cssmenu-doc ul ul li a{cursor:pointer;border-bottom:1px solid #32373e;border-left:1px solid #32373e;border-right:1px solid #32373e;padding:10px 20px;z-index:1;text-decoration:none;font-size:13px;color:#eee;background:#49505a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)}
#cssmenu-doc ul ul li:hover > a,#cssmenu-doc ul ul li.open > a,#cssmenu-doc ul ul li.active > a{background:#424852;color:#fff}
#cssmenu-doc ul ul li:first-child > a{box-shadow:none}
#cssmenu-doc ul ul ul li:first-child > a{box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)}
#cssmenu-doc ul ul ul li a{padding-left:30px}
#cssmenu-doc > ul > li > ul > li:last-child > a,#cssmenu-doc > ul > li > ul > li.last > a{border-bottom:0}
#cssmenu-doc > ul > li > ul > li.open:last-child > a,#cssmenu-doc > ul > li > ul > li.last.open > a{border-bottom:1px solid #32373e}
#cssmenu-doc > ul > li > ul > li.open:last-child > ul > li:last-child > a{border-bottom:0}
#cssmenu-doc ul ul li.has-sub > a::after{display:block;position:absolute;content:"";width:5px;height:5px;right:20px;z-index:10;top:11.5px;border-top:2px solid #eee;border-left:2px solid #eee;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg)}
#cssmenu-doc ul ul li.active > a::after,#cssmenu-doc ul ul li.open > a::after,#cssmenu-doc ul ul li > a:hover::after{border-color:#fff}

Bước 2: Tiếp tục tìm đến thẻ đóng </body> của blog và dán đoạn Javascript sau lên trên

<script type='text/javascript'>
//<![CDATA[
(function($) {
    $(document).ready(function() {
        $('#cssmenu-doc li.has-sub>a').on('click', function() {
            $(this).removeAttr('href');
            var element = $(this).parent('li');
            if (element.hasClass('open')) {
                element.removeClass('open');
                element.find('li').removeClass('open');
                element.find('ul').slideUp();
            } else {
                element.addClass('open');
                element.children('ul').slideDown();
                element.siblings('li').children('ul').slideUp();
                element.siblings('li').removeClass('open');
                element.siblings('li').find('li').removeClass('open');
                element.siblings('li').find('ul').slideUp();
            }
        });

        $('#cssmenu-doc>ul>li.has-sub>a').append('<span class="holder"></span>');

        (function getColor() {
            var r, g, b;
            var textColor = $('#cssmenu-doc').css('color');
            textColor = textColor.slice(4);
            r = textColor.slice(0, textColor.indexOf(','));
            textColor = textColor.slice(textColor.indexOf(' ') + 1);
            g = textColor.slice(0, textColor.indexOf(','));
            textColor = textColor.slice(textColor.indexOf(' ') + 1);
            b = textColor.slice(0, textColor.indexOf(')'));
            var l = rgbToHsl(r, g, b);
            if (l > 0.7) {
                $('#cssmenu-doc>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
                $('#cssmenu-doc>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
            } else {
                $('#cssmenu-doc>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
                $('#cssmenu-doc>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
            }
        })();

        function rgbToHsl(r, g, b) {
            r /= 255, g /= 255, b /= 255;
            var max = Math.max(r, g, b),
                min = Math.min(r, g, b);
            var h, s, l = (max + min) / 2;

            if (max == min) {
                h = s = 0;
            } else {
                var d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch (max) {
                    case r:
                        h = (g - b) / d + (g < b ? 6 : 0);
                        break;
                    case g:
                        h = (b - r) / d + 2;
                        break;
                    case b:
                        h = (r - g) / d + 4;
                        break;
                }
                h /= 6;
            }
            return l;
        }
    });
})(jQuery);
//]]>
</script>

Bước 3: Để menu này hiển thị, thường là bạn để bên thanh Sidebar của website/blog
Cách khác bạn có thể thêm tiện ích HTML mới trong bố cục và dán vào chỗ bạn muốn hiển thị widget này

<div id='cssmenu-doc'>
    <ul>
        <li><a href='#'><span>Home</span></a>
        </li>
        <li class='active has-sub'><a href='#'><span>Products</span></a>
            <ul>
                <li class='has-sub'><a href='#'><span>Product 1</span></a>
                    <ul>
                        <li><a href='#'><span>Sub Product</span></a>
                        </li>
                        <li class='last'><a href='#'><span>Sub Product</span></a>
                        </li>
                    </ul>
                </li>
                <li class='has-sub'><a href='#'><span>Product 2</span></a>
                    <ul>
                        <li><a href='#'><span>Sub Product</span></a>
                        </li>
                        <li class='last'><a href='#'><span>Sub Product</span></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href='#'><span>About</span></a>
        </li>
        <li class='last'><a href='#'><span>Get Widget</span></a>
        </li>
    </ul>
</div>