0

サイドバーをアニメーションとしてドロップダウンさせるために使用できるプラグインを見つけるのに苦労しています。それはすでに機能していますが、ケーキにアイシングを加えるでしょう (キングダム ハーツ ファン)。サイドバーの作成に使用する CSS、JS、および HTML は次のとおりです。私はまだJSを学んでいるので、誰かがそれを理解するのを手伝ってくれるなら、それは素晴らしいことです!

$(function () {
    $(".sidebar-hidden, #menu-close").click(function (e) {
      e.stopPropagation();
      $(".sidebar-hidden").toggle();
      $(".sidebar").toggle();
    });
    $(document).click(function (e) {
      if ($(".sidebar").is(":visible")) {
        $(".sidebar-hidden").toggle();
        $(".sidebar").toggle();
      }
    });
    $(".sidebar").click(function (e) {
      e.stopPropagation();
    });
  });


.sidebar-hidden {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #86c7ff;
  position: absolute;
  padding: 8px;
  margin-left: 0;
}

.sidebar {
  position: absolute;
  padding: 8px;
  margin-left: 0;
  background-color: #86c7ff;
  line-height: 20px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  min-width: 105px;
  &:hover {
    display: block;
  }
  ul {
    margin: 0 0 0 5px;
    li {
      padding: 4px;
      border-top: dotted 1px;
      &:first-child {
        border-top: none;
      }
      a {
        text-indent: 3px;
        text-decoration: none;
        color: black;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
        display: block;
        &:hover {
          color: white;
          font-size: 17px;
        }
      }
    }
  }
}

<div class="sidebar-hidden">
  <i style="font-size: 18px" class="icon-arrow-right"></i>
</div>
<div class="sidebar" style="display: none;">
  <p id="menu-close" style="font-size: 18px; font-weight: bold;">Tools&nbsp;&nbsp;<i class="icon-arrow-left"></i></p>
  <ul>
    <li class="s-b-border"><a href="#"><i class="icon-calendar"></i> Syncro </a></li>
    <li class="s-b-border"><a id="Tool-BoM" href="#"><i class="icon-file"></i> BoM</a></li>
    <li><a href="#"><i class="icon-hdd"></i> Override&nbsp;</a></li>
  </ul>
</div>

*注: BoM が含まれているものはすべて、プロジェクト内の別のファイルに関連しているため、無視してください。

4

2 に答える 2

1

.toggle()durationは、サイドバーにアニメーション効果を追加するために指定できる引数として取ります。

あなたの場合、次のように置き換えます.toggle()。

.toggle("slow") //or number of milliseconds of the animation duration

リンクのテスト

于 2013-06-26T19:06:58.683 に答える
0

また、誰かがページのどこかをクリックすると、サイドバーが切り替わるようにも見えます。私はアンドリューが言ったことに行き、使用slideUp()しますslideDown()

于 2013-06-26T19:06:42.290 に答える