728x90
Navigation Bar - HTML CSS vanilla JS
See the Pen Navigation Bar by rebornbb (@bongcasso01) on CodePen.
html
<nav class="navbar">
<div class="navbar_logo">
<a href="/"><span id="Nav-Logo"></span></a>
</div>
<ul class="navbar_menu">
</li>
<li><a th:href="#">INTRODUCE</a></li>
<li><a th:href="#">NEWS</a></li>
<li><a th:href="#">SHOPPING</a></li>
<li><a th:href="#">BOARD</a></li>
</ul>
<div class="navbar_icons">
<a href="#">
<li><img src="https://cdn-icons-png.flaticon.com/512/2609/2609282.png" alt=""
style="width:30px"></li></a>
</div>
<a href="#" class="navbar_toggleBtn">
<img src="https://cdn-icons-png.flaticon.com/512/7710/7710488.png" alt=""
style="width:30px">
</a>
</nav>css
* {
margin: 0;
padding: 0;
}
#Nav-Logo {
display: inline-flex;
height: 40px;
width: 140px;
background-image: url("https://cdn.pixabay.com/photo/2013/02/12/09/07/microsoft-80658_1280.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.navbar{
font-family: 'TmoneyRoundWindExtraBold';
display: flex;
justify-content: space-between;
align-items: center;
border: black solid;
border-width: 0 0 2px 0;
padding: 8px 30px;
margin-bottom: 30px;
}
.navbar a{
text-decoration: none;
color: black;
}
.navbar_menu{
display: flex;
list-style:none;
padding:0;
}
.navbar_menu li{
padding: 8px 12px;
}
.navbar_menu li:hover{
background-color: #71d3c3;
border-radius: 4px;
}
.navbar_icons{
list-style: none;
display: flex;
}
.navbar_icons li{
padding: 5px 12px;
}
.navbar_toggleBtn{
display: none;
top:5px;
right: 10px;
list-style: none;
}
@media screen and (max-width:768px) {
.navbar{
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.navbar_menu{
display: none; /*정화면에선 none*/
flex-direction: column;
align-items: center;
width: 100%;
}
.navbar_menu li{
width: 100%;
text-align: center;
}
.navbar_icons{
display: none; /*정화면에선 none*/
justify-content: center;
width: 100%;
}
.navbar_toggleBtn{
display: block;
position: absolute;
top: 14px;
right: 24px;
list-style: none;
}
.navbar_menu.menuActive,
.navbar_icons.menuActive{
display: flex;
}
}js
const toggleBtn = document.querySelector('.navbar_toggleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
toggleBtn.addEventListener('click' , ()=>{
menu.classList.toggle('menuActive');
icons.classList.toggle('menuActive');
});
addEventListener()
문서에 클릭 이벤트 추가
728x90
