使用CSS滑動門可以為網頁的設計增加一些互動性和美觀性。下面我們就來介紹一下CSS滑動門的制作方法。 首先，在HTML中創建需要制作滑動門的導航欄結構，如下所示：

<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>

其中，nav類設置了導航欄的樣式，active類表示當前選中的導航項。 接下來，為滑動門的兩個狀態分別添加CSS樣式。我們可以利用偽類選擇器:before和:after，分別代表滑動門的左右兩個部分。

.nav li a {
/*默認狀態*/
color: #ccc;
padding: 10px;
display: block;
position: relative;
}
/*鼠標懸停時的狀態*/
.nav li:hover a {
color: #333;
}
/*滑動門的左半部分*/
.nav li a:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 10px;
background: #ccc;
z-index: -1;
}
/*滑動門的右半部分*/
.nav li a:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -10px;
width: 10px;
background: #ccc;
z-index: -1;
}
/*當前選中的導航項*/
.nav .active a {
color: #333;
}
/*當前選中的導航項，滑動門的左半部分*/
.nav .active a:before {
background: #333;
}
/*當前選中的導航項，滑動門的右半部分*/
.nav .active a:after {
background: #333;
}

以上代碼中，我們設置了默認狀態的字體顏色和內邊距，以及設置滑動門的兩個部分的樣式。鼠標懸停時，我們將字體顏色變為黑色。當選中某個導航項時，我們將其字體顏色設置為黑色，同時將其滑動門的兩個部分的樣式更改為黑色。 最后，我們需要確保滑動門在導航項上的位置是準確的。為此，我們需要利用絕對和相對定位。我們將滑動門的兩個部分設置為絕對定位，相對于導航項的位置。我們還將導航項的position屬性設置為相對定位，以便于控制滑動門的位置。 完成上述內容后，就可以實現CSS滑動門了。現在可以預覽一下效果。