index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | <script> window.addEventListener("load",function(){ var visual = document.querySelector("#visual"); var banner = document.querySelector(".banner"); var prevButton = document.querySelector(".move-button .prev-button"); var nextButton = document.querySelector(".move-button .next-button"); var moreButton = document.querySelector(".more-vert-button"); var header = document.querySelector("#header"); var mainMenu = document.querySelector("#main-menu"); var mainMenuUl = document.querySelector("#main-menu>ul"); mainMenuUl.style.display="none"; mainMenu.style.display="block"; mainMenu.style.position="absolute"; mainMenu.style.left="0px"; mainMenu.style.top="50px"; mainMenu.style.height="0px"; mainMenu.style.width="100%"; prevButton.onclick = function(){ }; nextButton.onclick = function(){ //var left = String(Number(banner.style.left)+Number(visual.style.left)/3); /* transition은 요소의 위치 초기 값을 꼭 설정해줘야함. */ alert(banner.style.left); //banner.style.left = left; }; var moreButtonClosed = true; //Mobile Ver, 클릭 시 비쥬얼 위에 바로 표현하게 한다. moreButton.onclick = function(){ if(moreButtonClosed){ mainMenu.style.height="30px"; visual.style.marginTop = "30px"; //setTimeout // 시한폭탄 처럼 시작 시간을 늦춰준다. setTimeout(function(){ mainMenuUl.style.display="flex"; },500); moreButtonClosed=false; } else if(!moreButtonClosed){ visual.style.marginTop = "0px"; mainMenu.style.height="30px"; setTimeout(function(){ mainMenu.style.height="0px"; mainMenu.style.display="none"; },500); moreButtonClosed=true; } }; }); </script> </head> <body> <div id="header"> <div><img src="images/ic_menu_black_24dp_1x.png" /></div> <div class="content-container"> <h1><a><img src="images/logo-sm.png" /></a></h1> <section> <nav id="main-menu"> <h1 class="hidden">메인메뉴</h1> <ul> <li><a href="">학습가이드</a></li> <li><a href="">뉴렉과정</a></li> <li><a href="">강좌선택</a></li> </ul> </nav> </section> </div> <div class=""><img src="images/ic_search_black_24dp_1x.png" /></div> <div class="more-vert-button"><img src="images/ic_more_vert_black_24dp_1x.png" /></div> </div> <div id="visual"> <h2 class="hidden">신규 강좌목록</h2> <ul class="banner"> <li style='background:url("images/lecture/banner-javascript180.png") no-repeat center; background-size: cover;'> <a href=""></a> </li> <li style='background:url("images/lecture/banner-oracle180.png") no-repeat center; background-size: cover;'> <a href=""></a> </li> <li style='background:url("images/lecture/banner-spring180.png") no-repeat center; background-size: cover;'> <a href=""></a> </li> </ul> <ul class="move-button"> <li class="prev-button">이전</li> <li class="next-button">다음</li> </ul> </div> | cs |
style.css 중 일부
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #main-menu{ display:none; background-color: white; /*비주얼이 나타난 1초 후에 나오라는 delay*/ transition-delay: 0.5s; transition-property: height; } #main-menu>ul{ display:flex; flex-direction: row; line-height:50px; } | cs |
Transition : Style이 변화했을 때 유지되는 시간을 말한다.
-Transition-delay : 몇 초 후에 트랜지션이 나타나는 지 설정할 수 있다.
-Transition-property : 특정 속성에만 트랜지션을 줄 수 있다.
setTimeout(function(){},ms) : js문을 일정 ms 이후 시작하게 해주는 시한폭탄 같은 것
'공부 > css' 카테고리의 다른 글
| Picture태그 사용하기 (0) | 2017.05.31 |
|---|---|
| Padding 줄 때, 지정한 높이가 깨지는 것 해결하기 (2) | 2017.05.29 |
| 배너 옆으로 넘기기 (0) | 2017.05.17 |
| Background 이미지 크기 설정하기 / 2중 큰 따옴표 처리하기 (0) | 2017.05.15 |
| 태그의 기본 속성 지우기(ul태그) (0) | 2017.05.15 |