文章詳情頁

CSS3+Js實現(xiàn)響應(yīng)式導(dǎo)航條

瀏覽：378日期：2022-06-02 13:22:33

今天制作了一個響應(yīng)式導(dǎo)航條，能夠自動隨著不同的屏幕分辨率或瀏覽器窗口大小的不同而改變導(dǎo)航條的樣式，這里主要用到的就是CSS3的Media Query。具體可以查看淺談響應(yīng)式布局這篇文章，這里就不花費大量的篇幅介紹了，主要看一下這個導(dǎo)航條該怎么做。

另外需要提到的是，ie6-ie8是不支持CSS3的Media Query的，因此對于ie6-ie8我們需要特殊處理，就讓他們保持默認(rèn)樣式，這對于布局及樣式上都要考慮到這一點。

首先看一下布局這一塊，html代碼如下：

復(fù)制代碼代碼如下:
<div>
    <div>
        <ul id="menu">
            <li><a href="#">首頁</a></li>
            <li><a href="#">電影</a></li>
            <li><a href="#">電視劇</a></li>
            <li><a href="#">動漫</a></li>
            <li><a href="#">綜藝</a></li>
            <li><a href="#">紀(jì)錄片</a></li>
            <li><a href="#">公開課</a></li>
        </ul>
        <p>
            <a href="#">鋼鐵俠3</a>
            <a href="#">中國合伙人</a>
            <a href="#">盛夏晚晴天</a>
            <a href="#">陸貞傳奇</a>
        </p>
        
        
        <h1 id="title">
            <a href="#">風(fēng)馳網(wǎng)</a>
            <span id="btn"></span>
        </h1>
        
    </div>
</div>

html部分另外還要有一個條件注釋,當(dāng)瀏覽器是ie6-8時給html標(biāo)簽掛載個類"ie6-8"，這樣方便樣式表里的處理：

復(fù)制代碼代碼如下:
<!DOCTYPE html>

<html>
...

下面就是樣式控制了，先對整體樣式及ie6-ie8進行處理

復(fù)制代碼代碼如下:
* {margin: 0; padding: 0;}
body {font: 14px/22px "宋體", arial, serif;}

.navBar {margin-top: 80px; width: 100%; height: 38px; background: #333;}

.nav {margin: 0 auto; border: 0px solid #ccc;}
.nav ul {list-style: none; width: auto;}
.nav ul li {height: 38px; text-align: center;}
.nav ul li a {display: block; font-size: 16px; color: #fff; text-decoration: none; line-height: 39px;}

.ie6-8 .nav {width: 1000px; height: 38px;}
.ie6-8 .nav ul li {float: left;}
.ie6-8 .nav ul li a {padding: 0 30px 0 30px;}
.ie6-8 .nav ul li.current {background: #f60;}
.ie6-8 .nav ul li:hover a {color: #f60;}
.ie6-8 .nav ul li a:hover {_color: #f60;}/*IE6 Hack*/
.ie6-8 .nav ul li.current:hover a {color: #fff;}

.ie6-8 .nav .hot {float: left; margin-left: 20px; padding-top: 8px;}
.ie6-8 .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.ie6-8 .nav .hot a:hover {color: #f60; text-decoration: underline;}

.ie6-8 .nav .title {display: none;}

ok，下面就用到Media Query了。

當(dāng)屏幕寬度大于1000px時：

復(fù)制代碼代碼如下:
@media screen and (min-width: 1000px) {
    .nav {width: 1000px; height: 38px;}

    .nav ul li {float: left; width: auto;}
    .nav ul li a {padding: 0 30px 0 30px;}
    .nav ul li.current {background: #f60;}
    .nav ul li:hover a {color: #f60;}
    .nav ul li.current:hover a {color: #fff;}

    .nav .hot {margin-left: 20px; padding-top: 8px;}
    .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
    .nav .hot a:hover {color: #f60; text-decoration: underline;}

    .nav .title {display: none;}
}

當(dāng)屏幕寬度在640px到1000px之間時：

復(fù)制代碼代碼如下:
@media screen and (min-width: 640px) and (max-width: 1000px) {
    .nav {width: auto; height: 38px;}

    .nav ul li {float: left; width: 14%; min-width: 50px;}

    .nav ul li.current {background: #f60;}
    .nav ul li:hover a {color: #f60;}
    .nav ul li.current:hover a {color: #fff;}

    .nav .hot {display:none;}
    .nav .title {display: none;}
}

當(dāng)屏幕寬度小于640px時：

復(fù)制代碼代碼如下:
@media screen and (max-width: 640px) {
    .navBar {margin-top: 0; height: auto; background: #444;}
    .nav {width: auto; height: auto;}

    .nav ul li {margin-top: 1px; width: 100%; min-width: 100px;background: #333;}

    .nav ul li a:active {background: #f60;}

    .nav .hot {display:none;}

    .nav .title {position: relative; width: 100%; height: 38px; border-top: 1px solid #444; background: #333; text-align: center; font:normal 20px/35px "Microsoft YaHei", arial, serif; letter-spacing: 2px;}
    .nav .title a {color: #f60; text-decoration: none;}
    .nav .title .btn {position: absolute; right: 10px; top: 0; width: 34px; height: 34px; padding: 2px; background: url(btn.png) center center no-repeat; cursor: pointer;}
}

ok，對于布局及樣式控制就完成了，效果也有了，3中不同狀態(tài)下的效果如下圖：

但對于第三幅圖來說，我們還想要一個效果，那就是點擊右下角的圖標(biāo)時菜單可以收起，那么這該怎么做呢？這可以用js實現(xiàn)，當(dāng)菜單在收起狀態(tài)時，點擊圖片菜單可以展開；當(dāng)菜單在展開狀態(tài)時，點擊圖標(biāo)菜單可以收起，并且還要有動畫效果。ok，下面來看一下js，但js這一塊就不細(xì)說了，貼一下核心代碼吧：

這部分代碼用來產(chǎn)生動畫效果：

復(fù)制代碼代碼如下:
var move = function (obj, target) {
    var timer;
    clearInterval(timer);
    timer = setInterval(function () {
        var speed = (target - obj.offsetTop)/3;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (Math.abs(obj.offsetTop - target) < 4) {
            clearInterval(timer);
            obj.style.marginTop = target + "px";
        } else {
            obj.style.marginTop = obj.offsetTop + speed + "px";
        }
    }, 30);

}

ok，這個響應(yīng)式導(dǎo)航條基本就這樣了，附上源碼

css3-js-response-nav(jb51.net).rar

上一條：CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)下一條：HTML <!DOCTYPE> 標(biāo)簽

相關(guān)文章：

1. jsp文件下載功能實現(xiàn)代碼2. 低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案3. Jsp中request的3個基礎(chǔ)實踐4. jsp網(wǎng)頁實現(xiàn)貪吃蛇小游戲5. jsp實現(xiàn)登錄界面6. jsp+servlet簡單實現(xiàn)上傳文件功能（保存目錄改進）7. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)8. asp中response.write("中文")或者js中文亂碼問題9. 解析原生JS getComputedStyle10. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達(dá)式

排行榜

					
					Python基于tkinter canvas實現(xiàn)圖片裁剪功能
正則表達(dá)式匹配${key}并在Java中使用的詳細(xì)方法
jsp文件下載功能實現(xiàn)代碼
低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案
xpath簡介_動力節(jié)點Java學(xué)院整理
html清除浮動的6種方法示例
IntelliJ IDEA導(dǎo)出項目的方法
SpringBoot使用Mybatis-Generator配置過程詳解
使用AJAX（包含正則表達(dá)式）驗證用戶登錄的步驟
阿里前端開發(fā)中的規(guī)范要求
利用FastReport傳遞圖片參數(shù)在報表上展示簽名信息的實現(xiàn)方法
				