CSS半屏菜單是一種非常常見的設計，它可以讓整個網頁看起來更加簡潔美觀。下面我們來講解一下如何實現這種半屏菜單的樣式。

/*css樣式*/
.menu{
position: fixed;
top: 0;
left: 0;
padding: 10px;
width: 100%;
background-color: #fff;
z-index: 999;
transition: all .3s;
}
.menu.active{
height: 50%;
}
.content{
height: 100%;
overflow: hidden;
}

首先，我們需要給整個菜單容器設置定位(position: fixed)，這樣才能讓它在頁面上停留在固定位置。另外，我們還需要將其放置在頁面的最上方(top: 0)，以免被其他元素蓋住。此外，我們還需要設置它的寬度為100%。當然，在這里，我們給它加上了一些padding，這是為了在頁面上留出一些空間。

接著，我們需要設置一些過渡效果(transition: all .3s)，這樣就可以在菜單展開和關閉的時候有一個比較平滑的動畫效果。我們需要在.active類樣式中設置一個高度為50%，這樣就可以將菜單展開至半屏。

最后，我們還需要為整個頁面做一些處理。首先，我們需要讓頁面整體的高度(height)為100%，以便撐滿整個屏幕。然后，我們需要為其設置一個overflow:hidden，這樣才能讓頁面在菜單展開時不會出現滾動條。

當然，這只是一個比較簡單的實現方式，如果你想要更加復雜的效果，可以根據自己的需要添加更多的樣式。