Tạo menu nhiều cấp thả xuống (Multi-level dropdown menu) dạng Responsive đẹp mắt cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

Gần đây CNTT đã có chia sẻ các bạn bài viết Hướng dẫn tạo Menu thả xuống (Menu Dropdown) nhiều cấp dạng Responsive với CSS3 và tiếp theo về thủ thuật tạo menu dạng Responsive, hôm nay mình chia sẻ thêm một Style menu dropdown nhiều cấp đẹp mắt để các bạn tham khảo.

Menu hiển thị trên desktop khi sổ ngang qua phải

Menu hiển thị trên desktop khi sổ ngang qua trái

Menu dropdown khi xem trên điện thoại

1. Đầu tiên các bạn đăng nhập Blogger
2. Vào phần chỉnh sửa HTML của template
3. Copy và dán code bên dưới ngay trước thẻ </head>

<style>.stellarnav,.stellarnav li{
position:relative;
line-height:normal
}
.stellarnav{
width:100%;
z-index:9900;position:relative;
}
.stellarnav ul{
margin:0;
padding:0;
text-align:center
}
.stellarnav li{
list-style:none;
display:block;
margin:0;
padding:0;
vertical-align:middle
}
.stellarnav li a{
padding:15px;
display:block;
text-decoration:none;
color:#777;
font-size:inherit;
font-family:inherit;
box-sizing:border-box;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
transition:all .3s ease-out
}
.stellarnav>ul>li{
display:inline-block
}
.stellarnav>ul>li:hover{background:#4a3501}

.stellarnav>ul>li>a{
padding:20px 40px
}
.stellarnav ul ul{
top:auto;
width:220px;
position:absolute;
z-index:9900;
text-align:left;
display:none;
background:#ddd
}
.stellarnav li li{
display:block;
}
.stellarnav ul ul ul{
top:0;
left:220px
}
.stellarnav>ul>li:hover>ul>li:hover>ul{
opacity:1;
visibility:visible;
top:0;
}
.stellarnav>ul>li.drop-left>ul{
right:0
}
.stellarnav li.drop-left ul ul{
left:auto;
right:220px
}
.stellarnav.light,.stellarnav.light ul ul{
background:rgba(255,255,255,1)
}
.stellarnav.light li a{
color:#000
}
.stellarnav.light .call-btn-mobile,.stellarnav.light .close-menu,.stellarnav.light .location-btn-mobile,.stellarnav.light .menu-toggle{
color:rgba(0,0,0,1)
}
.stellarnav.dark{
background:#2f220e
}
.stellarnav.dark ul ul{
background:#4a3501
}
.stellarnav.dark li a{
color:#FFF
}
.stellarnav.dark .call-btn-mobile,.stellarnav.dark .close-menu,.stellarnav.dark .location-btn-mobile,.stellarnav.dark .menu-toggle{
color:rgba(255,255,255,1)
}
.stellarnav.fixed{
position:fixed;
width:100%;
top:0;
left:0;
z-index:9999
}
body.stellarnav-noscroll-x{
overflow-x:hidden
}
.stellarnav li.has-sub>a:after{
float: right;margin-top:-2px;margin-left: 10px;content: "\203a";color: inherit;font-family: 'FontAwesome';text-align: center;font-size: 150%;vertical-align: middle;-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-webkit-transform: rotate(90deg);
}
.stellarnav li li.has-sub>a:after{
float: right;margin-top: -2px;width: 15px;content: "\203a";color: inherit;font-family: 'icons';font-size: 125%;-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);
}
.stellarnav li.drop-left li.has-sub>a:after{margin-top: -4px;
float:left;
content:'\2039';
font-family:FontAwesome;
margin-right:10px;margin-left:0;
}
.stellarnav.hide-arrows li li.has-sub>a:after,.stellarnav.hide-arrows li.drop-left li.has-sub>a:after,.stellarnav.hide-arrows li.has-sub>a:after{
display:none
}
.stellarnav .dd-toggle{
display:none;
position:absolute;
top:0;
right:0;
padding:0;
width:48px;
height:48px;
text-align:center;
z-index:9999;
border:0
}
.stellarnav .dd-toggle i{
position:absolute;
margin:auto;
top:33%;
left:0;
right:0;
-webkit-transition:transform .3s ease-out;
-moz-transition:transform .3s ease-out;
transition:transform .3s ease-out
}
.stellarnav.mobile>ul>li>a.dd-toggle{
padding:0
}
.stellarnav li.call-btn-mobile,.stellarnav li.location-btn-mobile{
display:none
}
.stellarnav li.open>a.dd-toggle i{
-webkit-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-o-transform:rotate(135deg);
transform:rotate(135deg)
}
.stellarnav .call-btn-mobile,.stellarnav .close-menu,.stellarnav .location-btn-mobile,.stellarnav .menu-toggle{
display:none;
text-transform:uppercase;
text-decoration:none;
color:#777;
padding:15px;
box-sizing:border-box
}
.stellarnav .full{
width:100%
}
.stellarnav .half{
width:50%
}
.stellarnav .third{
width:33%;
text-align:center
}
.stellarnav .location-btn-mobile.third{
text-align:center
}
.stellarnav .location-btn-mobile.half{
text-align:right
}
.stellarnav.light .half,.stellarnav.light .third{
border-left:1px solid rgba(0,0,0,.15)
}
.stellarnav.light.left .half,.stellarnav.light.left .third,.stellarnav.light.right .half,.stellarnav.light.right .third{
border-bottom:1px solid rgba(0,0,0,.15)
}
.stellarnav.light .half:first-child,.stellarnav.light .third:first-child{
border-left:0
}
.stellarnav.dark .half,.stellarnav.dark .third{
border-left:1px solid rgba(255,255,255,.15)
}
.stellarnav.dark.left .half,.stellarnav.dark.left .third,.stellarnav.dark.right .half,.stellarnav.dark.right .third{
border-bottom:1px solid rgba(255,255,255,.15)
}
.stellarnav.dark.left .menu-toggle,.stellarnav.dark.right .menu-toggle,.stellarnav.light.left .menu-toggle,.stellarnav.light.right .menu-toggle{
border-bottom:0
}
.stellarnav.dark .half:first-child,.stellarnav.dark .third:first-child{
border-left:0
}
.stellarnav.mobile .fa{display:inline-block;font:normal normal normal 16px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.stellarnav.mobile .fa-close:before{content:"\2297";}
.stellarnav.mobile .fa-bars:before{content:"\2261";}
.stellarnav.mobile .fa-plus:before { content: "\002b";}
.stellarnav.mobile,.stellarnav.mobile.fixed{
position:static;
}
.stellarnav.mobile ul{
position:relative;
display:none;
text-align:left;
background:rgba(221,221,221,1)
}
.stellarnav.mobile.active>ul,.stellarnav.mobile>ul>li{
display:block
}
.stellarnav.mobile.active{
padding-bottom:0
}
.stellarnav.mobile>ul>li>a{
padding:15px
}
.stellarnav.mobile ul ul{
position:relative;
opacity:1;
visibility:visible;
width:auto;
display:none;
-moz-transition:none;
-webkit-transition:none;
-o-transition:color 0 ease-in;
transition:none
}
.stellarnav.mobile ul ul ul{
left:auto;
top:auto
}
.stellarnav.mobile li.drop-left ul ul{
right:auto
}
.stellarnav.mobile li a{
border-bottom:1px solid rgba(255,255,255,.15)
}
.stellarnav.mobile li.has-sub a{
padding-right:50px
}
.stellarnav.mobile>ul{
border-top:1px solid rgba(255,255,255,.15)
}
.stellarnav.mobile.light li a{
border-bottom:1px solid rgba(0,0,0,.15)
}
.stellarnav.mobile.light>ul{
border-top:1px solid rgba(0,0,0,.15)
}
.stellarnav.mobile li a.dd-toggle,.stellarnav.mobile.light li a.dd-toggle{
border:0
}
.stellarnav.mobile .call-btn-mobile,.stellarnav.mobile .close-menu,.stellarnav.mobile .dd-toggle,.stellarnav.mobile .location-btn-mobile,.stellarnav.mobile .menu-toggle{
display:inline-block
}
.stellarnav.mobile li.call-btn-mobile{
border-right:1px solid rgba(255,255,255,.1);
box-sizing:border-box
}
.stellarnav.mobile li.call-btn-mobile,.stellarnav.mobile li.location-btn-mobile{
display:inline-block;
width:50%;
text-transform:uppercase;
text-align:center
}
.stellarnav.mobile li.call-btn-mobile.full,.stellarnav.mobile li.location-btn-mobile.full{
display:block;
width:100%;
text-transform:uppercase;
border-right:0;
text-align:left
}
.stellarnav.mobile li.call-btn-mobile i,.stellarnav.mobile li.location-btn-mobile i{
margin-right:5px
}
.stellarnav.mobile.light ul{
background:rgba(255,255,255,1)
}

.stellarnav.mobile.dark ul{
background:#1f1608;z-index:999999;
}
.stellarnav.mobile.dark ul ul{
background:rgba(255,255,255,.08)
}
.stellarnav.mobile.light li.call-btn-mobile{
border-right:1px solid rgba(0,0,0,.1)
}
.stellarnav.mobile.top{
position:absolute;
width:100%;
top:0;
left:0;
z-index:9999
}
.stellarnav.mobile li li.has-sub>a:after,.stellarnav.mobile li.drop-left li.has-sub>a:after,.stellarnav.mobile li.has-sub>a:after{
display:none
}
.stellarnav.mobile.left>ul,.stellarnav.mobile.right>ul{
position:fixed;
top:0;
bottom:0;
width:100%;
max-width:280px;height:auto;
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch
}
.stellarnav.mobile.right>ul{
right:0
}
.stellarnav.mobile.left .close-menu,.stellarnav.mobile.right .close-menu{
display:inline-block;
text-align:right
}
.stellarnav.mobile.left>ul{
left:0
}
.stellarnav.mobile.left .call-btn-mobile.half,.stellarnav.mobile.left .call-btn-mobile.third,.stellarnav.mobile.left .close-menu.half,.stellarnav.mobile.left .close-menu.third,.stellarnav.mobile.left .location-btn-mobile.half,.stellarnav.mobile.left .location-btn-mobile.third,.stellarnav.mobile.right .call-btn-mobile.half,.stellarnav.mobile.right .call-btn-mobile.third,.stellarnav.mobile.right .close-menu.half,.stellarnav.mobile.right .close-menu.third,.stellarnav.mobile.right .location-btn-mobile.half,.stellarnav.mobile.right .location-btn-mobile.third{
text-align:center
}
.stellarnav.mobile.left .menu-toggle.half,.stellarnav.mobile.left .menu-toggle.third,.stellarnav.mobile.right .menu-toggle.half,.stellarnav.mobile.right .menu-toggle.third{
text-align:left
}
.stellarnav.mobile.left .close-menu.third span,.stellarnav.mobile.right .close-menu.third span{
display:none
}
@media only screen and (max-width :1023px){
.stellarnav{
overflow:hidden;
display:block
}
.stellarnav ul{
position:relative;
display:none
}
}
@media only screen and (max-width :420px){
.stellarnav.mobile .call-btn-mobile.third span,.stellarnav.mobile .location-btn-mobile.third span{
display:none
}
}

</style>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

<script type="text/javascript"> //<![CDATA[
!function(a){a.fn.stellarNav=function(n,i,s){nav=a(this),i=a(window).width();var e=a.extend({theme:"plain",breakpoint:1023,phoneBtn:!1,locationBtn:!1,sticky:!1,position:"static",showArrows:!0,closeBtn:!1,scrollbarFix:!1},n);return this.each(function(){function n(){var n=window.innerWidth;s>=n?(d(),nav.addClass("mobile"),nav.removeClass("desktop"),!nav.hasClass("active")&&nav.find("ul:first").is(":visible")&&nav.find("ul:first").hide()):(nav.addClass("desktop"),nav.removeClass("mobile"),nav.hasClass("active")&&nav.removeClass("active"),!nav.hasClass("active")&&nav.find("ul:first").is(":hidden")&&nav.find("ul:first").show(),a("li.open").removeClass("open").find("ul:visible").hide(),d(),v())}
if(("light"==e.theme||"dark"==e.theme)&&nav.addClass(e.theme),e.breakpoint&&(s=e.breakpoint),e.phoneBtn&&e.locationBtn)var t="third";else if(e.phoneBtn||e.locationBtn)var t="half";else var t="full";if(nav.prepend('<a href="#" class="menu-toggle '+t+'"><i class="fa fa-bars"></i> Menu</a>'),e.phoneBtn&&"right"!=e.position&&"left"!=e.position){var l='<a href="tel:'+e.phoneBtn+'" class="call-btn-mobile '+t+'"><i class="fa fa-phone"></i> <span>Call us</span></a>';nav.find("a.menu-toggle").after(l)}
if(e.locationBtn&&"right"!=e.position&&"left"!=e.position){var l='<a href="'+e.locationBtn+'" class="location-btn-mobile '+t+'" target="_blank"><i class="fa fa-map-marker"></i> <span>Location</span></a>';nav.find("a.menu-toggle").after(l)}
if(e.sticky&&(navPos=nav.offset().top,i>=s&&a(window).bind("scroll",function(){a(window).scrollTop()>navPos?nav.addClass("fixed"):nav.removeClass("fixed")})),"top"==e.position&&nav.addClass("top"),"left"==e.position||"right"==e.position){var o='<a href="#" class="close-menu '+t+'"><i class="fa fa-close"></i> <span>Close</span></a>',f='<a href="tel:'+e.phoneBtn+'" class="call-btn-mobile '+t+'"><i class="fa fa-phone"></i></a>',r='<a href="'+e.locationBtn+'" class="location-btn-mobile '+t+'" target="_blank"><i class="fa fa-map-marker"></i></a>';nav.find("ul:first").prepend(o),e.locationBtn&&nav.find("ul:first").prepend(r),e.phoneBtn&&nav.find("ul:first").prepend(f)}"right"==e.position&&nav.addClass("right"),"left"==e.position&&nav.addClass("left"),e.showArrows||nav.addClass("hide-arrows"),e.closeBtn&&"right"!=e.position&&"left"!=e.position&&nav.find("ul:first").append('<li><a href="#" class="close-menu"><i class="fa fa-close"></i> Close Menu</a></li>'),e.scrollbarFix&&a("body").addClass("stellarnav-noscroll-x"),a(".menu-toggle").on("click",function(n){n.preventDefault(),"left"==e.position||"right"==e.position?(nav.find("ul:first").stop(!0,!0).fadeToggle(250),nav.toggleClass("active"),nav.hasClass("active")&&nav.hasClass("mobile")&&a(document).on("click",function(n){nav.hasClass("mobile")&&(a(n.target).closest(nav).length||(nav.find("ul:first").stop(!0,!0).fadeOut(250),nav.removeClass("active")))})):(nav.find("ul:first").stop(!0,!0).slideToggle(250),nav.toggleClass("active"))}),a(".close-menu").click(function(){nav.removeClass("active"),"left"==e.position||"right"==e.position?nav.find("ul:first").stop(!0,!0).fadeToggle(250):nav.find("ul:first").stop(!0,!0).slideUp(250).toggleClass("active")}),nav.find("li a").each(function(){a(this).next().length>0&&a(this).parent("li").addClass("has-sub").append('<a class="dd-toggle" href="#"><i class="fa fa-plus"></i></a>')}),nav.find("li .dd-toggle").on("click",function(n){n.preventDefault(),a(this).parent("li").children("ul").stop(!0,!0).slideToggle(250),a(this).parent("li").toggleClass("open")});var d=function(){nav.find("li").unbind("mouseenter"),nav.find("li").unbind("mouseleave")},v=function(){nav.find("li").on("mouseenter",function(){a(this).addClass("hover"),a(this).children("ul").stop(!0,!0).slideDown(250)}),nav.find("li").on("mouseleave",function(){a(this).removeClass("hover"),a(this).children("ul").stop(!0,!0).slideUp(250)})};n(),a(window).on("resize",function(){n()})})}}(jQuery); //]]>
</script>

4. Tiếp theo bạn thêm code HTML bên dưới vào vị trí bạn muốn đặt menu cho Blogspot của mình.

<div id="main-nav" class="stellarnav">
<ul>
<li><a href="">Dropdown</a>
<ul>
<li><a href="#">How deep?</a>
<ul>
<li><a href="#">Deep</a>
<ul>
<li><a href="#">Even deeper</a>
<ul>
<li><li><a href="#">Item</a></li></li>
<li><li><a href="#">Item</a></li></li>
<li><li><a href="#">Item</a></li></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Here's a very long item. It can be as long as you want</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
<li><a href="">Item 6</a></li>
<li class="drop-left"><a href="">Drop Left</a>
<ul>
<li><a href="#">How deep?</a>
<ul>
<li><a href="#">Deep</a>
<ul>
<li><a href="#">Even deeper</a>
<ul>
<li><li><a href="#">Item</a></li></li>
<li><li><a href="#">Item</a></li></li>
<li><li><a href="#">Item</a></li></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('.stellarnav').stellarNav({
theme: 'dark',
position: 'left'
});
});
</script>

4. Bây giờ bạn Lưu template lại là xong.

Chúc bạn thành công!

Tham khảo Github

Chuyên mục: Blogspot nâng cao Blogspot tips