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:

<nav class='pi-navigation' id='main-nav'>
<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 -->

- Đặt trong thẻ </b:skin> đoạn trong khung Source Code sau:

/*----navi-----*/
#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;
}

- Đặt trên thẻ </head>  đoạn Code sau:

<script type='text/javascript'>
//<![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>

Kết quả bạn sẽ có bản demo giống như template như sau:

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

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..