Khu vực giao lưu

Code:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>EFC- Diễn đàn Conan FC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
   <link rel="shortcut icon" href="http://skinanime.ucoz.net/icon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="http://skinanime.ucoz.net/home2/style.css" type="text/css" media="screen"/>
<style>
      body{
         background:#333 url(http://img580.imageshack.us/img580/1696/dc008.jpg) repeat top left;
         font-family:Arial;
      }
      span.reference{
         position:fixed;
         left:10px;
         bottom:10px;
         font-size:12px;
      }
      span.reference a{
         color:#aaa;
         text-transform:uppercase;
         text-decoration:none;
         text-shadow:1px 1px 1px #000;
         margin-right:30px;
      }
      span.reference a:hover{
         color:#ddd;
      }
      ul.sdt_menu{
         margin-top:150px;
      }
      h1.title{
         text-indent:-9000px;
         background:transparent url(http://up.ssc.vn/images/460coollogo_com_197434485.png) no-repeat top left;
         width:633px;
         height:69px;
      }
   </style>
</head>

<body>
   <div class="content">
      <h1 class="title">Skinanime.ucoz.net</h1>
      <ul id="sdt_menu" class="sdt_menu">
         <li>
            <a target="_blank" href="http://conan.forum7.net/forum">
               <img src="http://i.animecrazy.net/0214.jpg" alt=""/>
               <span class="sdt_active"></span>
               <span class="sdt_wrap">
                  <span class="sdt_link">Diễn đàn</span>
                  <span class="sdt_descr">Read More</span>
               </span>
            </a>
         </li>
         <li>
            <a target="_blank" href="http://conan.forum7.net/t13-topic">
               <img src="http://img218.imageshack.us/img218/8186/005am2.gif" alt=""/>
               <span class="sdt_active"></span>
               <span class="sdt_wrap">
                  <span class="sdt_link">Event</span>
                  <span class="sdt_descr">Read More</span>
               </span>
            </a>
            <<div class="sdt_box">
                  <a target="_blank" href="http://conan.forum7.net/t374-topic#5779">Thiết kế banner, header cho 4rum</a>
                  <a target="_blank" href="http://conan.forum7.net/t507-topic#7518">EFC got talent 2012-2013</a>
                  <a target="_blank" href="http://conan.forum7.net/t503-topic#7501">Thiết kế huy hiệu</a>
<a target="_blank" href="http://conan.forum7.net/t426-topic">Mở hộp nhận quà</a>
<a target="_blank" href="http://conan.forum7.net/f50-forum">Hội chế truyện</a>
            </div>
         </li>
         <li>
            <a target="_blank" href="http://conan.forum7.net/f32-forum">
               <img src="http://i.animecrazy.net/tv_detective_conan02.jpg" alt=""/>
               <span class="sdt_active"></span>
               <span class="sdt_wrap">
                  <span class="sdt_link">Shop</span>
                  <span class="sdt_descr">Read More</span>
               </span>
            </a>
<<div class="sdt_box">
                  <a target="_blank" href="http://conan.forum7.net/t505-topic">Shop DC (2) by Edo-kun</a>
                  <a target="_blank" href="http://conan.forum7.net/t385-topic">Shop DC (1) by Edo-kun</a>
                  <a target="_blank" href="http://conan.forum7.net/t501-topic#7500">Shop des rank by Rune</a>
         </li>
         <li>
            <a href="#">
               <img src="http://i48.servimg.com/u/f48/17/58/19/45/old10.png""/>
               <span class="sdt_active"></span>
               <span class="sdt_wrap">
                  <span class="sdt_link">Thảo luận Conan</span>
                  <span class="sdt_descr">Read More</span>
               </span>
            </a>
<<div class="sdt_box">
                  <a target="_blank" href="http://conan.forum7.net/f7-forum">Manga Conan</a>
                  <a target="_blank" href="http://conan.forum7.net/f9-forum">Bàn luận</a>
         </li>
         <li>
            <a target="_blank" href="http://conan.forum7.net/f47-forum">
               <img src="http://i30.tinypic.com/vsjpxt.gif" alt=""/>
               <span class="sdt_active"></span>
               <span class="sdt_wrap">
                  <span class="sdt_link">Căn phòng điều tra</span>
                  <span class="sdt_descr">Read More</span>
               </span>
            </a>
         </li>
         <li>
            <a target="_blank" href="http://conan.forum7.net/t481-topic#7522">
               <img src="http://i163.photobucket.com/albums/t307/yuki_hime_album/agasha20copy.jpg""/>
               <span class="sdt_active"></span>
               <span class="sdt_wrap">
                  <span class="sdt_link">Trả lương cho BQT</span>
                  <span class="sdt_descr">Read More</span>
               </span>
            </a>
            <div class="sdt_box">
               <a target="_blank" href="http://conan.forum7.net/t330-topic#5475">Ý kiến về EFC</a>
               <a target="_blank" href="http://conan.forum7.net/t269-topic">Ghi danh EFC</a>
               <a target="_blank" href="http://conan.forum7.net/t319-topic#5324"">Nhật ký DC</a>
            </div>
         </li>
      </ul>
   </div>
<div>
<span class="reference">

      <a target="_blank" href="http://skinanime.ucoz.net/index/8">Design By Waya-kun</a>
<a target="_blank" href="http://fairytails.1talk.net/">Code provided by RuneSlayer (fairytails.1talk.net) </a>
<a target="_blank" href="http://conan.forum7.net">Edit by Edo-kun (conan.forum7.net)</a>
</span>
   </div>


<script type="text/javascript" src="http://skinanime.ucoz.net/home2/jquery.min_2.js"></script>
   <script type="text/javascript" src="http://skinanime.ucoz.net/home2/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
         /**
         * for each menu element, on mouseenter,
         * we enlarge the image, and show both sdt_active span and
         * sdt_wrap span. If the element has a sub menu (sdt_box),
         * then we slide it - if the element is the last one in the menu
         * we slide it to the left, otherwise to the right
         */
$('#sdt_menu > li').bind('mouseenter',function(){
            var $elem = $(this);
            $elem.find('img')
               .stop(true)
               .animate({
                  'width':'170px',
                  'height':'170px',
                  'left':'0px'
               },400,'easeOutBack')
               .andSelf()
               .find('.sdt_wrap')
               .stop(true)
               .animate({'top':'140px'},500,'easeOutBack')
               .andSelf()
               .find('.sdt_active')
               .stop(true)
               .animate({'height':'170px'},300,function(){
               var $sub_menu = $elem.find('.sdt_box');
               if($sub_menu.length){
                  var left = '170px';
                  if($elem.parent().children().length $elem.index()+1)
                     left = '-170px';
                  $sub_menu.show().animate({'left':left},200);
               }
            });
         }).bind('mouseleave',function(){
            var $elem = $(this);
            var $sub_menu = $elem.find('.sdt_box');
            if($sub_menu.length)
               $sub_menu.hide().css('left','0px');

            $elem.find('.sdt_active')
               .stop(true)
               .animate({'height':'0px'},300)
               .andSelf().find('img')
               .stop(true)
               .animate({
                  'width':'0px',
                  'height':'0px',
                  'left':'85px'},400)
               .andSelf()
               .find('.sdt_wrap')
               .stop(true)
               .animate({'top':'25px'},500);
         });
});
</script>

<a href="http://www.forumvi.com" target="_blank"></a>
</body>
</html>

Demo: [You must be registered and logged in to see this link.]
Lưu ý:
không được xoá tên người design, người cung cấp code và người edit, hãy tôn trọng!
Nếu bạn là người edit trang này cho nó đẹp hơn thì bạn dùng code này: