-
[Project] header카테고리 없음 2022. 11. 8. 17:58
[HTML/CSS/BootStrap]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</head>
<header>
<!-- 위 네비 -->
<ul class="nav justify-conten
t-end" style="background-color: ghostwhite">
<li class="nav-item "><a class="btn btn-primary" data-bs-toggle="offcanvas"
href="#offcanvasExample" role="button"
aria-controls="offcanvasExample"> = </a>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="#"><p id="nav-menu">Login</p></a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="#"><p id="nav-menu">Resiter</p></a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="#"><p id="nav-menu">Cart</p></a></li>
<li class="nav-item dropdown"><a style="color: black"
class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false"> Lang
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">한국어</a></li>
<li><a class="dropdown-item" href="#">English</a></li>
<li><a class="dropdown-item" href="#">日本語</a></li>
</ul></li>
</ul>
</header>
<!-- 아래네비 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="resources/img/logo.png" style="width: auto; height: 50px"></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false"> Sale
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Fall's Sale</a></li>
<li><a class="dropdown-item" href="#">Event</a></li>
<li><a class="dropdown-item" href="#">Event</a></li>
</ul></li>
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Outer</a></li>
<li class="nav-item"><a class="nav-link" href="#">Dress</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pants</a></li>
<li class="nav-item"><a class="nav-link" href="#">Skirts</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shoes</a></li>
</ul>
</div>
</div>
</nav>
<div class="offcanvas offcanvas-start" tabindex="-1"
id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>오픈캔버스 리스트</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</div>
</div>
</div>