css3實現滑動菜單導航 CSS3等相關屬性制作分頁導航實現代碼－IT工程師數位筆記本

文章出處

W3cplus第二版本剛上線時，好多位朋友向我問起站上的分頁導航樣式是怎么制作，像是圖片一樣。前面都是隨便說了一下制作的過程，為了報答各位朋友一持對本站的大力支持，今天我特意把這個分頁導航的效果當作一個小教程來說。希望大家會喜歡。

目標

今天我們主要的目的是使用CSS3等相關屬性來制作W3cplus站點上的分頁導航效果，大家可以這點擊這里查看站點上的效果，也可以直擊下面的效果圖：

在這個效果中，其實只有兩大看點：

使用CSS3的屬性，制作不規則圖形效果，并且hover狀態下會慢慢改變圖形和字體顏色；讓列表水平居中，這個效果我曾多次碰到同學問怎么使用一個列表居中顯示，并且排在一行，列表還要自適應內容的寬度。看起來復雜，其實不難，這也是我下面要重點介紹的一個小技巧。

HTML Markup

有想做東西，我們就需要有材料，我這里所說的材料就是我們分頁導航的HTML Markup，下面我們一起來看看吧：

復制代碼

代碼如下:

這樣的結構是我常用來制作分頁導航的結構，當然大家還有其他的不同結構，今天我們就不去探討這方面的問題。其實這個結構很簡單，我們把每一頁的序號放在了一個“<a>”中，然后對應放在列表項中。唯一需要注意的一點就是“當前頁”，因為所處當前頁是不需要有具有點擊效果，所以我直接將當前頁放在一個“li”中，并且命名一個“pager-current”的類名給他，大家可以從Firebug的截圖中來看這樣的區別：

CSS Code
有了結構，就需要用CSS來美化他：

復制代碼

代碼如下:

body {
font:12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
}
.pager {
list-style: none outside none;
margin: 20px;
padding: 0;
text-align: center;
}
.pager li {
display: inline-block;
margin: 0;
padding: 0;
}
* html .pager li { display: inline; }
*+html .pager li { display: inline; }
.pager li.pager-current,
.pager li a {
-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
color: #FFFFFF;
font-size: 12px;
margin-left: 10px;
padding: 3px 12px;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
text-decoration: none;
zoom:1;
}
.pager li.pager-current {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
color: #d54e21;
font-weight: bold;
}
.pager li a:hover {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
background: #4C5A64; /* old browsers */
background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
color: #d54e21;
}

上面是DEMO效果所使用的CSS代碼，下面我們一起來細看一下上面的代碼：

1、不規則圖形

我在此處主要使用CSS3的border-readius屬性制作的不規則圓角效果：

復制代碼

代碼如下:

.pager li a
-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
}

有關于其詳細介紹，大家可以點擊《CSS3的圓角Border-radius》。上面是默認狀態下的效果，那么在hover下改變圖形樣式，我想大家都想到了，是的那就是在“:hover”下改變其風格：

復制代碼

代碼如下:

.pager li a:hover {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
}

2、背景色

通過第一步，我們只制作出來不規則的邊界效果，需要在上面的基礎上加上背景色，這樣填充進行就形成了不規則的圖形，類似于圖片效果。這里填充顏色，使用的是CSS3的漸變屬性——Gradient來實現的：

復制代碼

代碼如下:

.pager li a {
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
}
.pager li a:hover {
background: #4C5A64; /* old browsers */
background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0); /* ie */
color: #d54e21;
}

3、動畫效果

上面完成的只是一個靜態的CSS3樣式效果，但我們上面的DEMO中是有一個動態改變背景的效果，這個效果我主要使用了CSS3的transition屬性：

復制代碼

代碼如下:

.pager li a {
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
}

請注意，我們的效果是在“a:hover”狀態下發生的，所以大家會以為動畫效果是加載在“a:hover”上，其實不是的，我需要在“a”上設置一個“transition”屬性，當在“a:hover”狀態下，元素樣式參數值改變時，就會給我們帶一個動畫效果一樣。具體的使用方法大家可以參閱《CSS3 Transition 》。當然大家如果成使用更好的動畫效果，你可以使用CSS3的Animation來作。感興趣的話可以參考animate.css和animatable.css。

4、當前項效果

因為我們當前項是沒有放在“a”標簽中的，為了讓其和其他項樣式一樣，我們需要把當前項的樣式和“a”鏈接的樣式設置成一樣，不同之處是，他的效果類似于“a:hover”效果：

復制代碼

代碼如下:

.pager li.pager-current,
.pager li a {
-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
color: #FFFFFF;
font-size: 12px;
margin-left: 10px;
padding: 3px 12px;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
text-decoration: none;
zoom:1;
}
.pager li.pager-current {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
color: #d54e21;
font-weight: bold;
}

5、列表居中

這一點是我今天要特別提出來的一點，大家都知道，我們列表項要放置在一行顯示，需要使用“float”來實現，但是使用了浮動后，我們就無法讓整個分頁導航水平居中，如此一來就會給我們帶來一個兩難境地。那么今天我在這里給大家展示另外一種處理方法：“display:inline-block”來讓列表項顯示在一行，大愛看到這個肯定又說難了，因為其在IE6-7下是無法支持的。這一點大家說的一點不錯，其實我們只需要在IE下稍作處理就ＯＫ了，我們具體來看一下如何實現其水平居中：

復制代碼

代碼如下:

.pager {
text-align: center;/*====讓列表項內容居中放====*/
padding: 0;
margin: 20px;
list-style: none outside none;
}
.pager li {
display: inline-block;/*===改變列表項顯示方式為行內塊===*/
margin: 0;
padding: 0;
}

起到列表水平居中的效果，我們靠的就是上面的兩句代碼“text-align: center”和“display: inline-block”，但大家寫的時候一定不能放借位置喲，前一句是放在“ul”中，后一句是放在“li”中，我們來看看效果：