CSS HTML 网络

纯 CSS3 动画导航菜单

一米

2011/05/11 10:07 一米 没有评论 2291 次浏览

纯 CSS3 动画导航菜单

此教程，完全使用CSS3 制作一个动态的导航菜单，不使用 JavaScript 等技术。

先来看 HTML

首先第一步是使用HTML完成网站的结构，此处 使用了很多 HTML5 方面的内容，但是对于IE6 7 8来说，必须使用另一种技术来使其支持 HTML5，这里使用 html5.js （详细），需要放在 <Head> 标签之中，使用了条件判断，只对IE有效。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <!-- Including the Lobster font from Google's Font Directory -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
        <!-- Enabling HTML5 support for Internet Explorer -->
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
   <body>
        <header>
            <h1>CSS3 Animated Navigation Menu</h1>
            <h2>&laquo; Read and download on Tutorialzine</h2>
        </header>
        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>
        <footer>Looks best in Firefox 4, usable everywhere.</footer>
    </body>
</html>

此处使用了Google  Web Font API,包括了100多种字体文件，可以随时使用在自己的项目上，当然都托管在 Google 的服务器上，不过几乎都是英文字体，对国内用处不是非常大。

在 Body 区域，使用了 header、nav、footer 三个 HTML5 标签，将文档分为语义化的三个部分，然后将 UL 标签放入 nav 标签中，此处即是我们的导航部分了。

在 UL 标签中，给了一个 属性为 fancyNav 的 class，用来控制一会将要写到的 CSS3 的样式，这样的好处是，可以分块来写，也能避免不必要的影响。另一件事情就是给每一个 Li 标签制定一个唯一的 ID ，这就是我们能够使用 :target 这样的伪类来定义当前被选中的元素的样式。

接下来是 CSS

这里我们除了首页的小房子使用了透明的 PNG 图像外，其他地方都没有使用图像，全部使用了 CSS3 的 CSS3 gradients, box shadows, 以及 multiple backgrounds.

虽然所有的浏览器都支持，但是现代浏览器还是支持的比较好，例如 Firefox 4，Chrome，Opera，对于 IE 类，哎呀，别再让我说了行不？

CSS 文件在 assets/styles.css 中，里面有很多样式，但是无关的就不多讲了，打开文件后定位到导航部分，下面就是，可以不用打开了，如果你不想学好的话。

先来看看这个 fancyNav 还有 li 的样式如何写。

.fancyNav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}
.fancyNav li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    border-right: 1px solid rgba(9, 9, 9, 0.125);
    /* Adding a 1px inset highlight for a more polished efect: */
    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
    float: left;
    list-style: none;
}

CSS3 gradient 几乎都被现代浏览器所支持，神马？IE 系，这是现代浏览器吗？你还让不让人活了？但是注意到此处有两种写法，一种是对 Firefox 的 有 moz 另一种是 针对 Chrome 的，webkit 即是。但是逐渐都会变化为标准样式的，也就是去掉前面的前缀。

接下来就是 :after 伪类，主要提供当鼠标悬停于菜单项目上时，产生一个阴影效果。

.fancyNav li:after{
    /* This creates a pseudo element inslide each LI */
    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;
    /* Gradients! */
    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    /* This will create a smooth transition for the opacity property */
    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}

当鼠标悬停的时候，gradient可以提供十分平滑的水平渐变，否则渐变就会不可见，当鼠标悬停时，然后使用 CSS3 动态的使其变为不可见直至透明，但是目前只有 Firefox 支持动态变化，其他浏览器都不支持，可惜。

然后使用 :first-child 和 :last-child 来确定第一个和最后一个项目的样式。

/* Treating the first LI and li:after elements separately */
.fancyNav li:first-child{
    border-radius: 4px 0 0 4px;
}
.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    border-radius:4px 0 0 4px;
}
.fancyNav li:last-child{
    border-radius: 0 4px 4px 0;
}
/* Treating the last LI and li:after elements separately */
.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    border-radius:0 4px 4px 0;
}
.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}

为了使第一个和最后一个不至于有难看的边框外漏，所以使用了圆角样式。

然后当鼠标移开的话，再使被选中的项目恢复原样。

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}
.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
    opacity:1 !important;
}

最后就是一些描点方面的样式。

/* Styling the anchor elements */
.fancyNav li a{
    color: #5d5d5d;
    display: inline-block;
    font: 20px/1 Lobster,Arial,sans-serif;
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}
.fancyNav a.homeIcon{
    background:url('../img/home.png') no-repeat center center;
    display: block;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    text-indent: -9999px;
    width: 16px;
}

好了，完成了。

来源：演示 | 下载

没有评论

  • :arrow:
  • :grin:
  • :???:
  • :cool:
  • :cry:
  • :shock:
  • :evil:
  • :!:
  • :idea:
  • :lol:
  • :mad:
  • :mrgreen:
  • :neutral:
  • :?:
  • :razz:
  • :oops:
  • :roll:
  • :sad:
  • :smile:
  • :eek:
  • :twisted:
  • :wink: