這篇文章主要介紹了CSS怎么實(shí)現(xiàn)導(dǎo)航固定的、左右滑動(dòng)的滾動(dòng)條，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì)，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕十年，專業(yè)且經(jīng)驗(yàn)豐富。十年網(wǎng)站優(yōu)化營(yíng)銷經(jīng)驗(yàn)，我們已為上千家中小企業(yè)提供了成都做網(wǎng)站、成都網(wǎng)站制作解決方案，按需求定制網(wǎng)站，設(shè)計(jì)滿意，售后服務(wù)無(wú)憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!

如上效果的導(dǎo)航，導(dǎo)航是固定在頂部的，可以左右滑動(dòng)點(diǎn)擊更多選項(xiàng)的。

這種制作相當(dāng)簡(jiǎn)單，本文只是提幾點(diǎn)注意：

固定位置

菜單固定在頂部不動(dòng)，使用 position:fixed; top:0; left:0;。同時(shí)要注意：

• 下面列表下移相應(yīng)的位置，否則打開(kāi)頁(yè)面時(shí)，下方列表會(huì)被遮住一部分。

• 為菜單設(shè)置背景，否則透明的話，與下面列表滾動(dòng)上來(lái)的內(nèi)容會(huì)重疊顯示。

• 為 body 設(shè)置背景，因?yàn)槲⑿艦g覽器默認(rèn)有個(gè)背景色（不是白色），可能會(huì)與我們的效果沖突，按需設(shè)置背景。

使用 table

通常我們使用 ul、li 作 float，但是當(dāng)一行顯示不下時(shí)，要讓它不落到第二行的話，比較麻煩，所以我們推薦使用 table。

以下是整個(gè) CSS 代碼，其中 .wrapper 是外層，.nav、.list 是兄弟。

body, .wrapper 
{ 
background:#fff; 
}

.nav 
{ 
position:fixed; 
top:0;
 left:0; padding:0; 
width:100%; 
height:60px; 
overflow-x:scroll; 
background:#fff; 
}
.nav table 
{ 
width:720px;
 border-collapse:collapse;
 }
.nav table td 
{
 padding-top:10px; 
padding-bottom:10px; 
width:80px; 
text-align:center; 
}
.nav table td a 
{ 
line-height:40px; 
font-size:14px; 
font-weight:bold; 
}
.nav table td.cur a 
{ 
box-sizing:border-box; 
border-bottom:2px solid #f07515; color:#f07515; 
}

.list 
{ 
margin-top:60px; 
}

動(dòng)態(tài)限定寬度

上面 CSS 代碼為 table 設(shè)置了 720px，即 9 個(gè) td 的寬度，通常我們菜單數(shù)量是固定的，所以直接這么設(shè)置，但是如果不固定的話，可以利用程序來(lái)動(dòng)態(tài)設(shè)置，比如 JavaScript 設(shè)置方法：

$(".header table").width($(".header table td").length * $(".header table td").width());

選中后面的菜單項(xiàng)時(shí)，顯示后面的菜單項(xiàng)

對(duì)于非 Ajax 頁(yè)面，點(diǎn)擊后面的菜單頁(yè)時(shí)，頁(yè)面刷新，然后顯示最左邊的幾個(gè)菜單項(xiàng)，我們可以利用 JavaScript 滾動(dòng)菜單項(xiàng)，使當(dāng)前選中項(xiàng)顯示出來(lái)，示例代碼如下：

var count = 0;
$(".header table td").each(function () {
	if ($(this).hasClass("cur")) {
		return false;
	}
	count++;
});
if (count >= 3) { // 選中前面幾個(gè)時(shí)不滾動(dòng)
	count -= 2; // 不必滾到最左邊
	$(".header").get(0).scrollLeft = count * $(".header table td").width();
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS怎么實(shí)現(xiàn)導(dǎo)航固定的、左右滑動(dòng)的滾動(dòng)條”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!