菜單導航欄是網站或應用程序中常見的組件,用于展示網站或應用程序的主要頁面或功能。菜單導航欄的樣式可以影響用戶對網站或應用程序的整體印象,因此需要有一套美觀、易用的CSS模板。
使用CSS實現菜單導航欄的基本方法是通過列表元素進行布局和樣式設置。以下是一套簡單的CSS模板: /* CSS Reset, 清除瀏覽器默認樣式 */ nav, ul, li { margin: 0; padding: 0; list-style: none; } /* 主導航欄樣式 */ nav.main-nav { background-color: #333; } nav.main-nav ul { display: flex; justify-content: center; } nav.main-nav li { margin: 10px; } nav.main-nav a { display: block; color: #fff; padding: 10px; text-decoration: none; text-transform: uppercase; font-weight: bold; } nav.main-nav a:hover { background-color: #555; } /* 下拉菜單樣式 */ nav.main-nav ul ul { display: none; position: absolute; top: 50px; background-color: #fff; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } nav.main-nav ul li:hover >ul { display: block; } nav.main-nav ul ul li { display: block; } nav.main-nav ul ul a { color: #333; padding: 10px; } nav.main-nav ul ul a:hover { background-color: #eee; }
以上樣式設置了一個基本的主導航欄和下拉菜單的樣式,菜單項之間的間隔通過margin設置。下拉菜單使用絕對定位,鼠標懸停在菜單項上時,下拉菜單通過display:block顯示。下拉菜單中的菜單項也可以通過類似的方法添加。