和大多數一級導航顯示,二級導航在一級導航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實現更靈活,兼容性也更好。