美妝手機導航欄（案例）
阿新 • • 發佈：2022-03-29
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet"href="./css/style.css" /> </head> <style> * { list-style: none; margin: 0; padding: 0; text-decoration: none; } </style> <body> <!-- 外部容器 --> <div class="top-bar"> <!-- 左側選單 --> <div class="left-menu"> <!--選單圖示 --> <div class="menu-icon"></div> <li class="li1" id="lia"></li> <li class="li2" id="lia"></li> <li class="li3" id="lia"></li> </ul> <!-- 建立選單 --> <ul class="naw"> <li class="li4"><a href="#">手機</a></li> <hr /> <li class="li5"><a href="#">美容儀器</a></li> <hr /> <li class="li6"><a href="#">配件</a></li> <hr /> <li class="li7"><a href="#">服務支援</a></li> <hr /> <li class="li8"><a href="#">企業網站</a></li> <li> <a href="#"><img src="/img/wu.png" /></a> <apan>搜尋 Meitu.com</apan> </li> </ul> </div> <!-- logo --> <h1 class="logo"> <a href="/" style="color: aliceblue; ">美圖手機</a> </h1> <!-- 使用者資訊 --> <div class="user-info"> <a href="#"> <img src="/img/si.png" /> </a> </div> </div> </body> </html>
/* 導航條的外部容器 */ .top-bar { height: 48px; padding: 0 14px; align-items: center; justify-content: space-between; background-color: black; display: flex; } /* 設定左側導航圖示 */ .left-menu { width: 18px; height: 48px; background-color: aliceblue; } .menu-icon { background-color: black; width: 18px; height: 48px; /* position: relative; */ } a { color: white; margin-left: 50px; } #lia { width: 18px; height: 5px; background-color: #ffffff; position: absolute; /* 修改原焦點 */ transform-origin: left center; transition: 0.2s; } .li1 { top: 18px; } .li2 { top: 24px; } .li3 { top: 30px; } .li1:hover { /* 向下旋轉 */ transform: rotateZ(40deg); } .li2:hover { /* 隱藏 */ opacity: 0; } .li3:hover { transform: rotateZ(-40deg); } .naw { display: none; position: absolute; top: 48px; left: 0; bottom: 0; background-color: black; width: 100%; } .user-info { border: 5px red solid; } li { margin-bottom: 20px; } .logo { margin: 0 auto; } /* 設定媒體查詢 */ @media only screen { /* 斷點 768*/ @media (max-width: 768px) { .left-menu { order: 2; } .logo { order: 1; } .user-info { order: 3; } } }