首页 > > 网页制作 > css >

HTML5设计网页熔岩灯导航（navigation bar）插件…

2018-06-24 00:12:50来源：未知阅读 ()

导航栏（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);