遮罩菜單是一種常用的界面設(shè)計(jì)形式，它使用CSS來(lái)覆蓋在原有頁(yè)面上，并顯示菜單選項(xiàng)。通過(guò)遮罩菜單，用戶(hù)能夠方便快捷地操作，不會(huì)干擾原有頁(yè)面的顯示。下面我們將介紹如何使用CSS來(lái)創(chuàng)建一個(gè)遮罩菜單。 首先，在HTML代碼中創(chuàng)建一個(gè)遮罩層和一個(gè)菜單層。遮罩層用來(lái)覆蓋在原有頁(yè)面上，菜單層用來(lái)顯示菜單選項(xiàng)。HTML代碼如下：

<div class="overlay"></div>
<div class="menu">
<ul>
<li>菜單選項(xiàng)1</li>
<li>菜單選項(xiàng)2</li>
<li>菜單選項(xiàng)3</li>
</ul>
</div>

接下來(lái)，使用CSS樣式來(lái)設(shè)置遮罩層和菜單層的樣式。遮罩層設(shè)置了背景顏色，透明度和層級(jí)，使其能夠完全覆蓋在原有頁(yè)面上。菜單層設(shè)置了絕對(duì)定位，將其放置在遮罩層的中心位置，注意z-index值要比遮罩層大，使得菜單層能夠顯示在遮罩層之上。

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.menu {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
z-index: 1000;
}

最后，在JavaScript代碼中添加事件監(jiān)聽(tīng)器，當(dāng)用戶(hù)點(diǎn)擊某個(gè)觸發(fā)元素時(shí)，遮罩層和菜單層將會(huì)顯示出來(lái)。事件監(jiān)聽(tīng)器可以在jQuery或者原生JavaScript中使用。例如，下面是一個(gè)jQuery的事件監(jiān)聽(tīng)器：

$(".trigger").click(function() {
$(".overlay").show();
$(".menu").show();
});

通過(guò)這種方式，我們就能夠創(chuàng)建一個(gè)基本的遮罩菜單。通過(guò)修改CSS樣式和JavaScript代碼，我們可以實(shí)現(xiàn)更加復(fù)雜、美觀的遮罩菜單效果。