HTML5是新一代HTML標準,在標記語言中廣泛應用。它可以實現頁面交互功能的效果,其中包括菜單輪滑效果。下面是一段HTML5菜單輪滑代碼:
<nav> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Development</a></li> <li><a href="#">App Development</a></li> <li><a href="#">Graphic Design</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav>
上述代碼定義了一個包含首頁、關于、服務和聯系的菜單,并在服務菜單項下面嵌套了一個子菜單。下面是一段CSS代碼,配合上述HTML代碼一起實現菜單輪滑效果:
#navigation ul ul { display: none; } #navigation ul li:hover > ul { display: block; }
上述代碼通過設置子菜單元素的display屬性為“none”,默認不顯示子菜單,當鼠標移動到菜單項上時,通過:hover偽類篩選器選擇其子元素,設置display屬性為“block”,使子菜單漸進式地顯示出來,實現菜單輪滑效果。