【实战HTML5与CSS3 第二篇】绚丽的快速导航！-优快云博客

本文介绍了一个结合CSS3与jQuery实现的快速导航特效。通过详细讲解和示例代码，展示了如何创建一个拥有绚丽动画效果的快速导航栏，并讨论了在不同浏览器下的兼容性和性能优化问题。

【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！

【实战HTML5与CSS3 第二篇】绚丽的快速导航！

【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)

前言

今天9点就起来了，因为下午出去有个聚会，所以就早点起来进行，否则这个进度有点吃紧啊，昨天初略的完成了导航以及爆炸的图片，这里来回顾下：

1 导航为一个div背景跟着导航栏目移动，并有一定抖动感觉，这个完全是jquery的东西了，若是用css3我暂时没有想到解决方案；

2 图片爆炸功能，这个功能就现在来说都是有很多问题的，都不能用瑕疵来说，第一效果不能达到我的要求，第二性能上恐怕有问题，这块也亟待优化。

但是，昨天纠结爆炸这块纠结了4、5个小时，若是现在再耗时间，恐怕这次计划就落空了，所以先以进度为要吧。

绚丽的快速导航

我们来看看他这个快速导航干了些什么？

我们看到他这个效做的十分绚丽的：

点击快速导航后，整个图标跑到了中心位置，然后里面的菜单再从几个方向蹦出来，点击关闭后又还原了，真是令人动容的用户感受啊！

那我们来看看该如何实现呢？用jquery我想应该是可以实现的，但是我这里想试试CSS3可否完成我的要求，于是我们一起动手吧。

做的过程中我就不完全照着他的方法来了吧，加一点点自己的小创意：那个关闭按钮我们用CSS3来做！

基本结构如下：

复制代码

1 <!DOCTYPE html>

2 <html xmlns="http://www.w3.org/1999/xhtml">

3 <head>

4 <title></title>

5 <style type="text/css">

6 body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input

{ border: 0 none; margin: 0; padding: 0; }

7 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000;

font-family: '新宋体' , '宋体' ,Verdana; font-size: 12px; color: #EEEEEE; }

9 ul, ol { list-style-type: none; }

10 select, input, img { outline: medium none; vertical-align: middle; }

11 a { text-decoration: none; outline: medium none; }

13 #fast_nav { width: 606px; height: 376px; background: url("images/fast_nav_open.png") no-repeat; position: relative;

top: 50px; left: 100px; }

14 #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute;

right: -8px; top: -8px; }

15 #fast_nav_close div { background: white; border-radius: 4px; text-indent: -999px; width: 0; height: 0;

border: 1px solid white; transform: rotate(45deg); cursor: pointer; }

16 #fast_nav_close .nav_x { width: 13px; height: 1px; margin: 11px auto; }

17 #fast_nav_close .nav_y { height: 13px; width: 1px; margin: -20px auto; }

18 #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -999px;

position: absolute; left: 267px; top: 152px;}

19 </style>

20 <script src="js/jquery-1.7.1.js" type="text/javascript"></script>

21 <script type="text/javascript">

22 $(document).ready(function () {

24 });

26 </script>

27 </head>

28 <body>

29 <div id="fast_nav">

30 <div id="fast_nav_bt">fast_nav

31 </div>

32 <div id="fast_nav_close">

33 <div class="nav_x">x

34 </div>

35 <div class="nav_y">y

36 </div>

37 </div>

38 <div id="fast_nav01">

39 </div>

40 <div id="fast_nav02">

41 </div>

42 <div id="fast_nav03">

43 </div>

44 <div id="fast_nav04">

45 </div>

46 </div>

47 </body>

48 </html>

复制代码

大家看看右上角的关闭按钮，这就是我的小花样！而且在其它浏览器上估计会失效。。。但是当做巩固css3吧，我就不管了。

在最新浏览器下叛变结束:

初步排版结束

好了，我们继续，现在是css控制显示相关的代码：

css控制开关

点击展开，再次点击关闭，这里有个优化点，我判断的时候是查看dom是否包含class，这个应该放到内存，而不是dom，后面点优化。现在我们看看动画效果如何实现。

很戳的效果

css很戳的效果

这个效果很难看的，完全不是我所希望的，而且点击快速导航会有一定抖动效果，这个可能又要用jquery实现了。。。

这里还有个问题就是，里面的文字被挤压，变得非常难看，整个用户体验很差，这块还要继续了。

完整代码

到此功能代码大概完成，只剩下优化部分需要处理了。

结语

今天的任务没能完成，本来计划的是先做这个快递导航特效，然后再做一点本地数据库的东西，然后就差最后的排版了。

谁知道，快速导航这块工作量还不少，花了不少时间，加之今天5.1出去聚会了，到现在才回来，所以这篇文章有点粗制滥造了。

对于本功能，开始想的是使用css3动画效果，但是他的特效很强大，css3恐怕有点吃力，所以这里就用了jquery的动画效果了，

但是，你知道jquery的效率的，代码上的特效运行几次后就这个样子了：

很烧CPU的，所以这块功能还需要优化。

观察这两天的工作量，明天估计最乐观就是把首页完成了。。。

本文转自叶小钗博客园博客，原文链接http://www.cnblogs.com/yexiaochai/archive/2013/05/01/3051632.html，如需转载请自行联系原作者