社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > 主體

HTML5設計網頁熔岩燈導航（navigation bar）插件 已經加上完整原始碼

WBOY
發布： 2016-08-18 08:57:59
原創
1421 人瀏覽過

導覽列（navigation bar）：

1.指位於頁眉區域的，在頁眉橫幅圖片上邊或下邊的一排水平導航按鈕，它起著鏈接博客的各個頁面的作用。

2.網頁設計中不可缺少的部分，它是指透過一定的技術手段，為網站的訪客提供一定的途徑，使其可以方便地訪問到所需的內容，是人們瀏覽網站時可以快速從一個頁面轉到另一個頁面的快速通道。

3.導航條的目的是讓網站的層次結構以一種有條理的方式清晰展示，並引導用戶毫不費力地找到並管理信息，讓用戶在瀏覽網站過程中不至迷失。

4.為了讓網站資訊可以有效地傳遞給用戶，導航一定要簡潔、直觀、明確。

設計過程：

（一）寫HTML程式碼：

 

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="zh"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="no-js modern"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Lava Lamp Navigation Design - 熔岩灯样式，导航设计<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="css/lavalamp.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/modernizr.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery.UI.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery.lavalamp.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/navigation.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="page-wrap"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>Lava Lamp Style Navigation Design<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>具有Lava Lamp效果的滑动导航条的设计灵感源于熔岩灯(Lava Lamp).<span style="color: #0000ff;"><</span><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span><span style="color: #000000;">
        在熔岩灯的玻璃瓶体内装有特制的水溶液与蜡质固体，底部灯泡点亮后形成热量，传递到玻璃瓶.</span><span style="color: #0000ff;"><</span><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span><span style="color: #000000;">
        瓶底蜡质受热熔化变轻，便会徐徐上升,到了顶部重新冷却又徐徐下降，不断往复.</span><span style="color: #0000ff;"><</span><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span><span style="color: #000000;">
        其独特的功能和独特的视觉享受令人心旷神怡，多姿多彩的状态时而如少女，时而像火山爆发般狂热。
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">nav </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="navigation"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="clearfix"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="focus"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Home<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Products<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Download<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Purchase<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Contact<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>About<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
登入後複製

 

（二）編寫CSS3樣式表

<span style="color: #800000;">@charset "utf-8";

</span><span style="color: #008000;">/*</span><span style="color: #008000;"> reset.css - 浏览器样式初始化
---------------------------------------------------------------- </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> 所有元素空白 0, 字号 100%, 垂直对齐方式 baseline, 背景色 透明 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
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 </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> baseline</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> transparent</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 初始化HTML5新元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 正文基本设定, 删除引用语句 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
body </span>{<span style="color: #ff0000;"> 
    font</span>:<span style="color: #0000ff;"> 13px/1.5 "Nanum Gothic", Dotum, Sans-Serief</span>;<span style="color: #ff0000;"> 
    color</span>:<span style="color: #0000ff;"> #323232</span>; 
    }
    <span style="color: #008000;">/*</span><span style="color: #008000;"> 设置英文 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
    .lang-en, :lang(en) </span>{<span style="color: #ff0000;"> font</span>:<span style="color: #0000ff;"> 12px/1.5 "Helvetica Neue", Helvetica, Verdana, Arial, Sans-Serief</span>; }
    
<span style="color: #008000;">/*</span><span style="color: #008000;"> 列表及引用 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
ol, ul </span>{<span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">
blockquote, q </span>{<span style="color: #ff0000;"> quotes</span>:<span style="color: #0000ff;"> none</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 删除hr </span><span style="color: #008000;">*/</span><span style="color: #800000;">
hr </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> none</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置标题字体大小 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1, h2, h3, h4, h5, h6 </span>{<span style="color: #ff0000;"> 
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;"> 
    color</span>:<span style="color: #0000ff;"> #111</span>; 
    }<span style="color: #800000;">
    h1 </span>{<span style="color: #ff0000;"> 
        font-size</span>:<span style="color: #0000ff;"> 36px</span>;<span style="color: #ff0000;"> 
        line-height</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;"> 
        margin-bottom</span>:<span style="color: #0000ff;"> 0.5em</span>; 
    }<span style="color: #800000;">
    h2 </span>{<span style="color: #ff0000;"> 
        font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;"> 
        margin-bottom</span>:<span style="color: #0000ff;"> 0.75em</span>;
    }<span style="color: #800000;">
    h3 </span>{<span style="color: #ff0000;"> 
        font-size</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;"> 
        line-height</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;"> 
        margin-bottom</span>:<span style="color: #0000ff;"> 1em</span>;
    }<span style="color: #800000;">
    h4 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">
    h5 </span>{<span style="color: #ff0000;"> margin-bottom</span>:<span style="color: #0000ff;"> 1.5em</span>; }<span style="color: #800000;">
    h5, h6 </span>{<span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> bold</span>; }<span style="color: #800000;">
    
    h1 img, h2 img, h3 img,
    h4 img, h5 img, h6 img </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置标题、段落上下空间 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
p </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0 0 1.5em</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> :active, :focus 伪类轮廓线删除 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
:active, :focus </span>{<span style="color: #ff0000;"> outline</span>:<span style="color: #0000ff;"> 0</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 重定义超链接基本样式 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:link, a:visited </span>{<span style="color: #ff0000;"> 
    padding-bottom</span>:<span style="color: #0000ff;"> .25px</span>;<span style="color: #ff0000;"> 
    border-bottom</span>:<span style="color: #0000ff;"> 1px dotted #7c7c7c</span>;<span style="color: #ff0000;"> 
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #7c7c7c</span>;
}<span style="color: #800000;">
a:hover, a:active </span>{<span style="color: #ff0000;">
    border-bottom-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;"> 
    color</span>:<span style="color: #0000ff;"> #424242</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置包含img的a元素的border与padding </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a img </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> 
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> insert, delete </span><span style="color: #008000;">*/</span><span style="color: #800000;">
ins </span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">
del </span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> line-through</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设定表格 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
table </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 -1px</span>;<span style="color: #ff0000;">
    border-collapse</span>:<span style="color: #0000ff;"> collapse</span>;<span style="color: #ff0000;">
    border-spacing</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    table-layout</span>:<span style="color: #0000ff;"> fixed</span>;
}<span style="color: #800000;">
table, th, td </span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #7c7c7c</span>; }<span style="color: #800000;">
th, td </span>{<span style="color: #ff0000;"> 
    padding</span>:<span style="color: #0000ff;"> 1em 2em</span>;<span style="color: #ff0000;"> 
    text-align</span>:<span style="color: #0000ff;"> left</span>; 
}<span style="color: #800000;">
caption </span>{<span style="color: #ff0000;"> 
    visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;"> 
    height</span>:<span style="color: #0000ff;"> 1px</span>;
}
登入後複製
<span style="color: #800000;">@charset "utf-8";
@import "reset.css";
@import url(http://fonts.googleapis.com/css?family=Montez);
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> lavalamp.nav.css - 熔岩灯导航设计样式
------------------------------------------------------------------- </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> ///////////////////////////////////////// 
    =基本样式
///////////////////////////////////////// </span><span style="color: #008000;">*/</span><span style="color: #800000;">    

body </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #eeece7</span>;
}<span style="color: #800000;">

h1 </span>{<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> 52px/1 'Montez'</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #a4834d</span>;
}<span style="color: #800000;">

h1+p </span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 3.5em</span>;
}<span style="color: #800000;">

#page-wrap </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 960px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px auto</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 3em</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #62615f inset</span>;<span style="color: #ff0000;">
    -moz-box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #62615f inset</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #62615f inset</span>;<span style="color: #ff0000;">
    -webkit-border-radius</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    -khtml-border-radius</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    -moz-border-radius</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 20px</span>;    
}<span style="color: #800000;">

#page-wrap p</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;">"宋体"</span>;
    }
<span style="color: #008000;">/*</span><span style="color: #008000;"> ///////////////////////////////////////// 
    =#navigation
///////////////////////////////////////// </span><span style="color: #008000;">*/</span><span style="color: #800000;">    

#navigation </span>{<span style="color: #ff0000;"> 
    padding</span>:<span style="color: #0000ff;"> 3px</span>;
    }<span style="color: #800000;">
    #navigation li </span>{<span style="color: #ff0000;">
        float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
        border-right</span>:<span style="color: #0000ff;"> 1px solid #eee</span>;
    }<span style="color: #800000;">
    #navigation li:last-child </span>{<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 0</span>;
        }<span style="color: #800000;">
        #navigation li a </span>{<span style="color: #ff0000;">
            border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
            padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
            font</span>:<span style="color: #0000ff;"> 14px/1 Verdana</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;"> #a49e96</span>;
        }<span style="color: #800000;">
        .no-js #navigation li a:hover,
        .no-js #navigation li a:focus,
        .no-js #navigation li.focus a,
        .lava </span>{<span style="color: #ff0000;">
        -webkit-border-radius</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
        -khtml-border-radius</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
        -moz-border-radius</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">            
        border-radius</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
        -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #69635a</span>;<span style="color: #ff0000;">
        -moz-box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #69635a</span>;<span style="color: #ff0000;">
        box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #69635a</span>;<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> -webkit-gradient(linear, left top, left bottom, from(#887963), to(#0b0a09))</span>;<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> -webkit-linear-gradient(-90deg, #887963, #0b0a09)</span>;<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> -moz-linear-gradient(-90deg, #887963, #0b0a09)</span>;<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> -o-linear-gradient(-90deg, #887963, #0b0a09)</span>;<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> -ms-linear-gradient(-90deg, #887963, #0b0a09)</span>;<span style="color: #ff0000;">        
        background-image</span>:<span style="color: #0000ff;"> linear-gradient(-90deg, #887963, #0b0a09)</span>;<span style="color: #ff0000;">
        filter</span>:<span style="color: #0000ff;"> progid:DXImageTransform.Microsoft.gradient( startColorstr='#776a57', endColorstr='#12100e',GradientType=0 )</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> IE6-9 </span><span style="color: #008000;">*/</span>
        }

<span style="color: #008000;">/*</span><span style="color: #008000;"> ///////////////////////////////////////// 
    =Global Classes
///////////////////////////////////////// </span><span style="color: #008000;">*/</span><span style="color: #800000;">

.clearfix:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;
    }<span style="color: #800000;">
    .ie6 .clearfix </span>{<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 1px</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> IE6 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> 
    .ie7 .clearfix </span>{<span style="color: #ff0000;"> min-height</span>:<span style="color: #0000ff;"> 1px</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> IE7 </span><span style="color: #008000;">*/</span>
登入後複製

（三）使用熔岩燈導航插件

<span style="color: #008000;">/*</span><span style="color: #008000;"> 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 

---------------------------------------------------------------- </span><span style="color: #008000;">*/</span><span style="color: #000000;">

;(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">($) {
    $.fn.lavalamp </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;">(options) {
        options </span>=<span style="color: #000000;"> $.extend({
            gap: </span>20<span style="color: #000000;">,
            bgColor: </span>'#eee'<span style="color: #000000;">,
            speed: </span>400<span style="color: #000000;">,
            easing: </span>'easeInOutElastic'<span style="color: #000000;">,    
            reset: </span>2000<span style="color: #000000;">
        }, options);
        
        </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>.each(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
        
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> 对象引用</span>
            <span style="color: #0000ff;">var</span> $nav = $(<span style="color: #0000ff;">this</span><span style="color: #000000;">),
                $current_item </span>= $(<span style="color: #0000ff;">this</span>).find('.focus'<span style="color: #000000;">),
                $lava </span>= $('<li class="lava"/>'<span style="color: #000000;">),
                reset;
        
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> 设定$lava的基准元素$(this)及调整<a> z-index的值</span>
            $nav.css('position', 'relative'<span style="color: #000000;">)
                .find(</span>'a'<span style="color: #000000;">).css({
                    position: </span>'relative'<span style="color: #000000;">,
                    zIndex: </span>1<span style="color: #000000;">
                });
                
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> $lava操作及样式</span>
<span style="color: #000000;">            $lava.css({
                position: </span>'absolute'<span style="color: #000000;">,
                top: $current_item.position().top </span>- options.gap/2,
<span style="color: #000000;">                left: $current_item.position().left,
                width: $current_item.outerWidth(),
                height: $current_item.outerHeight() </span>+<span style="color: #000000;"> options.gap,
                backgroundColor: options.bgColor        
            }).appendTo($nav.find(</span>'ul'<span style="color: #000000;">));
        
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> 当$nav的li发生鼠标移上/获得焦点事件时调用处理函数</span>
            $nav.find('li'<span style="color: #000000;">)
            .bind(</span>'mouseover focusin', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                </span><span style="color: #008000;">//</span><span style="color: #008000;"> 发生MouseOver或FocusIn事件时执行的代码</span>
<span style="color: #000000;">                clearTimeout(reset);
                $lava.animate({ 
                    left: $(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">).position().left,
                    width: $(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">).outerWidth()
                }, {
                    duration: options.speed,
                    easing: options.easing,
                    queue: </span><span style="color: #0000ff;">false</span><span style="color: #000000;">
                });
            })
            .bind(</span>'mouseout focusout', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                </span><span style="color: #008000;">//</span><span style="color: #008000;"> 发生MouseOut或FocusOut事件时执行的代码</span>
                reset = setTimeout(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                    $lava.animate({
                        left: $current_item.position().left,
                        width: $current_item.outerWidth()                    
                    }, options.speed);
                }, options.reset);
            })
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> 单击<li>时添加.focus</span>
            .click(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                $(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">)
                    .siblings().removeClass(</span>'focus'<span style="color: #000000;">)
                .end().addClass(</span>'focus'<span style="color: #000000;">);
                $current_item </span>= $(<span style="color: #0000ff;">this</span><span style="color: #000000;">);
            });
        });
    };
})(jQuery);</span>
登入後複製
<span style="color: #008000;">/*</span><span style="color: #008000;"> jquery.lavalamp.js - 熔岩灯导航插件
----------------------------------------------------------------- </span><span style="color: #008000;">*/</span><span style="color: #000000;">
(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">($) {
    $(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
            
        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 运行熔岩灯插件    </span>
        $('#navigation'<span style="color: #000000;">).lavalamp({
            gap: </span>20<span style="color: #000000;">,
            speed: </span>600<span style="color: #000000;">,
            easing: </span>'easeInOutElastic'<span style="color: #000000;">,
            reset: </span>1500<span style="color: #000000;">
        });
        
        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 单击<a>时阻止链接到href地址</span>
        $('#navigation').find('a').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
            e.preventDefault();                        
        });
        
        </span><span style="color: #008000;">/*</span><span style="color: #008000;"> ///////////////////////////////////////////////////
          为了IE 6-9浏览器，应用PIE库
        border-radius | box-shadow | linear-gradient
        /////////////////////////////////////////////////// </span><span style="color: #008000;">*/</span>            
        <span style="color: #0000ff;">if</span>($.browser.msie && $.browser.version < 9<span style="color: #000000;">) {
            $.getScript(</span>'js/PIE.js', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                $(</span>'li.lava', '#nav').each(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                    PIE.attach(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">);
                });    
            });
        };
            
    });    
})(jQuery);</span>
登入後複製

最終示範：

 

程式碼檔案：http://pan.baidu.com/s/1kUVC8Kn

 

相關標籤：
HTML5设计网页熔岩灯导航（navigation bar）插件 已经加上完整源代码
來源：php.cn
上一篇：動畫.css 下一篇：CSS常用樣式（四）之animation
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
2
1899
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
10
2068
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1739
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1643
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1653
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板