如上效果的導(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)的位置，否則打開頁(yè)面時(shí)，下方列表會(huì)被遮住一部分。
• 為菜單設(shè)置背景，否則透明的話，與下面列表滾動(dòng)上來的內(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è)置，但是如果不固定的話，可以利用程序來動(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)顯示出來，示例代碼如下：

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();
}

總結(jié)

到此這篇關(guān)于CSS實(shí)現(xiàn)導(dǎo)航固定的、左右滑動(dòng)的滾動(dòng)條制作方法的文章就介紹到這了,更多相關(guān)css 導(dǎo)航固定左右滑動(dòng)滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論