728x90
반응형
2023 웹디자인 기능사 실기 레이아웃 : 메뉴바
레이아웃, 메뉴바, 이미지 슬라이드
참고
- 코드 참고 : https://github.com/dongjin6539/web2023/tree/main/webd
- 레이아웃 코드 참고 : https://github.com/dongjin6539/web2023/tree/main/webd/layout
- MENU-1, MENU-2 참고 : https://github.com/dongjin6539/web2023/tree/main/webd/menu
- 레이아웃 다양한 방법 참고 : https://dongjin6539.github.io/web2023/layout/index.html
메뉴바
코드 구성
<nav class="nav">
<ul>
<li><a href="#">메뉴1</a>
<ul class="submenu">
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-2</a></li>
<li><a href="#">서브메뉴1-3</a></li>
<li><a href="#">서브메뉴1-4</a></li>
</ul>
</li>
<li><a href="#">메뉴2</a>
<ul class="submenu">
<li><a href="#">서브메뉴2-1</a></li>
<li><a href="#">서브메뉴2-2</a></li>
<li><a href="#">서브메뉴2-3</a></li>
<li><a href="#">서브메뉴2-4</a></li>
</ul>
</li>
<li><a href="#">메뉴3</a>
<ul class="submenu">
<li><a href="#">서브메뉴3-1</a></li>
<li><a href="#">서브메뉴3-2</a></li>
<li><a href="#">서브메뉴3-3</a></li>
<li><a href="#">서브메뉴3-4</a></li>
</ul>
</li>
<li><a href="#">메뉴4</a>
<ul class="submenu">
<li><a href="#">서브메뉴4-1</a></li>
<li><a href="#">서브메뉴4-2</a></li>
<li><a href="#">서브메뉴4-3</a></li>
<li><a href="#">서브메뉴4-4</a></li>
</ul>
</li>
</ul>
</nav>- 메뉴 안에 서브메뉴가 있는 유형이므로 ul 태그 > li 태그 > ul 태그 > li 태그를 사요해줍니다.
CSS
.nav {
width: 80%;
background-color: #aaa;
padding: 30px 40px;
}
.nav > ul {
display: flex;
justify-content: right;
}
.nav > ul > li {
position: relative;
}
.nav > ul > li > a {
background-color: #dba9a9;
display: block;
padding: 10px 40px;
}
.nav > ul > li > a:hover {
background-color: #c57f7f;
}
.nav > ul > li > ul {
position: absolute;
left: 0;
top: 40px;
background-color: #ccc;
width: 100%;
display: none;
}
.nav > ul > li > ul > li > a {
padding: 10px;
display: block;
}
.nav > ul > li > ul > li > a:hover {
background-color: #000;
color: #fff;
}- 각각의 class 명과 태그를 가져와서 각각 알맞는 스타일과 속성을 입력해서 적용시켜줍니다.
메뉴바 유형1
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".nav > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown();
});
$(".nav > ul > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp();
});
</script>- 일단 jQuery의 cdn링크를 가져와서 적용시켜줍니다.
- 마우스가 올라갔을 때 메뉴의 서브메뉴가 내려와야 하므로 $( )로 선택자를 가져와서 직접 mouseover 메서드를 입력시키고 함수를 사용해서 this를 사용해서 위의 선택자를 그대로 가져오고 거기서 class명 submenu를 찾아야 하므로 .find 메서드를 사용해줍니다. 그리고 .slideDown( )을 사용해서 밑으로 내려가게 해주고 시간 타이밍에 얽메이지 않게 하기 위해 .stop( )를 사용해줍니다.
- 마우스가 나갔을 때 메뉴의 서브메뉴가 올라가야 하므로 $( )로 선택자를 가져와서 직접 mouseout 메서드를 입력시키고 함수를 사용해서 this를 사용해서 위의 선택자를 그대로 가져오고 거기서 class명 submenu를 찾아야 하므로 .find 메서드를 사용해줍니다. 그리고 .slideUp( )을 사용해서 밑으로 내려가게 해주고 시간 타이밍에 얽메이지 않게 하기 위해 .stop( )를 사용해줍니다.
Javascript
<script>
document.querySelectorAll(".nav > ul > li").forEach(li => {
li.addEventListener("mouseover", () => {
li.querySelector(".submenu").style.display = "block";
})
li.addEventListener("mouseout", () => {
li.querySelector(".submenu").style.display = "none";
})
});
</script>- 먼저 메뉴의 선택자를 찾고 다중이이므로 forEach( ) 함수를 사용해서 element의 값을 li로 저장시켜줍니다.
- 마우스가 올라갔을 때 메뉴의 서브메뉴가 내려와야 하므로 addEventListenr("mouseover") 메서드를 사용해주고 li 부분에 .submenu를 찾고 스타일을 display="block"를 해서 나타나게 해줍니다.
- 다음 마우스가 나갔을 때 메뉴의 서브메뉴가 올라가야 하므로 addEventListenr("mouseout") 메서드를 사용해주고 li 부분에 .submenu를 찾고 스타일을 display="none"를 해서 사라지게 해줍니다.
메뉴바 유형2
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".nav > ul > li").mouseover(function(){
$(".nav > ul > li > .submenu").stop().slideDown();
});
$(".nav > ul > li").mouseout(function(){
$(".nav > ul > li > .submenu").stop().slideUp();
});
</script>- 일단 jQuery의 cdn링크를 가져와서 적용시켜줍니다.
- 마우스가 올라갔을 때 메뉴의 서브메뉴 전체가 내려와야 하므로 $( )로 선택자를 가져와서 직접 mouseover 메서드를 입력시키고 함수를 사용해서 선택자로 .submenu를 가져옵니다. 그리고 .slideDown( )을 사용해서 밑으로 내려가게 해주고 시간 타이밍에 얽메이지 않게 하기 위해 .stop( )를 사용해줍니다.
- 마우스가 나갔을 때 메뉴의 서브메뉴가 올라가야 하므로 $( )로 선택자를 가져와서 직접 mouseout 메서드를 입력시키고 함수를 사용해서 선택자로 .submenu를 가져옵니다. 그리고 .slideUp( )을 사용해서 밑으로 내려가게 해주고 시간 타이밍에 얽메이지 않게 하기 위해 .stop( )를 사용해줍니다.
Javascript
<script>
document.querySelectorAll(".nav > ul > li").forEach(li => {
li.addEventListener("mouseover", () => {
document.querySelectorAll(".nav > ul > li").forEach(li => {
li.querySelector(".submenu").style.display = "block";
})
})
li.addEventListener("mouseout", () => {
document.querySelectorAll(".nav > ul > li").forEach(li => {
li.querySelector(".submenu").style.display = "none";
})
})
});
</script>- 먼저 메뉴의 선택자를 찾고 다중이이므로 forEach( ) 함수를 사용해서 element의 값을 li로 저장시켜줍니다.
- 마우스가 올라갔을 때 메뉴의 서브메뉴가 내려와야 하므로 addEventListenr("mouseover") 메서드를 사용해주고 다시 메뉴의 선택자를 찾고 다중이이므로 forEach( ) 함수 element의 값을 li 새로 저장해서 li 부분에 .submenu를 찾고 스타일을 display="block"를 해서 submenu 전체가 나타나게 해줍니다.
- 다음 마우스가 나갔을 때 메뉴의 서브메뉴가 올라가야 하므로 addEventListenr("mouseout") 메서드를 사용해주고 다시 메뉴의 선택자를 찾고 다중이이므로 forEach( ) 함수 element의 값을 li 새로 저장해서 li 부분에 .submenu를 찾고 스타일을 display="none"를 해서 submenu 전체가 사라지게 해줍니다.
728x90
반응형
