HTML5设计网页熔岩灯导航(navigation bar)插件 已经加上完整源代码
程序员文章站
2022-04-10 13:05:03
...
导航栏(navigation bar):
'),
reset;
// 设定$lava的基准元素$(this)及调整 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);
})
// 单击时添加.focus
.click(function() {
$(this)
.siblings().removeClass('focus')
.end().addClass('focus');
$current_item = $(this);
});
});
};
})(jQuery);
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 Designh1>
p>具有Lava Lamp效果的滑动导航条的设计灵感源于熔岩灯(Lava Lamp).br />
在熔岩灯的玻璃瓶体内装有特制的水溶液与蜡质固体,底部灯泡点亮后形成热量,传递到玻璃瓶.br />
瓶底蜡质受热熔化变轻,便会徐徐上升,到了顶部重新冷却又徐徐下降,不断往复.br />
其独特的功能和独特的视觉享受令人心旷神怡,多姿多彩的状态时而如少女,时而像火山爆发般*。
p>
nav id="navigation">
ul class="clearfix">
li class="focus">a href="">Homea>li>
li>a href="">Productsa>li>
li>a href="">Downloada>li>
li>a href="">Purchasea>li>
li>a href="">Contacta>li>
li>a href="">Abouta>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 = $('
/* jquery.lavalamp.js - 熔岩灯导航插件 ----------------------------------------------------------------- */ (function($) { $(function() { // 运行熔岩灯插件 $('#navigation').lavalamp({ gap: 20, speed: 600, easing: 'easeInOutElastic', reset: 1500 }); // 单击时阻止链接到href地址 $('#navigation').find('a').click(function(e) { e.preventDefault(); }); /* /////////////////////////////////////////////////// 为了IE 6-9浏览器,应用PIE库 border-radius | box-shadow | linear-gradient /////////////////////////////////////////////////// */ if($.browser.msie && $.browser.version ) { $.getScript('js/PIE.js', function() { $('li.lava', '#nav').each(function() { PIE.attach(this); }); }); }; }); })(jQuery);
最终演示:
代码文件:http://pan.baidu.com/s/1kUVC8Kn
上一篇: php如何调用js方法
下一篇: js---DOM节点