使用jQuery来实现菜单文字和图标动画效果

首页 »  互联•开发 »  jQuery教程 » 使用jQuery来实现菜单文字和图标动画效果

使用jQuery来实现菜单文字和图标动画效果

发布时间:2011/07/25     编译:Terry li - GBin1.com       原文:tympanus.net

今天我们将讲解如何使用jQuery创建一个鼠标悬浮后有动画效果的华丽菜单。主要的想法是使得某些元素幻灯消失,改变并且动画背景颜色,然后让元素以其它颜色幻灯出现。

这个菜单的灵感来自于一个网站: http://www.pelicanhotel.com/

主要的图标来自于incrediable Noun Project,它从全世界形象语言中收集,组织并且添加了高度可识别的图标,我们可以用一种快乐而有意义的方式去分享。

现在我们开始!

HTML标签

我们的HTML将是一系列的无规则的列表,在每一个列表项目中将包含一个拥有3个我们将用来创建动画效果的元素的anchor元素:

 

<ul id="sti-menu" class="sti-menu">
  <li data-hovercolor="#37c5e9">
    <a href="#">
      <h2 data-type="mText" class="sti-item">
        Some text
      </h2>
      <h3 data-type="sText" class="sti-item">
        Some more text
      </h3>
      <span data-type="icon" class="sti-icon sti-icon-care sti-item">
      </span>
    </a>
  </li>
  <li>...</li>
  ...
</ul>

data-hovercolor将会被用来设置鼠标悬浮后文字的颜色。同时,我们将设置data-type属性到每一个标题和图标的span。我们将在后面的javascript使用。

接下来我们设置样式!

 

在线演示及其更多内容请参考原文: 使用jQuery来实现菜单文字和图标动画效果

你可能感兴趣的:(jquery)