웹디자인 기능사 실기 세로형 메뉴 slideDown / html css jQuery
가로형 메뉴는 다 연습해 봤고, 세로형 메뉴는 거의 비슷하지만 아주 살짝 다르기 때문에 공부해봤습니다.
html 소스
<body>
<div id="wrap">
<div id="header">
<h1><img src="img/logo3.png" alt="logo"></h1>
<div class="gnb">
<ul>
<li><a href="#">이용안내</a>
<ul>
<li><a href="#">이용방법</a></li>
<li><a href="#">이용시간</a></li>
<li><a href="#">이용요금</a></li>
</ul>
</li>
<li><a href="#">이벤트정보</a>
<ul>
<li><a href="#">현장이벤트</a></li>
<li><a href="#">온라인이벤트</a></li>
<li><a href="#">이벤트예약</a></li>
</ul>
</li>
<li><a href="#">프로그램</a>
<ul>
<li><a href="#">프로그램안내</a></li>
<li><a href="#">온라인예약</a></li>
<li><a href="#">단체예약상담</a></li>
</ul>
</li>
<li><a href="#">고객센터</a>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">자주묻는질문</a></li>
<li><a href="#">자료실</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
wrap으로 감싸고 #header 안에 <h1>으로 로고 영역을 잡아주고 200/40 크기로 텍스트 이미지를 포토샵으로 만들어서 넣어주었습니다.
.gnb로 메뉴 영역을 잡아 준 이후 메뉴는 <ul> , <li>로 메뉴, 서브 메뉴를 넣어주었습니다
html은 가로형과 크게 다를거 없습니다.
css 소스
div#wrap {
width: 1000px;
}
div#wrap div#header {
width: 200px;
height: 650px;
border: 1px solid black;
}
div#wrap div#header h1 {
width: 200px;
height: 40px;
margin-top:30px;
margin-bottom:30px;
}
div#wrap div#header div.gnb {
width: 180px;
margin: 0 auto;
outline: 1px solid black;
}
div#wrap div#header div.gnb > ul {
width: 180px;
}
div#wrap div#header div.gnb > ul > li {
width: 180px;
}
div#wrap div#header div.gnb > ul > li > a{
display: block;
height:50px;
text-align:center;
line-height:50px;
}
div#wrap div#header div.gnb > ul > li:hover > a {
background-color: aliceblue;
}
div#wrap div#header div.gnb > ul > li > ul {
display : none;
border-bottom : 1px solid black;
}
/* div#wrap div#header div.gnb > ul > li:hover > ul {
display : block;
} */
div#wrap div#header div.gnb > ul > li > ul > li {
width: 180px;
height: 50px;
text-align:center;
line-height:50px;
}
div#wrap div#header div.gnb > ul > li > ul > li > a {
display: block;
}
div#wrap div#header div.gnb > ul > li > ul > li:hover > a {
background-color: aliceblue;
}
wrap 의 넓이 값을 100%가 아닌 1000px로 잡고 왼쪽 정렬이라고 하여 margin: 0 auto;가 없습니다.
header 영역이 세로로 길기 때문에 넓이 값을 200 잡아주고 넓이는 나와있는 대로 650으로 했고 영역을 보여주기 위해서 border를 주었습니다.
<h1>은 200/40으로 로고를 만들어야한다고 적혀 있기 때문에 200/ 40으로 잡아주고 가운데 정렬하기 위해 위아래 공간을 30씩 줬습니다.
. gnb영역이 가운데 정렬을 하기 위해 넓이 값을 180 주고 margin : 0 auto를 주어서 가운데 정렬을 해줬습니다.
<ul> 똑같고, <li>부터 가로형과 다른 점이 많습니다.
<li>에 높이 값을 준다면 크기가 정해져 버리기 때문에 아래로 슬라이드를 해줄 수가 없기 때문에 높이 값을 주면 안 된다는 점이 굉장히 다르고 중요합니다.
<li>에 높이 값을 주지 못하면 스타일링도 힘들기 때문에 <li> 안에 있는 a 태그를 display : block 으로 바꿔주고 a태그를 스타일링해주면 <li>에 스타일링해준 것과 같게 되기 때문에 a 태그로 스타일링을 해줍니다.
서브메뉴 <ul>에 display: none을 해준 뒤에 css로 먼저 <li>에 hover시 서브메뉴 <ul>이 display : block 으로 변환시켜서 작동이 잘 되는지 확인한 후에 주석처리해줬습니다.
메인 메뉴 <li>를 스타일링해준 것처럼 스타일링을 해준 뒤에 css는 마무리해줬습니다.
jQuery 소스
$(document).ready(function(){
$("div.gnb > ul > li").mouseenter(function(){
$(this).children("ul").stop().slideDown();
})
$("div.gnb > ul > li").mouseleave(function(){
$(this).children("ul").stop().slideUp();
})
})
제이쿼리 시작을 알리고
선택자에. 마우스를 올렸을 때 (할 일
선택자의. 자식("ul")은. 모든 것을 멈추고. 슬라이드 다운된다;
선택자에. 마우스가 떠났을 때 (할 일
선택자의. 자식("ul")은. 모든 것을 멈추고. 슬라이드 업이 된다;
})
jQuery는 별 거 없죠!
this를 쓰지 않으면 선택자 전체가 선택이 되기 때문에, this 를 써주어서 개별로 슬라이드 다운되게 만들어 준 것 빼고는 이해하기 쉽습니다!
영상으로 마무리하겠습니다.
웹디자인 기능사 실기 개별 메뉴 slideDown html css js
웹디자인 기능사 실기 개별 메뉴 slideDown html css js
웹디자인 기능사 실기 개별 메뉴 slideDown / html css js 다가오는 웹디자인 기능사 실기를 앞두고 개인적으로 학원을 다니는 사람들, 국비 지원을 받아서 학원을 다니는 사람들 혹은 혼자 독
dfen.tistory.com
'디노 code.html' 카테고리의 다른 글
| hover 했을 때 underline animation 효과 만들기 / html css (0) | 2021.08.16 |
|---|---|
| 마우스를 따라다니는 이미지 만들기 mousemove /html css jQuery (0) | 2021.08.11 |
| 혼자 공부하는 자바스크립트 예제 정리 inch 를 cm 단위로 변경하기 (0) | 2021.08.10 |
| 웹디자인 기능사 실기 modal layer popup(레이어 팝업) / html css jQuery (0) | 2021.08.10 |
| 반응형 웹 메뉴 만들기 @media css / html css (0) | 2021.08.09 |
댓글