Question

我正在开发一个新网站，我的客户端对他想要尝试保留的菜单项进行了转换。问题是菜单是用Flash构建的（it can be seen here）。如何使用纯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>

Answer 1

看看这个演示：http://webinfocentral.com，右下角有一个小图片。它实现了CSS3动画。如果这是您正在寻找的，我将在下面包含代码片段（纯CSS3解决方案）。

此外，使用jQuery可以实现这些效果：.slideUp()（http://api.jquery.com/slideUp/）和.slideDown()（http://api.jquery.com/slideDown/）

CSS3背景弹出过渡

1 个答案: