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 Menu Trượt bên trái màn hình rất pro

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]

Minh Tuấn

avatar
Moderator
Moderator
demo:


Cách làm :
Cho code sau vào 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>
Tiếp theo cho 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);
}



I ♥️ Chia Sẻ Online,Khách viếng thăm
Xem lý lịch thành viên http://chiaseonline.forumvi.com

Crazy Roy

avatar
Moderator
Moderator
là sao zậy ?

Code:
Lỗi

Detected error
We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

We advise you to reread your code.

add code gì vô CSS là vậy, chán

Xem lý lịch thành viên http://game4ever.us.to/
là do CSS thiếu đi 1 thẻ kết thúc "{" hoặc thẻ này "}" mò mẫn rùi thêm vào đi nghen.hehe

Xem lý lịch thành viên http://streetcrew.forum.st/

Admin

avatar
Administrators
Administrators
Crazy Roy đã viết:là sao zậy ?

Code:
Lỗi

Detected error
We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

We advise you to reread your code.

add code gì vô CSS là vậy, chán
thêm } vào cuối codes...



Xem lý lịch thành viên http://chiaseonline.forumvi.com/

Sponsored content


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