首頁 > 網際網路

Jquery 實現簡單的選單導航

2019-12-12 21:28:48

下拉式選單導航是一個網站的簡易網站地圖,起著引導訪客的作用,用Jquery實現簡單的選單,實現的原理:滑鼠是否通過頂層選單,如果動作發生,則觸發下層選單的顯示,如果滑鼠從頂部移出,底部選單收回。

1

利用Jquery的ready函數實現整個頁面的載入完成後執行動作。$(function(){});是$(document).ready(function(){});的簡寫


2

在function內部實現滑鼠進入事件,以及所有下拉效果的實現。


3

停止播放所有的特效動畫,隱藏子選單(圖為js程式碼)


4

獲取子集選單,重新設定選單位置(圖為html程式碼)


5

停掉子集選單動作並觸發下拉(圖為css程式碼)


6

主選單的滑鼠移出動作,讓子選單收起


7

快來看看選單效果圖吧




IT145.com E-mail:sddin#qq.com