HTML5圓形導(dǎo)航菜單示例
HTML5圓形導(dǎo)航菜單是一種新型的導(dǎo)航菜單設(shè)計(jì),它不僅美觀,而且能夠提供更好的用戶體驗(yàn)。下面是一個(gè)HTML5圓形導(dǎo)航菜單示例:
<style> .menu-wrapper { position: relative; width: 100%; height: 100%; } .menu-item { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; background-color: #fff; border-radius: 50%; text-align: center; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); cursor: pointer; } .menu-item img { display: block; width: 32px; height: 32px; margin: 12px auto 0; } </style> <div class="menu-wrapper"> <a href="#" class="menu-item"> <img src="menu-item-1.png" alt="Menu Item 1"> <p>Menu Item 1</p> </a> <a href="#" class="menu-item"> <img src="menu-item-2.png" alt="Menu Item 2"> <p>Menu Item 2</p> </a> <a href="#" class="menu-item"> <img src="menu-item-3.png" alt="Menu Item 3"> <p>Menu Item 3</p> </a> <a href="#" class="menu-item"> <img src="menu-item-4.png" alt="Menu Item 4"> <p>Menu Item 4</p> </a> </div>
上面的代碼中,使用了position:absolute實(shí)現(xiàn)絕對(duì)定位,使用border-radius屬性實(shí)現(xiàn)圓角效果,使用box-shadow屬性實(shí)現(xiàn)陰影效果。同時(shí),每個(gè)菜單項(xiàng)中包含一個(gè)圖片和一個(gè)文字說(shuō)明,可以根據(jù)需要進(jìn)行修改。