我們在網站設計與開發中常常需要使用菜單，在大多數情況下它們是靜態的，它們展開與收起并沒有任何過渡與動畫效果，這會使得用戶體驗難以令人滿意。在現代的Web開發中，動畫效果變得越來越受到歡迎，他們可以增強用戶對我們網站的體驗，提升品牌價值。我們可以使用CSS動畫來給我們的菜單加入進/出功能。

.menu{
overflow: hidden; /*隱藏菜單內容*/
height: 0; /*將高度設置為零*/
transition: height 0.3s ease-out; /*添加CSS過渡動畫*/
}
.menu.active{
height: auto; /*展開時將高度設置為自動*/
transition: height 0.3s ease-in; /*添加CSS過渡動畫*/
}

當我們點擊展開按鈕時，我們需要把menu樣式變成.active，這是通過JavaScript完成的。

var menu = document.querySelector('.menu');
var trigger = document.querySelector('.menu-trigger');
trigger.onclick = function(){
menu.classList.toggle('active');
}

現在當我們點擊展開按鈕時，.menu將展開，并具備過渡效果，當再次點擊折疊按鈕時，.menu將重新折疊起來。

現在，讓我們美化一下我們的菜單！可以添加一個漸變背景和一個陰影，讓我們的菜單看起來更加優美和華麗。

.menu{
background: linear-gradient(to bottom, #ffffff, #f2f2f2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

當然，我們也可以通過更改CSS屬性來創建不同的動畫效果，并使菜單更加適應我們的網站設計。

在Web開發中使用CSS動畫是一個非常有趣也很有用的技能。當我們把它運用到菜單的設計中，可以使得我們的網站在用戶體驗方面更加完美。我們可以在Web中使用很多的CSS動畫效果，使用它們設計我們的網站可以增強用戶體驗。