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 回答