CSS底部菜單拉上效果是一個很受歡迎的Web設計技巧。在使用該技巧之前，你需要準備好一個基本的HTML結構，例如：

<div class="wrapper">
<nav class="footer-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

接下來，你需要為菜單和頁腳添加CSS樣式：

.footer-nav {
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
background-color: #333;
text-align: center;
transition: all 0.3s ease-in-out;
}
.footer-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-nav li {
display: inline-block;
}
.wrapper {
padding-bottom: 60px;
}
.wrapper:after {
content: "";
display: block;
height: 60px;
}
.footer-nav.show {
bottom: 0;
}

這些CSS樣式將為您的底部菜單和頁腳添加樣式，并實現拉上效果。我們使用了CSS3過渡效果來使拉起和拉下的過程更加平滑。

最后，你需要使用JavaScript實現toggle功能，以便在點擊按鈕時顯示或隱藏底部菜單：

let footerNav = document.querySelector('.footer-nav');
let toggleBtn = document.querySelector('.toggle-btn');
toggleBtn.addEventListener('click', function() {
footerNav.classList.toggle('show');
});

現在，你就可以實現一個漂亮的底部菜單拉上效果啦！