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="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:;
outline:;
border:;
padding:;
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:;
margin-bottom: 0.5em;
}
h2 {
font-size: 24px;
margin-bottom: 0.75em;
}
h3 {
font-size: 18px;
line-height:;
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:; } /* 设置标题、段落上下空间 */
p { margin: 0 0 1.5em; } /* :active, :focus 伪类轮廓线删除 */
:active, :focus { outline:; } /* 重定义超链接基本样式 */
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:;
padding:;
} /* insert, delete */
ins { text-decoration: none; }
del { text-decoration: line-through; } /* 设定表格 */
table {
width: 100%;
margin: 0 -1px;
border-collapse: collapse;
border-spacing:;
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:;
}
#navigation li a {
border:;
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);
代码文件：http://pan.baidu.com/s/1i57A0vz
HTML5设计网页熔岩灯导航（navigation bar）插件 已经加上完整源代码的更多相关文章
- HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码
横幅广告(Banner): 1.横幅广告是网络广告的常见形式,一般位于网页的醒目位置上:当用户单击这些横幅广告时,通常可以链接到相应的广告页面: 2.设计横幅广告时,要力求简单明了,能够体现出主要的中 ...
- 32+激发灵感的HTML5/CSS3网页设计教程
HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...
- 15个前卫的 HTML5 & CSS3 网页设计作品
今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- [工作积累] Android: Hide Navigation bar 隐藏导航条
https://developer.android.com/training/system-ui/navigation.html View decorView = getWindow().getDec ...
- [Android] 获取系统顶部状态栏(Status Bar)与底部导航栏(Navigation Bar)的高度
Android一些设备都有上下两条bar,我们可以获取这些bar的信息.下面放上获取高度的代码.代码注释和其他方法有空再放. 原文地址请保留http://www.cnblogs.com/rossone ...
- 15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
- 使用 HTML5 设计辅助功能
使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...
- 非常不错的Navigation Bar效果
非常不错的Navigation Bar效果,该源码转载于源码天堂的,大家可以了解一下吧,多视图应用程序中,我们常常使用到自定义UINavigationBar来完成导航条的设置. 源码我就不上传了,大家 ...
随机推荐
- 微信公众号入门学习1_使用C#，ASP.NET APIController如何公众号接入服务器并启动开发者模式
前言: 本文是以微信公众号中的订阅号(个人)来进行简单介绍,本人也是刚刚开始学习,有不足之处,欢迎批评指正. 先粘贴2个帮助链接: 入门指引:http://mp.weixin.qq.com/wiki ...
- ASP.NET MVC 网站开发总结（三） ——图片截图上传
本着简洁直接,我们就直奔主题吧,这里需要使用到一个网页在线截图插件imgareaselect(请自行下载). 前台页面: <!DOCTYPE html> <html> < ...
- Ado.net 三[SQL注入，DataAdapter，sqlParameter，DataSet]
1.SQL注入:SQL注入攻击是web应用程序的一种安全漏洞,可以将不安全的数据提交给运用程序,使应用程序在服务器上执行不安全的sql命令.使用该攻击可以轻松的登录运用程序. 例如:该管理员账号密码为 ...
- WinForm小白的WPF初试一：从PropertyGrid控件，输出内容到Word（上）
学WinForm也就半年,然后转到WPF,还在熟悉中.最近拿到一个任务:从PropertyGrid控件,输出内容到Word.难点有: 一.PropertyGrid控件是WinForm控件,在WPF中并 ...
- java servlet手机app访问接口(一)数据加密传输验证
前面几篇关于servlet的随笔,算是拉通了 servlet的简单使用流程,接下去的文章将主要围绕手机APP访问接口这块出发续写,md5加密传输--->短信验证--->手机推送---> ...
- SQL内部拼接执行SQL语句时，实现变量参数化
exec sp_ExecuteSql执行的SQL语句拼接起是比较麻烦,如果关联的表多拼接过程是很容易出错的,下面这方法非常的好用,而且简单直观 if exists(select * from syso ...
- 《Java4Android》视频学习笔记——包和访问权限（一）
怎么打包?代码如下 package org.marsdroid; class Test{ public static void main(String args[]){ System.out.prin ...
- linux下搭建php的集成环境
一个偶然的机会,在项目中需要搭建PHP的环境,由于PHP开发需要的东西比较多,像apache.mysql.PHP环境等,如果一个一个装很可能会有安装不全的问题,为此选择了安装集成环境,这里选择的是xa ...
- JS复杂对象克隆
之前一直比较习惯用Ext.apply()方法来实现对象的克隆,今天遇到一个问题,当对象中含有数组,且数组中包含复杂类型时,Ext.apply()的克隆就有问题了. 于是就想着试试自己能不能解决.在网上 ...
- vsftp "上传 553 Could not create file"
我在LINUX下VSftp建立一个FTP服务器,但从WINDOWS使用FTP时,无法上传也无法下载!出错如下 ftp>; ls 200 PORT command successful. Cons ...