Menu Navigation neo đầu trang Web khi cuộn màn hình
Mẫu Menu Navigation có hình dáng như thế nầy:
Việc trước tiên, bạn hãy truy cập vào Blogger Dashboard bên trong tài khoản Google.
Mở phần Template ở mục Chủ đề, chọn Tab Edit Html (Chỉnh sửa Html).
Trình tự dùng tổ hợp phím Ctrl + F để tìm kiếm các thẻ màu xanh mình nêu bên dưới, để chép Code dán vào như hướng dẫn.
- Đặt trong thẻ đóng </header> đoạn trong khung Source Code sau:
Mở phần Template ở mục Chủ đề, chọn Tab Edit Html (Chỉnh sửa Html).
Trình tự dùng tổ hợp phím Ctrl + F để tìm kiếm các thẻ màu xanh mình nêu bên dưới, để chép Code dán vào như hướng dẫn.
- Đặt trong thẻ đóng </header> đoạn trong khung Source Code sau:
<nav class='pi-navigation' id='main-nav'>- Đặt trong thẻ </b:skin> đoạn trong khung Source Code sau:
<div class='main-menu'>
<ul class='menu' id='menu-main' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
<li itemprop='name'><a class='active' expr:href='data:blog.homepageUrl' itemprop='url'>Home</a></li>
<li><a href='#'>Chapter 1</a>
<ul class='sub-menu'>
<li itemprop='name'><a href='#' itemprop='url'>Part 1</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 2</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 3</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 4</a></li>
</ul>
</li>
<li itemprop='name'><a href='#' itemprop='url'>Chapter 2</a>
</li>
<li><a href='#'>Chapter 3</a>
<ul class='sub-menu'>
<li itemprop='name'><a href='#' itemprop='url'>Part 1</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 2</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 3</a></li>
</ul>
</li>
<li itemprop='name'><a href='#' itemprop='url'>Chapter 4</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Chapter 5</a></li>
</ul>
</div>
</nav>
<div class='clear'/>
<!-- secondary navigation menu end -->
/*----navi-----*/- Đặt trên thẻ </head> đoạn Code sau:
#nav {
font: normal bold 12px Arial, sans-serif;
text-transform: uppercase;
height: 59px;
line-height: 50px;
padding: 0 28px;
background: #F4F4F4;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
#main-nav {
margin: 0 auto;
width: 100%;
height: 60px;
background:#000;
border-top: 1px solid #e8e8e8;
border-bottom: 2px solid #5aa628;
}
#main-nav .menu-alert{
float:left;
padding:18px 0 0 10px ;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#main-nav ul li {
text-transform: uppercase; font-family: 'Droid Sans', sans-serif;
font-size:16px;
position: relative;
display: inline-block;
float: left;
height:60px;
}
#main-nav ul li:last-child a{border-right:0 none;} #main-nav ul li a {
display: inline-block;
height: 60px;
line-height: 60px;
padding: 0 16px;
text-decoration: none;
color: #b6b5b5;
font-family: Oswald,sans-serif;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
font-weight: 400;
line-height: 60px;
margin: 0;
padding: 0 .9em;
}
#main-nav ul li a.active {
color:#000;
}
#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{
display: none;
padding: 0;
position: absolute;
top: 60px;
width: 180px;
z-index: 99999;
float: left;
background: #2c2c2c;
}
#main-nav ul ul li, #main-nav ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border: 0 none;
font-size: 15px;
height: auto;
margin: 0;
}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul,
#main-nav ul li.current-menu-parent ul ul,
#main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{
border: 0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-right: 0 !important;
z-index: 99999;
color: #fff !important;
}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { color:#fff;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {background: #20C1DD !important; padding-left:15px !important;padding-right:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-left:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
text-shadow:0 1px 1px #b43300;
color:#FFF;
height:50px;
line-height:50px;
border-left:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#main-menu-mob,#top-menu-mob{
background: #222;
width: 710px;
padding: 5px;
border: 1px solid #000;
color:#DDD;
height: 27px;
margin:13px 0 0 10px;
}
#top-menu-mob{
width: 350px;
margin:2px 0 0 0;
}
#main-nav.fixed-nav{
position:fixed;
top:0;
left:0;
width:100% !important;
z-index:999;
opacity:0.9;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}
/* Page Navigation */
.pagenavi {
clear:both;margin:-5px 0 10px;margin-top:10px;padding:15px;text-align:left;font-size:13px;
}
.pagenavi span,.pagenavi a {
padding: 9px 15px;
display: inline-block;
background-color: #fff;
color: #333;
margin-left: 4px;
border: 1px solid #ddd;
margin-right: 4px;
transition: all .2s ease;}
.pagenav .pages {background-color:#f9f9f9;color:#999;transition:all .2s linear;}
.pagenavi a:hover {background-color:#20C1DD;color:#fff;}
.pagenavi .current { background-color: #20C1DD;
color: #fff;
border: 1px solid #20C1DD;}
.pagenavi .pages {
display:none;
}
<script type='text/javascript'>Kết quả bạn sẽ có bản demo giống như template như sau:
//<![CDATA[
jQuery(document).ready(function($){
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
slideshow: true,
directionNav:true,
slideshowSpeed: 5000,controlNav: true,
smoothHeight: true,
slideDirection: 'horizontal'
});
jQuery('.slides').addClass('loaded');
});
var aboveHeight = $('#leader-wrapper').outerHeight();
$(window).scroll(function(){
if ($(window).scrollTop() > 200){
$('#main-nav').addClass('fixed-nav').css('top','0').next()
.css('padding-top','0px');
} else {
$('#main-nav').removeClass('fixed-nav').next()
.css('padding-top','0');
}
});
});
//]]>
</script>
DEMO
http://khanhnguyen02.blogspot.com/
Source code nầy mình sưu tập được từ một Free template. Các bạn có thể dùng thử và tùy biến nhé. Chúc các bạn thành công với những gì mà mình chia sẽ.
Người viết: Nguyễn Đạt Khánh.
Bạn có thể xem thêm các chủ đề:
- Làm thế nào đăng ký tài khoản Google?
- Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
- vị trí của Javascript và Jquery
Được viết bởi Khánh Nguyễn
Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:
