Diễn Đàn Phan Ri Club Online

Chào Mừng Bạn Đến Với PhanRiClub Diễn Đàn Giao Lưu Kết Nối Bạn Bè ! Hãy Đăng Kí Thành Viên Để Chia Sẽ Nhưng Thủ Thuật Mà Bạn Biết & Còn Nếu Là Thành Viên Hãy Đăng Nhập Chia Sẽ Bài Viết Các Bạn Nhé ! Diễn Đàn Mới Thành Lập Còn Nhiều Thiếu Sót Rất Mong Sự Đóng Góp Nhiệt Tình Cửa Các Bạn ! Xin Cảm Ơn Các Bạn Nhiều

Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

[Hướng Dẫn - Code] Thanh Menu Trượt Bên Trái Màn Hình Đẹp Cho Forum

Share
    Admin
    avatar

    Giới Tính : Nam

    Xu : 25

    Điểm Cảm Ơn : 114

    Tham Gia : 18/10/2013

    Birthday : 11/03/1992


    #1

     on Wed Dec 21, 2016 12:56 am

    Demo:

    Cách Làm:
    Bước 1:Chèn Code Sau Vào overall_footer_begin:

    Code:
    <script type="text/javascript" src="http://www.marcofbb.com.ar/wp-content/uploads/2010/11/jquery-1.3.2.js"></script>
            <script type="text/javascript"> 
                $(function() {
                    $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
     
                    $('#navigation > li').hover(
                        function () {
                            $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                        },
                        function () {
                            $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                        }
                    );
                });
            </script> 
            <ul id="navigation"> 
                <li class="home"><a href="" title="Home"></a></li> 
                <li class="about"><a href="" title="About"></a></li> 
                <li class="search"><a href="" title="Search"></a></li> 
                <li class="photos"><a href="" title="Photos"></a></li> 
                <li class="rssfeed"><a href="" title="Rss Feed"></a></li> 
                <li class="podcasts"><a href="" title="Podcasts"></a></li> 
                <li class="contact"><a href="" title="Contact"></a></li> 
            </ul>
    Bước 2: Thêm Code Sau Vào CSS:
    Code:
    ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index: 999;
    }
    ul#navigation li {
    width: 100px;
    }
    ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    }
    ul#navigation .home a{
        background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/home.png);
    }
    ul#navigation .about a      {
        background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/id_card.png);
    }
    ul#navigation .search a      {
        background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/search.png);
    }
    ul#navigation .podcasts a      {
        background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/ipod.png);
    }
    ul#navigation .rssfeed a  {
        background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/rss.png);
    }
    ul#navigation .photos a    {
        background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/camera.png);
    }
    ul#navigation .contact a    {
        background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/mail.png);
    }



    Hãy Cùng Mình Xây Dựng Diễn Đàn PhanRiClub Các Bạn Nhé