導航欄（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="js/modernizr.min.js"></script> <script src="js/jquery.min.js"></script> <script src="js/jquery.UI.min.js"></script> <script src="js/jquery.lavalamp.js"></script> <script src="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 class="lava"/>'), 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);