0

私は新しいサイトに取り組んでおり、私のクライアントは試して維持したいメニュー項目の移行を行っています。問題は、メニューが Flash で作成されていることです (ここで確認できます)。純粋な CSS を使用してそのような動きを再現するにはどうすればよいですか? おそらく Javascript でこれを行うこともできますが、可能であれば純粋な CSS で行いたいと考えています。

テキストの移動は必須ではないことに注意してください。ただし、それも可能であればよいと思います。私が現在持っているリストのHTMLは次のとおりです。

<div class="menu-main-container">
<ul id="menu-main" class="top_nav inline unstyled">
  <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item active page_item page-item-59 current_page_item menu-item-61"><a href="http://ali.moberemk.com/">Home</a></li>
  <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://ali.moberemk.com/buyers/">Buyers</a></li>
  <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://ali.moberemk.com/sellers/">Sellers</a></li>
  <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://ali.moberemk.com/about-me/">About Me</a>
    <ul class="sub-menu">
      <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://ali.moberemk.com/testimonials/">Testimonials</a></li>
    </ul>
  </li>
  <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://ali.moberemk.com/listings/">Listings</a></li>
  <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://ali.moberemk.com/contact-me/">Contact Me</a></li>
</ul>
</div>
4

1 に答える 1

0

このデモを見てみましょう: http://webinfocentral.com、右下隅の小さな画像。CSS3アニメーションを実装しています。これがあなたが探しているものである場合は、以下のコード スニペットを含めます (純粋な CSS3 ソリューション)。

また、これらの効果は jQuery を使用して実現できます: .slideUp()( http://api.jquery.com/slideUp/ ) および.slideDown()( http://api.jquery.com/slideDown/ )

于 2013-05-10T16:03:20.123 に答える