Oº°‘¨ [C]hia [S]ẻ [O]nline ¨‘°ºO
♥️Chào Mừng Các Bạn Ghé Thăm Forum Chia Sẻ Online♥️
Rất mong các bạn đăng ký làm thành viên để cùng
nhau chia sẻ mọi nỗi buồn vui
Chúc các bạn có những phút thư giãn vui vẻ
♥️Welcome to forum Chia Sẻ Online♥️
Welcome Guest, is this your first visit? Register
All times are GMT. The time now is 07:28 AM.

You are not connected. Please login or register

[Codes] Thanh Nav Menu trượt

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

1 [Codes] Thanh Nav Menu trượt on Fri Oct 05, 2012 7:09 am

Khóc Thầm

avatar
Thành Viên
Thành Viên
Demo :


Chức năng :
Trượt theo chuột và mờ khi xuống bên dưới


Cách làm :
Bước 1 : Vào Header tìm code sau


Code:
<div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>

Và thay thế nó = Code dưới :

Code:
<div id="nav1" style="opacity: 1; ">
    <ul>

      <li>{GENERATED_NAV_BAR}</li>
      <li class="logo"><a href="/forum"><h1>Cntt-k3</h1></a></li>
    </ul>
</div>
Bước 2 : Vào Css thêm đoạn này

Code:


#nav1 { 
    height: 50px;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 999;
    position: fixed; 
    border: none; 
    background: #fff url('http://i40.servimg.com/u/f40/17/00/71/83/button85.png') repeat-x center left; 
}


#nav1 ul {
    width: 800px; 
    height: 25px;
    margin: 15px auto 0px auto;
    list-style: none;
}


#nav1 ul li {
    margin: 0px 2px; 
    display: inline;
    float: left;
}


#nav1 a {
    height: 16px;
    line-height: 16px;
    float: left;
    padding: 2px 4px;

    background: transparent !important;

    text-decoration: none;
    cursor: pointer; 
    font-weight: bold;
    font-size: 12px; 
    color: #fff; 
}


#nav1 a:hover {
    background: transparent !important;
    -webkit-text-shadow: 0px 0px 20px #fff;
    -moz-text-shadow: 0px 0px 20px #fff; 
    -o-text-shadow: 0px 0px 20px #fff; 
    text-shadow: 0px 0px 20px #fff;
 
    color: #fff; 
}


#nav1 ul li.logo {
  margin-right: -100px;
    float: right;
    margin-top: -5px !important;
    color: #fff;
    font-family: 'Lobster Two';
 
    -webkit-text-shadow: 0px 0px 20px #fff;
    -moz-text-shadow: 0px 0px 20px #fff; 
    -o-text-shadow: 0px 0px 20px #fff; 
    text-shadow: 0px 0px 20px #fff; 
}
Bước 3 : Vào : MODULES >> HTML & JAVASCRIPT >>
Javascript codes managementChange a Javascript Code : Tạo 1 scripts mới



Title * : Menu trượt
Placement : In all the pages
Javascript Code * :

Code:
$(document).ready(function(){var x=$('#username').html();$('.templateuname').html(x)});$(function(){$(window).scroll(function(){var scrollTop=$(window).scrollTop();if(scrollTop!=0)$('#nav1').stop().animate({'opacity':'0.2'},400);else $('#nav1').stop().animate({'opacity':'1'},400)});$('#nav1').hover(function(e){var scrollTop=$(window).scrollTop();if(scrollTop!=0){$('#nav1').stop().animate({'opacity':'1'},400)}},function(e){var scrollTop=$(window).scrollTop();if(scrollTop!=0){$('#nav1').stop().animate({'opacity':'0.2'},400)}})});
Nguồn Cntt

Xem lý lịch thành viên http://blog.khoctham.us

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết