Jquery Menu是一種常見的網(wǎng)站導(dǎo)航欄式樣,它可以豎向展開展示不同的菜單項。
<ul class="menu"> <li> <a href="#">菜單1</a> <ul> <li><a href="#">菜單1-1</a></li> <li><a href="#">菜單1-2</a></li> <li><a href="#">菜單1-3</a></li> </ul> </li> <li> <a href="#">菜單2</a> <ul> <li><a href="#">菜單2-1</a></li> <li><a href="#">菜單2-2</a></li> <li><a href="#">菜單2-3</a></li> </ul> </li> </ul>
使用Jquery Menu時,需要一些CSS樣式的支持,如以下代碼所示:
.menu { list-style: none; padding: 0; margin: 0; } .menu li { position: relative; padding: 0; margin: 0; background-color: #f9f9f9; border-bottom: 1px solid #ddd; } .menu li a { display: block; padding: 10px; text-decoration: none; color: #333; font-weight: bold; } .menu ul { list-style: none; padding: 0; margin: 0; display: none; } .menu ul li { background-color: #fff; border-top: 1px solid #ddd; } .menu ul li a { display: block; padding: 5px 10px; text-decoration: none; color: #333; } .menu li:hover { background-color: #ccc; } .menu li:hover ul { display: block; position: absolute; top: 100%; left: 0; }
以上樣式代碼中,通過設(shè)置menu、li、a、ul等元素的樣式屬性,實現(xiàn)了Jquery Menu的豎向展示效果。當(dāng)鼠標(biāo)懸停在li元素上時,ul子菜單展示出來。