728x90
320x100
화면이 작아지면 네비바 위치가 바뀌게 하기
화면 양 옆에 사이드바가 있다.
근데 화면이 작아지면 사이드바가 화면을 가린다.
그래서 화면이 작아질 땐 사이드바를 위의 네비바로 바꿔버리기로 했다.
<!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>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!-- JS -->
<script src="../static/js/index.js"></script>
</head>
<body>
<!-- 상단 네비게이션바 -->
<nav class="navbar">
<div class="container">
<ul id="navbar-right" class="navbar-nav mr-auto">
<li><a href="../index.html">홈</a></li>
<a href="../article/articles.html">
<li id="create-article" style="display: none;">글쓰기</li>
</a>
<!-- 로그인과 회원가입 버튼 -->
<li class="nav-item disable"><a id="login-btn" class="nav-link btn me-2 btn_org"
href="../user/login.html">
로그인 <span class="sr-only"></span></a></li>
<li class="nav-item disable"><a id="signup-btn" class="nav-link btn me-2 btn_gr"
href="../user/signup.html">
회원가입 <span class="sr-only"></span></a></li>
</li>
<li class="nav-item disable">
<!-- 로그인시 회원 로그인 정보를 보여줌 : 닉네임 누르면 마이페이지 -->
<a id="intro" href="/"></a>
</li>
</ul>
</div>
</nav>
</body>
</html>
.navbar{
height: 50px;
width: 100%;
position: fixed;
top:-50px;
background-color: antiquewhite;
}
.navbar li{
list-style: none;
}
.navbar .container #navbar-right{
height: 50px;
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
/* 미디어 쿼리 */
@media screen and (max-width: 768px) {
#left-sidebar {
transform: translateX(-100%);
}
#right-sidebar {
transform: translateX(100%);
}
body {
margin-top: 40px;
width: 100%;
}
.navbar {
transform: translateY(50px);
}
}
// 상단 네비바, 푸터 가져오기
document.addEventListener("DOMContentLoaded", function () {
// 네비바를 삽입할 위치
var navbarContainer = document.querySelector("#navbar-container");
if (navbarContainer) {
// base-nav.html 파일을 가져와서 네비게이션바 위치에 삽입
fetch("../nav.html")
.then(response => response.text())
.then(data => {
navbarContainer.innerHTML = data;
// base-nav.html이 로드된 후에 intro 태그와 기타 작업을 수행
const payload = localStorage.getItem("payload");
const payload_parse = JSON.parse(payload)
const intro = document.getElementById("intro");
if (intro) {
const payload = localStorage.getItem("payload");
const payload_parse = JSON.parse(payload);
intro.innerHTML = `
<a href="${frontend_base_url}/user/profile.html?user_id=${payload_parse.user_id}">
<span><img class="profile-img" src="${backend_base_url}/media/${payload_parse.profile_img}" alt="" style="width:40px;"></span>
${payload_parse.nickname}</a>`
let navbarRight = document.getElementById("navbar-right");
let newLi = document.createElement("li");
newLi.setAttribute("class", "nav-item");
let logoutBtn = document.createElement("a");
logoutBtn.setAttribute("class", "nav-link btn");
logoutBtn.innerText = "로그아웃";
logoutBtn.setAttribute("href", "#");
logoutBtn.setAttribute("onclick", "confirmLogout()");
newLi.appendChild(logoutBtn);
navbarRight.appendChild(newLi);
}
let loginbtn = document.getElementById("login-btn");
let signupbtn = document.getElementById("signup-btn");
let createbtn = document.getElementById('create-article')
if (loginbtn) {
loginbtn.style.display = "none";
signupbtn.style.display = "none";
createbtn.style.display="block";
}
})
.catch(error => {
console.error("Error fetching navigation bar:", error);
});
}
});300x250
반응형
GitHub 댓글