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 Chia Sẻ nếu bài viết có ích !




Hãy like hoặc chia sẽ

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.

TỬ VI NĂM NAY

TỬ VI NĂM 2022

BẢN ĐỒ BLOG

Blog Nhỏ Tình Yêu Lớn

Welcome to

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

Xem nhiều nhất

  • CÂU ĐỐ MẸO VUI, HAY Câu đố mẹo vui và rất hay TTL Blog  sưu tập và tổng hợp những  câu đố mẹo  có đáp án vui hay nhất. Chúc ...
  • TRUYỆN TRANH TRẠNG QUỲNH - TRẠNG QUỶNH - TRẠNG QUỲNH ONLINE Lưu ý khi đọc truyện (bạn nhấn nút Ctrl và lăn chuột để phóng to - đọc...
  • Đây là bộ lịch vạn sự soạn thảo công phu, được rất nhiều nhà tuyển trạch sử dụng! Và nó sẽ còn được tiếp tục phát triển.  TẢI LỊCH VẠ...
  • Lịch Excel 2023 ở đây, bạn có thể tải về và sử dụng tùy mục đích: DOWNLOAD LỊCH EXCEL 2023 Tác giả: Trần Tứ Liêm Nhà xuất bản: Không Loại f...
  • ĐỔNG CÔNG TUYỂN TRẠCH NHẬT YẾU DỤNG (Tài liệu chưa rõ nguồn gốc) TẢI SÁCH ĐỔNG CÔNG TUYỂN TRẠCH Đổng công tuyển trạch PDF Đổng côn...
  • Giới thiệu về sách Trạch Nhật SÁCH TRẠCH NHẬT, TRẠCH NHẬT, SACH TRACH NHAT, TRACH NHAT SÁCH TRẠCH NHẬT (Tuệ Minh - Võ Văn Ba biên...
  • Sách thông thư triều Nguyễn SÁCH THÔNG THƯ, SACH THONG THƯ, THÔNG THƯ, THONG THƯ SÁCH THÔNG THƯ Xuất bản bởi Phúc Văn Đường tàng bả...
  •  Tử vi năm 2023 - Quý Mão blog Trần Tứ Liêm Ngừng Xuất Bản Thành thật xin lỗi
  • Sưu tầm được một số bản vẽ ít ỏi của ngôi chùa Bái Đính xin post lên cho ai có nhu cầu tham khảo! Đây là những bản vẽ autocad nhé bạn! ...
  • Đây là file thiết kế Cây Phả Hệ cho dòng Họ Trần , được thiết kế trên phần mềm Autocad, nên rất chuẩn trong quá trình In ấn, điêu khắc... ...

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

Bài viết theo thời gian

SƠ ĐỒ BLOG

Bài Nỗi Bật

Tổng số lượt xem trang