一級導航hover時顯示二級導航總結


和大多數一級導航顯示,二級導航在一級導航hove時顯示時一樣,既可以使用CSS來實現也可以使用JS來實現。

1、CSS實現: HTML結構上將每個二級導航放在對應的一級導航 li 標記內部。使用CSS在 li 標簽:hover時顯示二級導航。

  優點:結構清晰、實現方便、可以減少不必要的標簽和JS代碼。

  缺點:只是單純的顯示隱藏,不夠靈活,不能設置更多動畫效果,當然可以使用CSS3動畫來實現動畫效果。

     li標簽上的:hover IE6不兼容,需要額外補丁。

 

2、JS實現:

  A、HTML結構上將一級導航和二級導航作為兄弟元素一一對應,使用JS遍歷一級標簽元素和二級標簽元素,

     使用onmouseover/onmouseout將對應i一級菜單ndex下標的二級菜單顯示和隱藏。

  優點:HTML上將每個塊結構分離,方便修改和管理。

 

  B、HTML結構上和CSS實現一樣,將二級菜單作為一級菜單子元素。在一級菜單li標簽上添加hover類來控制二級菜單顯示和隱藏。

  優點:JS現實方便,也沒有使用CSS實現時的兼容性問題。

 

總結:在不考慮兼容IE6的情況下使用CSS實現會更加簡便和高效。使用JS實現更靈活,兼容性也更好。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM