Bạn đang truy cập tại: Home / / TẠO MENU NHIỀU CẤP BLOGSPOT ĐẸP (Định dạng Mobi và Desktop)

TẠO MENU NHIỀU CẤP BLOGSPOT ĐẸP (Định dạng Mobi và Desktop)

Đăng bài bởi Trần Tứ Liêm | 0 coment�rios


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!

TTL theo https://www.congnghethuthuat.net/

TẠO MENU NHIỀU CẤP BLOGSPOT ĐẸP (Định dạng Mobi và Desktop)

TẠO MENU NHIỀU CẤP BLOGSPOT ĐẸP (Định dạng Mobi và Desktop)

Bạn đang xem TẠO MENU NHIỀU CẤP BLOGSPOT ĐẸP (Định dạng Mobi và Desktop) tại Blog Trần Tứ Liêm Đừng quên nhấn LIKE và Chia Sẻ nếu bài viết có ích !




Hãy like hoặc chia sẽ
→

Blog Trần Tứ Liêm

Mình thích viết Blog, tìm hiểu Tử Vi, Phong Thủy, Kiến Trúc, nghiên cứu Lịch vạn niên, đọc sách tùm lum, hay chia sẽ kiến thức.

QUẢNG CÁO

THUỐC VIÊM XOANG ĐÔNG Y

BẢN ĐỒ BLOG

TỬ VI

GIẢI TRÍ

TÀI LIỆU

CÁ NHÂN

VỎ RAM HÀ TĨNH

Welcome to

Blog Trần Tứ Liêm
https://trantuliem.blogspot.com/

Xem nhiều nhất

Các chủ đề

Bài viết mới nhất

Bài viết theo thời gian

SƠ ĐỒ BLOG

TỬ VI

GIẢI TRÍ

TÀI LIỆU

CÁ NHÂN

Bài Nỗi Bật

Tổng số lượt xem trang