Search

Header & Offcavas

Header & Offcavas

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Header & OffCanvas</title> <!-- BS css--> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Fifth navbar example"> <div class="container"> <a class="navbar-brand" href="/"> <img src="./img/logo.png" alt="logo" width="48"> <span>ALOHA CLASS</span> </a> <!-- ํ–„๋ฒ„๊ฑฐ ๋ฒ„ํŠผ --> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- ๋ฉ”๋‰ด --> <div class="collapse navbar-collapse"> <div class="d-flex justify-content-between w-100"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">์ƒํ’ˆ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">๊ฒŒ์‹œํŒ</a> </li> </ul> <ul class="navbar-nav mb-2 mb-lg-0"> <li class="nav-item mx-2"> <a class="btn btn-outline-primary" href="#">๋กœ๊ทธ์ธ</a> </li> <li class="nav-item mx-2"> <a class="btn btn-outline-success" href="#">ํšŒ์›๊ฐ€์ž…</a> </li> </ul> </div> </div> </div> </nav> <!-- ์˜คํ”„์บ”๋ฒ„์Šค --> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight" aria-labelledby="offcanvasNavbarLightLabel"> <div class="offcanvas-header border-bottom"> <a class="navbar-brand d-flex align-items-center gap-2" href="/"> <img src="./img/logo.png" alt="logo" width="48"> <h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">ALOHA CLASS</h5> </a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body d-flex flex-column justify-content-end"> <!-- โฌ† --> <ul class="navbar-nav flex-grow-1 pe-3"> <li class="nav-item"> <a class="nav-link" href="#">์ƒํ’ˆ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">๊ฒŒ์‹œํŒ</a> </li> </ul> <!-- โฌ‡ --> <div class="box p-4 d-grid gap-2"> <a class="btn btn-primary" href="#">๋กœ๊ทธ์ธ</a> <a class="btn btn-success" href="#">ํšŒ์›๊ฐ€์ž…</a> </div> </div> </div> </header> <!-- BS js--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>
HTML
๋ณต์‚ฌ