Menu cố định 3 chức năng đỉnh cho blogspot

» | 3 nhận xét | Thứ Năm, 13 tháng 10, 2011
Lại 1 menu Yolks sẽ hướng dẫn cho các bạn vào ngay hôm nay . Thú thuật không gì tuyệt bằng menu trên . Với tính năng Scroll Lên/Xuống và tính năng tìm kiếm thì quả thật là 3 trong 1.

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/AVvXsEgh7w4iyP4I70RUtoXKmgBvLXfNo2IUuPEq48zj4Mw9qFd9VCHkp9T3xH05XEictOZATv1TJxuwDDQarIVn5wYT3V-BoBzchB_J-Zc_FCpJHgbgSd-xjNQxN4_XOru5BS_HtEUT4-lGNHQ/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/AVvXsEj8NXA4hah3innCE9sbDJZ5-aC7HXyq0OeyQ6OKPBQajVzW8PEW1C5iLNhz47OjWYvH5mzTPGp2SLLxtDLYGnWHk2y_5623I0lruqOHP96vZpOCc72OFQ208xvyLTek43Y2mDzKnw1WHT0/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/AVvXsEjQmk2tUnUTekrYVPaIVSLAY09ekvg2IXz9eu8x3otk4t_xPyOhLaexraKqCqiSwKoA8h2yXQeEtjVc0rHzmxufGg6IUKTwIroljPS33T-kHplKx-2BIvGpcichxInZTiNXJxJD5nZN9yM/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS7J-RYoPcMiO9rFzrnADDcQ_7YXr4Pujd5rHM1cLnv5_iEwFQNgC0d8BndqXmSqfh5mzHTslYxM_kqNA1ExkGhrpWwRMb_JgZbgap7aJCTPXIQLZ2VMI_6tw8V-zImFybZgSpq-faLa8/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/AVvXsEjorO8Kpskxjwl7IpdpmrW2UX4sz58d6oRQ-E6_lIPG2LuHeTVMRQ-tm-Jy8vaPIVuVaWn46-tQEoq75sH8jEFy905CJePmzsVC37g2hfyUyddT99rynoHfXn2toUTQAU31MPtWfCUw5SA/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 == &quot;&quot;) {this.value = &quot;Từ Khóa Tìm Kiếm&quot;;}' onfocus='if (this.value == &quot;Từ Khóa Tìm Kiếm&quot;) {this.value =&quot;&quot;;}' 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'>
//<![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'/>
Đoạn code trên để sử dụng scroll lên/xuống.
Chúc các bạn thành công.


Xem bài viết khác :

3 nhận xét

Yolks
lúc 02:35 14 tháng 10, 2011 Trả lời

@Độc chiêu Blog Cám ơn bác hihi

Yolks
lúc 20:16 14 tháng 10, 2011 Trả lời

This comment has been removed by the author.

VIP
lúc 08:32 20 tháng 10, 2011 Trả lời

no comment $-)

Đăng nhận xét