Chúng ta sẽ bắt đầu ngay cho nóng. Và tất nhiên Demo là blog Yolks.
1.Thêm css:
Thêm đoạn css sau đây trước ]]></b:skin> :
#nav{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq_Wm1Kr5imyoJUj_nqjFby-k0PpLaHfqZ76lOzTnUUXdxZAohiJN9-oSHbA0ci6UO9xBFChKzy3veDQeHNzJ1PkjTwIYDPlNxs6l0xn-d8myng7_LYTDK8P5KWcRyPrP7_SfVHjM82xw/s1600/nav.png) repeat-x center left;
z-index:999999;
}
#nav ul{
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:600px;
}
#nav ul li{
display:inline;
float:left;
margin:0px 2px;
}
#nav a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4ikl9dKDLpHX-lpK6isN6O1NIIOpEulFjDq-mMlAr9kUf5dU-80MJZHZrH73NsX2_pdErzQW-531wc5x37xDohbR4GGLs9J1zbM8Q6do0aU5t7yO6glKGKA-lSQ1FUoXsjB8tXLgRUA/s1600/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#nav a:hover{
background:#D9D9DA none;
color: #fff;
}
#nav a.top span, #nav a.bottom span{
float:left;
width:16px;
height:16px;
}
#nav a.top span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsezl15w_CDp3JXs3vJSShj_zr7pC-02slX4i6YIdCv8GvScm1QC8OAxxN3PPuKlKqtnVT8LShmoge9qtOHz5dtUcSL46-EQUGqKAVzOVJWxClPm8zC5O_4SJoOru51Oa1pkZPM2TjkB4/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNeukVBrkMcysDlmdgqj3GjmfFuZTPjgJ_tLefaFOoQLtKXN2czVPXTIhixuEXUPs1iqT9FQ5Whoi_V4v87Hx8ismKNuJApms4XSlq_woNdhtDLlD76R-nqB-QN_ajN2AssRJdWVeMyl8/s1600/bottom.png) no-repeat center center;
}
#nav ul li.search{
float:right;
}
#nav input[type="text"]{
float:left;
border:1px solid #ccc;
margin:0px 1px 0px 50px;
padding:2px 2px 2px 2px;
}
input.searchbutton{
border:1px solid #ccc;
padding:1px;
cursor:pointer;
width:30px;
height:22px;
background:#E8E9EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_AFOg61VhSLoB5WM4ZD-4xXfZHmqEEeyIZ1btOzh7uEYuMjTqQKH3MdTLw-83B51oMuRPnz0xLk4Lh9yQrCwYBa958QGzW1zYyxYe07J_MHg2wEmm16yMiuZRQ5475FtsXLDnBj4xQyk/s1600/search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#D9D9DA;
}
2.Thêm html:
Thêm đoạn thẻ html trên đoạn sau <body> :
<div id='top'/>
<div id='nav'>
<ul>
<li><a class='top' href='#top'><span/></a></li>
<li><a class='bottom' href='#bottom'><span/></a></li>
<li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href="Link 1 ">Tên link 1</a></li>
<li><a href="Link 2 ">Tên link 2</a></li>
<li><a href="Link 3 ">Tên link 3</a></li>
<li><a href="Link 4 ">Tên link 4</a></li>
<li><a href="Link 5 ">Tên link 5</a></li>
<li><a href="Link 6 ">Tên link 6</a></li>
<li class='search'>
<form action='/search' class='left form' method='get'>
<input class='left text gray' name='q' onblur='if (this.value == "") {this.value = "Từ Khóa Tìm Kiếm";}' onfocus='if (this.value == "Từ Khóa Tìm Kiếm") {this.value ="";}' type='text' value='Từ Khóa Tìm Kiếm'/>
<input class='searchbutton' type='submit' value=''/>
</form>
</li>
</ul>
</div>
3.Thêm javascript:
Đặt đoạn code sau vào trước </body>
<script type='text/javascript'>Đoạn code trên để sử dụng scroll lên/xuống.
//<![CDATA[ $(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
//]]>
</script>
<div id='bottom'/>
Chúc các bạn thành công.
26 comments:
Rất hay ^^
@Độc chiêu Blog Cám ơn bác hihi
trông cũng khá bắt mắt nhưng nội dung của menu thì ít người kích vào đó lắm, chỉ có mỗi khung tìm kiếm và Home page là hay dùng
Cảm ơn nhé
Sao Yolks thiếu cái nút Home. Khó điều hướng bà cố
Bạn làm thiếu css rồi
@Yolks - CSS để trước ]]> nó không nhận mới đau, giờ làm được rồi mà menu nó không chịu fade đi... =="
This post has been removed by the author.
Nút lên #top không hoạt động hả Yolks!
Update lại code cho các bạn để thể hiện tốt trên mọi trình duyệt
@Huỳnh Nhật Hà Đã add rồi huhuhu
Lúc ở trên cùng của blog, nó che mất 1 phần của header, làm cho logo với header right bị mất 1 phần đó vợ ạ!
Hì lớp 9 rùi mà còn phải mang khăn quàng đỏ hả Yolks hề hề
ec ! thêm cái menu xong mất cái menu cũ rồi cho mất cai logo lun...
để dành có temp mới thì xài menu này
@Linh DungKhông sao mà hihihi
@Cu0nglsf Nếu có thì cho mình xem trước nhé
@Cu0nglsf Chắc là do trùng css đó thôi
@Linh Dung Nhà trường bắt chứ em đây cũng ko muốn
Cái này hay , áp dụng liền :D
Temp này đơn giản mà đẹp quá nhỉ , phần comment-block cho cách qua bên phải 1 tí là chuẩn luôn !
@VanLinhEx Em cố tình để nó như thế cho nó như bị cắt 1 miếng chìa vô ^^ mà chắc nghe lời a
@Quốc Vịnh Cho nó bí ẩn 1 chút , vậy nó có cái style riêng
@Nguyễn Văn Đức Em thấy nó làm dc rồi đó , hihi
:D sáng tạo vậy chú nhóc. Vote
no comment $-)
củm ơm anh.e làm dc rồi /hy
Post a Comment