CSS滑動門是一種用于呈現導航欄的常見技術，它通過利用CSS的背景圖像和HTML鏈接來創建相互重疊的元素。當用戶將鼠標懸停在導航鏈接上時，CSS的:hover偽類可用于切換背景圖像，從而創建視覺效果，看起來像是一個門滑動打開。

.slide-door {
display: inline-block;
position: relative;
}
.slide-door .door {
position: absolute;
width: 100%;
height: 100%;
background: url('../images/door.png') no-repeat center center;
z-index: 1;
transition: all 0.5s ease-in-out;
}
.slide-door:hover .door {
transform: translate(-50%, 0) scaleX(0);
}
.slide-door .text {
position: relative;
z-index: 2;
padding: 10px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}

以上代碼描述了一個CSS滑動門的基本結構。.slide-door類應用于鏈接元素（通常是一個標簽），而.door類作為相對定位標簽元素包裹在.slide-door中。

此展示的任何CSS中的背景圖像都可來自一個圖像文件（如上例使用了door.png）。然而，這些圖像也可以用CSS使用偽元素來動態生成。這將減少HTTP請求并幫助提高網站的性能。

盡管這是一種非常基本的技術，但它仍然是創建許多網站導航欄的標準方式。例如，在WordPress主題中，你可能會看到這種效果用于顯示類別或菜單鏈接。