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来完成导航条的设置. 源码我就不上传了,大家 ...

随机推荐

winform控件
公共控件:1.Button: Enabled - 开始不可用 Visible -不可视(用来设置权限,取用户看不见的值)2.CheckBox .CheckListBox -复选框,复选框组 3.Com ...
javascript设计模式实践之代理模式--图片预加载
图片的预加载就是在加载大图片前,先显示一个loading.gif,就算在网络比较慢的时候也能让人知道正在加载,总比啥反应都没有强. 下面这段代码就是预加载的一个简单的实现,假设先不处理加载图片时的on ...
疯狂Android讲义 - 学习笔记（二）
Android应用的用户界面编程 2.1 界面编程与视图(View)组件 Android应用的绝大部分UI组件放在android.widget.android.view包及其子包中,所有UI组件都继承 ...
go语言操作mysql范例（增删查改）
http://blog.csdn.net/jesseyoung/article/details/40398321 go语言连接mysql简介 go官方仅提供了database package,d ...
AngularJS的ng-click传参
<ul id="dataSet" ng-repeat="item in infos" ng-model="dataSet"> & ...
get传递中文产生乱码的解决方式汇总
1 最基本的乱码问题. 这个乱码问题是最简单的乱码问题.一般新会出现.就是页面编码不一致导致的乱码. <%@ page language="java" pageEncodin ...
Hibernate(六)__对象的三种状态
瞬时(transient):数据库中没有数据与之对应,超过作用域会被JVM垃圾回收器回收,一般是new出来且与session没有关联的对象. 持久(persistent):数据库中有数据与之对应,当前 ...
【GOF23设计模式】观察者模式
来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_观察者模式.广播机制.消息订阅.网络游戏对战原理 package com.test.observer; import ja ...
Ubuntu 12.10 配置MyEclipes 10.7环境（加破解）
下周要在Ubuntu中调试程序,所以今天抽空先配置好Myeclipse环境. 准备: JDK 下载地址: http://www.oracle.com/technetwork/java/javase/ ...
使用Bower作为Web包管理器
Bower是一个简单易用的Web包管理器,通过它我们可以非常简便的安装各种Web框架和库,同时它也负责管理不同包之间的关系依赖. 安装Bower Bower需要 npm 和 Git 的支持,在安装Bo ...

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

HTML5设计网页熔岩灯导航（navigation bar）插件 已经加上完整源代码的更多相关文章

随机推荐

热门专题

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

HTML5设计网页熔岩灯导航（navigation bar）插件已经加上完整源代码的更多相关文章