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] Menu dạng ngăn xếp (stack)

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] Menu dạng ngăn xếp (stack) on Wed Jun 27, 2012 10:30 am

Admin

avatar
Administrators
Administrators
  • Demo : http://www.c3zone.net/html-h26.htm
  • Download: http://dl.dropbox.com/u/8039292/c3z_stack.rar

  • Code:
    <script type="text/javascript">
        $(function () {
      // Stack initialize
      var openspeed = 300;
      var closespeed = 300;
      $('.stack>img').toggle(function(){
          var vertical = 0;
          var horizontal = 0;
          var $el=$(this);
          $el.next().children().each(function(){
            $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
            vertical = vertical + 55;
            horizontal = (horizontal+.75)*2;
          });
          $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
            .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
          $el.animate({paddingTop: '0'});
      }, function(){
          //reverse above
          var $el=$(this);
          $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
          $el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
          $el.animate({paddingTop: '35px'});
      });
     
      // Stacks additional animation
      $('.stack li a').hover(function(){
          $("img",this).animate({width: '56px'}, 100);
          $("span",this).animate({marginRight: '30px'});
      },function(){
          $("img",this).animate({width: '50px'}, 100);
          $("span",this).animate({marginRight: '0'});
      });
    });
        </script>
    <style>
    .stack { position: fixed; bottom: 28px; right: 40px; }
    .stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
    .stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
    .stack ul li { position: absolute;  right:-40px; }
    .stack ul li img { border: 0; }
    .stack ul li span { display: none; white-space:nowrap}
    .stack .openStack li span {
      font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
      display:block;
      height: 14px;
      position:absolute;
      top: 17px;
      right:60px;
      line-height: 14px;
      border: 0;
      background-color:#000;
      padding: 3px 10px;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      color: #fcfcfc; font-size:10px;
      text-align: center;
      text-shadow: #000 1px 1px 1px;
      opacity: .85;
      filter: alpha(opacity = 85);
    }
    /* IE Fixes */
    .stack { _position: absolute; }
    .stack ul { _z-index:-1; _top:-15px; }
    .stack ul li { *right:5px; }</style>

     <div class="stack">
          <img style="padding-top: 35px;" src="http://illiweb.com/fa/pbucket.gif" alt="stack">
          <ul class="" style="top: -50px; left: 10px;" id="stack">
            <li style="top: 55px; left: -10px;"><a href="http://www.c3zone.net/"><span style="margin-right: 0px;">Trang chủ</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://illiweb.com/fa/pbucket.gif" alt="Trang chủ"></a></li>
            <li style="top: 55px; left: -10px;"><a href="http://www.c3zone.net/"><span style="margin-right: 0px;">Phần mềm</span><img style="width: 79px; display: inline; margin-left: 0px;"src="http://illiweb.com/fa/pbucket.gif" alt="Photoshop"></a></li>
            <li style="top: 55px; left: -10px;"><a href="http://www.c3zone.net/"><span style="margin-right: 0px;">Lướt web</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://illiweb.com/fa/pbucket.gif" alt="Safari"></a></li>
            <li style="top: 55px; left: -10px;"><a href="http://www.c3zone.net/"><span style="margin-right: 0px;">Ảnh lớp</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://illiweb.com/fa/pbucket.gif" alt="Coda"></a></li>
            <li style="top: 55px; left: -10px;"><a href="http://www.c3zone.net/"><span style="margin-right: 0px;">Dragon Ball</span><img style="width: 50px; display: inline; margin-left: 0px;" src="http://illiweb.com/fa/pbucket.gif" alt="Finder"></a></li>       
          </ul>
      </div>
    Chèn vào template tùy vị trí muốn hiển thị


newbie


Code bên trên nằm ở góc bên phải, dưới này là code nằm ở góc trái :
Code:
<script type="text/javascript">
    $(function () {
  // Stack initialize
  var openspeed = 300;
  var closespeed = 300;
  $('.stack>img').toggle(function(){
      var vertical = 0;
      var horizontal = 0;
      var $el=$(this);
      $el.next().children().each(function(){
        $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
        vertical = vertical + 55;
        horizontal = (horizontal+.75)*2;
      });
      $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
        .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
      $el.animate({paddingTop: '0'});
  }, function(){
      //reverse above
      var $el=$(this);
      $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
      $el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
      $el.animate({paddingTop: '35px'});
  });
 
  // Stacks additional animation
  $('.stack li a').hover(function(){
      $("img",this).animate({width: '56px'}, 100);
      $("span",this).animate({marginLeft: '30px'});
  },function(){
      $("img",this).animate({width: '50px'}, 100);
      $("span",this).animate({marginLeft: '0'});
  });
});
    </script>

<style>
.stack { position: fixed; bottom: 28px; left: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute;  left:-40px; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; white-space:nowrap}
.stack .openStack li span {
  font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
  display:block;
  height: 14px;
  position:absolute;
  top: 17px;
  left:60px;
  line-height: 14px;
  border: 0;
  background-color:#000;
  padding: 3px 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  color: #fcfcfc; font-size:10px;
  text-align: center;
  text-shadow: #000 1px 1px 1px;
  opacity: .85;
  filter: alpha(opacity = 85);
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *left:5px; }</style>

 <div class="stack">
      <img style="padding-top: 35px;" ilo-full-src="http://i50.tinypic.com/23gxp2p.png" src="http://illiweb.com/fa/pbucket.gif" alt="stack">
      <ul class="" style="top: -50px; right: 10px;" id="stack">
        <li style="top: 55px; right: -10px;"><a href="http://www.c3zone.net/"><span style="margin-left: 0px;">Trang chủ</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://illiweb.com/fa/pbucket.gif" alt="Trang chủ"></a></li>
        <li style="top: 55px; right: -10px;"><a href="http://www.c3zone.net/"><span style="margin-left: 0px;">Phần mềm</span><img style="width: 79px; display: inline; margin-left: 0px;"src="http://illiweb.com/fa/pbucket.gif" alt="Photoshop"></a></li>
        <li style="top: 55px; right: -10px;"><a href="http://www.c3zone.net/"><span style="margin-left: 0px;">Lướt web</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://illiweb.com/fa/pbucket.gif" alt="Safari"></a></li>
        <li style="top: 55px; right: -10px;"><a href="http://www.c3zone.net/"><span style="margin-left: 0px;">Ảnh lớp</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://illiweb.com/fa/pbucket.gif" alt="Coda"></a></li>
        <li style="top: 55px; right: -10px;"><a href="http://www.c3zone.net/"><span style="margin-left: 0px;">Dragon Ball</span><img style="width: 50px; display: inline; margin-left: 0px;" src="http://illiweb.com/fa/pbucket.gif" alt="Finder"></a></li>       
      </ul>
  </div>



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

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