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

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),本溪企業(yè)網(wǎng)站建設(shè),本溪品牌網(wǎng)站建設(shè),網(wǎng)站定制,本溪網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,本溪網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

如上效果的導(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)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前文章：CSS怎么實(shí)現(xiàn)導(dǎo)航固定的、左右滑動(dòng)的滾動(dòng)條-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://www.rwnh.cn/article48/cehdhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、面包屑導(dǎo)航、用戶體驗(yàn)、域名注冊(cè)、品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)