CSS3移動端縱向導航,是指在移動端上,利用CSS3技術制作出的垂直式導航菜單,可以使用戶在觸屏設備上更加輕松方便的瀏覽網站,提升用戶體驗。
/* CSS代碼 */ .nav { position: fixed; top: 50%; left: 0; width: 100px; margin-top: -100px; text-align: center; background-color: #333; color: #fff; z-index: 9999; transform: rotate(-90deg); } .nav ul { padding: 0; margin: 0; list-style: none; } .nav ul li { width: 100%; margin-bottom: 10px; } .nav ul li a { display: block; padding: 10px; background-color: #222; color: #fff; text-decoration: none; border-radius: 5px; } .nav ul li a:hover { background-color: #fff; color: #333; }
以上代碼中,`position: fixed;`屬性使菜單固定在頁面上,`top: 50%;`和`margin-top:-100px;`使菜單垂直居中,`transform: rotate(-90deg);`使菜單垂直展開。`.nav ul li`的樣式使菜單項豎向排列,`.nav ul li a`的樣式定義了菜單項的樣式。
使用CSS3移動端縱向導航菜單,可以使網站更加適應手機屏幕大小,提升訪問體驗。