HTML5设计网页熔岩灯导航（navigation bar）插件已经加上完整源代码

导航栏（navigation bar）：

1.指位于页眉区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接博客的各个页面的作用。

2.网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容，是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。

3.导航条的目的是让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，让用户在浏览网站过程中不至迷失。

4.为了让网站信息可以有效地传递给用户，导航一定要简洁、直观、明确。

设计过程：

（一）编写HTML代码：

<!DOCTYPE html><html lang="zh" class="no-js modern"><head><meta charset="utf-8" /><title>Lava Lamp Navigation Design - 熔岩灯样式，导航设计</title><link rel="stylesheet" href="css/lavalamp.css" /><script src='/images/loading.gif' data-original="js/modernizr.min.js"></script><script src='/images/loading.gif' data-original="js/jquery.min.js"></script><script src='/images/loading.gif' data-original="js/jquery.UI.min.js"></script><script src='/images/loading.gif' data-original="js/jquery.lavalamp.js"></script><script src='/images/loading.gif' data-original="js/navigation.js"></script></head><body>  <div id="page-wrap">    <h1>Lava Lamp Style Navigation Design</h1>    <p>具有Lava Lamp效果的滑动导航条的设计灵感源于熔岩灯(Lava Lamp).<br />    在熔岩灯的玻璃瓶体内装有特制的水溶液与蜡质固体，底部灯泡点亮后形成热量，传递到玻璃瓶.<br />    瓶底蜡质受热熔化变轻，便会徐徐上升,到了顶部重新冷却又徐徐下降，不断往复.<br />    其独特的功能和独特的视觉享受令人心旷神怡，多姿多彩的状态时而如少女，时而像火山爆发般狂热。    </p>    <nav id="navigation">      <ul class="clearfix">        <li class="focus"><a href="">Home</a></li>        <li><a href="">Products</a></li>        <li><a href="">Download</a></li>        <li><a href="">Purchase</a></li>        <li><a href="">Contact</a></li>        <li><a href="">About</a></li>      </ul>    </nav>  </div>  </body></html>

（二）编写CSS3样式表

@charset "utf-8";/* reset.css - 浏览器样式初始化---------------------------------------------------------------- *//* 所有元素空白 0, 字号 100%, 垂直对齐方式 baseline, 背景色 透明 */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0;  outline: 0;  border: 0;  padding: 0;  font-size: 100%;  vertical-align: baseline;  background: transparent;}/* 初始化HTML5新元素 */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block; }/* 正文基本设定, 删除引用语句 */body {   font: 13px/1.5 "Nanum Gothic", Dotum, Sans-Serief;   color: #323232;   }  /* 设置英文 */  .lang-en, :lang(en) { font: 12px/1.5 "Helvetica Neue", Helvetica, Verdana, Arial, Sans-Serief; }  /* 列表及引用 */ol, ul { list-style: none; }blockquote, q { quotes: none; }/* 删除hr */hr { display: none; }/* 设置标题字体大小 */h1, h2, h3, h4, h5, h6 {   font-weight: normal;   color: #111;   }  h1 {     font-size: 36px;     line-height: 1;     margin-bottom: 0.5em;   }  h2 {     font-size: 24px;     margin-bottom: 0.75em;  }  h3 {     font-size: 18px;     line-height: 1;     margin-bottom: 1em;  }  h4 { font-size: 14px; }  h5 { margin-bottom: 1.5em; }  h5, h6 { font-weight: bold; }    h1 img, h2 img, h3 img,  h4 img, h5 img, h6 img { margin: 0; }/* 设置标题、段落上下空间 */p { margin: 0 0 1.5em; }/* :active, :focus 伪类轮廓线删除 */:active, :focus { outline: 0; }/* 重定义超链接基本样式 */a:link, a:visited {   padding-bottom: .25px;   border-bottom: 1px dotted #7c7c7c;   text-decoration: none;  color: #7c7c7c;}a:hover, a:active {  border-bottom-style: solid;   color: #424242;}/* 设置包含img的a元素的border与padding */a img {  border: 0;   padding: 0;}/* insert, delete */ins { text-decoration: none; }del { text-decoration: line-through; }/* 设定表格 */table {  width: 100%;  margin: 0 -1px;  border-collapse: collapse;  border-spacing: 0;  table-layout: fixed;}table, th, td { border: 1px solid #7c7c7c; }th, td {   padding: 1em 2em;   text-align: left; }caption {   visibility: hidden;   height: 1px;}

@charset "utf-8";@import "reset.css";@import url(http://fonts.googleapis.com/css?family=Montez);/* lavalamp.nav.css - 熔岩灯导航设计样式------------------------------------------------------------------- *//* /////////////////////////////////////////   =基本样式///////////////////////////////////////// */  body {  background: #eeece7;}h1 {  font: 52px/1 'Montez';  color: #a4834d;}h1+p {  margin-bottom: 3.5em;}#page-wrap {  width: 960px;  margin: 30px auto;  padding: 3em;  background: #fff;  -webkit-box-shadow: 0px 0px 2px #62615f inset;  -moz-box-shadow: 0px 0px 2px #62615f inset;  box-shadow: 0px 0px 2px #62615f inset;  -webkit-border-radius: 20px;  -khtml-border-radius: 20px;  -moz-border-radius: 20px;  border-radius: 20px;  }#page-wrap p{  font-family:"宋体";  }/* /////////////////////////////////////////   =#navigation///////////////////////////////////////// */  #navigation {   padding: 3px;  }  #navigation li {    float: left;    border-right: 1px solid #eee;  }  #navigation li:last-child {    border: 0;    }    #navigation li a {      border: 0;      padding: 10px;      font: 14px/1 Verdana;      color: #a49e96;    }    .no-js #navigation li a:hover,    .no-js #navigation li a:focus,    .no-js #navigation li.focus a,    .lava {    -webkit-border-radius: 6px;    -khtml-border-radius: 6px;    -moz-border-radius: 6px;          border-radius: 6px;    -webkit-box-shadow: 0px 0px 2px #69635a;    -moz-box-shadow: 0px 0px 2px #69635a;    box-shadow: 0px 0px 2px #69635a;    background-image: -webkit-gradient(linear, left top, left bottom, from(#887963), to(#0b0a09));    background-image: -webkit-linear-gradient(-90deg, #887963, #0b0a09);    background-image: -moz-linear-gradient(-90deg, #887963, #0b0a09);    background-image: -o-linear-gradient(-90deg, #887963, #0b0a09);    background-image: -ms-linear-gradient(-90deg, #887963, #0b0a09);        background-image: linear-gradient(-90deg, #887963, #0b0a09);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#776a57', endColorstr='#12100e',GradientType=0 ); /* IE6-9 */    }/* /////////////////////////////////////////   =Global Classes///////////////////////////////////////// */.clearfix:after {  content: "";  display: block;  clear: both;  }  .ie6 .clearfix { height: 1px; } /* IE6 */   .ie7 .clearfix { min-height: 1px; } /* IE7 */

（三）使用熔岩灯导航插件

/* jquery.lavalamp.js - 熔岩灯导航插件  选项设置      gap   : 在lava上下添加的空间    bgColor  : lava的背景颜色    speed  : 导航速度设定 1000 = 1秒,    easing   : Easing设定(请参考 http://gsgd.co.uk/sandbox/jquery/easing/),    reset   : 设定当鼠标滑出时返回原来位置的速度 1000 = 1秒        easeOutQuad  | easeOutQuad  | easeInOutQuad    easeInCubic  | easeOutCubic  | easeInOutCubic    easeInQuart  | easeOutQuart  | easeInOutQuart    easeInQuint  | easeOutQuint  | easeInOutQuint    easeInSine  | easeOutSine  | easeInOutSine    easeInExpo  | easeOutExpo  | easeInOutExpo     easeInCirc  | easeOutCirc  | easeInOutCirc     easeInElastic | easeOutElastic | easeInOutElastic    easeInBack  | easeOutBack  | easeInOutBack    easeInBounce | easeOutBounce | easeInOutBounce ---------------------------------------------------------------- */;(function($) {  $.fn.lavalamp = function(options) {    options = $.extend({      gap: 20,      bgColor: '#eee',      speed: 400,      easing: 'easeInOutElastic',        reset: 2000    }, options);        return this.each(function() {          // 对象引用      var $nav = $(this),        $current_item = $(this).find('.focus'),        $lava = $('<li />'),        reset;          // 设定$lava的基准元素$(this)及调整<a> z-index的值      $nav.css('position', 'relative')        .find('a').css({          position: 'relative',          zIndex: 1        });              // $lava操作及样式      $lava.css({        position: 'absolute',        top: $current_item.position().top - options.gap/2,        left: $current_item.position().left,        width: $current_item.outerWidth(),        height: $current_item.outerHeight() + options.gap,        backgroundColor: options.bgColor          }).appendTo($nav.find('ul'));          // 当$nav的li发生鼠标移上/获得焦点事件时调用处理函数      $nav.find('li')      .bind('mouseover focusin', function() {        // 发生MouseOver或FocusIn事件时执行的代码        clearTimeout(reset);        $lava.animate({           left: $(this).position().left,          width: $(this).outerWidth()        }, {          duration: options.speed,          easing: options.easing,          queue: false        });      })      .bind('mouseout focusout', function() {        // 发生MouseOut或FocusOut事件时执行的代码        reset = setTimeout(function() {          $lava.animate({            left: $current_item.position().left,            width: $current_item.outerWidth()                    }, options.speed);        }, options.reset);      })      // 单击<li>时添加.focus      .click(function() {        $(this)          .siblings().removeClass('focus')        .end().addClass('focus');        $current_item = $(this);      });    });  };})(jQuery);

/* jquery.lavalamp.js - 熔岩灯导航插件----------------------------------------------------------------- */(function($) {  $(function() {          // 运行熔岩灯插件      $('#navigation').lavalamp({      gap: 20,      speed: 600,      easing: 'easeInOutElastic',      reset: 1500    });        // 单击<a>时阻止链接到href地址    $('#navigation').find('a').click(function(e) {      e.preventDefault();                });        /* ///////////////////////////////////////////////////     为了IE 6-9浏览器，应用PIE库    border-radius | box-shadow | linear-gradient    /////////////////////////////////////////////////// */          if($.browser.msie && $.browser.version < 9) {      $.getScript('js/PIE.js', function() {        $('li.lava', '#nav').each(function() {          PIE.attach(this);        });        });    };        });  })(jQuery);

最终演示：