目的:
實現一個響應式導航,當屏幕寬度大于700px時,效果如下:

當屏幕寬度小于700px時,導航變成一個小按鈕,點擊之后有一個菜單慢慢拉下來:

思路:
1.為了之后在菜單上綁定事件,并且不向DOM中添加多余的節點,在大屏幕中出現的導航和小屏幕中的下拉導航必須是一個。
所以我選擇了將導航絕對定位。
2.默認導航列表是出現的,當屏幕寬度小于700px時它隱藏,并且設置position,當屏幕寬度大于700px時,它出現。或者,默認導航列表是隱藏的,當屏幕寬度大于700px時它出現在右側,小于時隱藏。
問題:
開始的時候,我選擇了默認他出現,然后出現了一個問題——只要按過了按鈕,屏幕放大之后導航列表就再也不會出現了。
代碼如下:
新聞熱點
疑難解答