在移動設備上,很多app都會使用底部展開菜單,方便用戶操作。這里介紹一種使用jQuery實現底部展開菜單的方法。
首先,在HTML文件中需要一個包含菜單項的div元素和一個點擊按鈕。這里假設菜單項有三個。
<div class="bottomMenu"> <ul> <li>菜單項1</li> <li>菜單項2</li> <li>菜單項3</li> </ul> </div> <button id="menuBtn">展開</button>
接著,在CSS中設置底部菜單的基本樣式。可以設置寬度、高度、背景色、邊框等。
.bottomMenu { position: fixed; left: 0; bottom: -250px; width: 100%; height: 250px; background-color: #fff; border-top: 1px solid #ccc; transition: bottom .3s ease-out; }
使用position:fixed將菜單固定在底部,使用bottom:-250px將其隱藏。當點擊按鈕時,通過jQuery改變.bottomMenu的bottom屬性值即可展開。同時也需要為按鈕綁定點擊事件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('#menuBtn').click(function() { $('.bottomMenu').css('bottom','0'); }); }); </script>
這樣,當用戶點擊按鈕時,底部菜單就會展開。為了更好的用戶體驗,可以為.bottomMenu添加過渡效果。
.bottomMenu { /* ... */ transition: bottom .3s ease-out; }
上一篇拼圖css框架怎么居中
下一篇mysql中字符串轉列