검색결과 리스트
javascript에 해당되는 글 8건
- 2016.04.22 ( CSS )( HTML ) 이쁜 메뉴 만들기
글
최대한 CSS 로만 만들어 볼려구 했는데 click 후 처리 이벤트는 JS를 써버렸네요.
소스도 css, js, html 나눠서 적어놨어요.
다들 css, js 고수라 생각되니 설명은 생략해놧어요.
그래도 혹시 몰라 만들어지는 과정은 찍어는데... 데이터 주의입니다. gif가 용량이 ㅋ...
그리구 중간에 <div> 그릴때 각도잘못 계산했네요...;;;
1. 메뉴가 만들어지는 과정
2. 만들어진 메뉴
Click ME!
3 - 1. CSS 부분
<style> .circle_content { width: 100%; position: static; } .circle_content .Outcircle { width: 300px; height: 150px; margin: auto; background-color: #ffffff; position: relative; border-bottom-left-radius: 150px; border-bottom-right-radius: 150px; z-index: 0; overflow: hidden; } .circle_content .Incircle { width: 130px; height: 65px; background-color: #ffffff; position: absolute; left: 50%; margin-left: -65px; border-bottom-left-radius: 65px; border-bottom-right-radius: 65px; z-index: 1; } .circle_content .Outcircle .inMenu_1{ width: 200px; height: 150px; background-color: #Af0fff; position: absolute; top: 0; left: -129px; -webkit-transform: skew(-45deg, 0deg); -moz-transform: skew(-45deg, 0deg); -o-transform: skew(-45deg, 0deg); -ms-transform: skew(-45deg, 0deg); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .circle_content .Outcircle .inMenu_2{ width: 150px; height: 200px; background-color: #CB63FF; position: absolute; top: 76px; left: -3px; -webkit-transform: skew(0deg, -45deg); -moz-transform: skew(0deg, -45deg); -o-transform: skew(0deg, -45deg); -ms-transform: skew(0deg, -45deg); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .circle_content .Outcircle .inMenu_3{ width: 150px; height: 200px; background-color: #D59EF1; position: absolute; top: 76px; left: 149px; -webkit-transform: skew(0deg, 45deg); -moz-transform: skew(0deg, 45deg); -o-transform: skew(0deg, 45deg); -ms-transform: skew(0deg, 45deg); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .circle_content .Outcircle .inMenu_4{ width: 200px; height: 150px; background-color: #5A94FF; position: absolute; top: 0px; left: 225px; -webkit-transform: skew(45deg, 0deg); -moz-transform: skew(45deg, 0deg); -o-transform: skew(45deg, 0deg); -ms-transform: skew(45deg, 0deg); opacity: 0; transition: opacity 0.8s ease; pointer-events: none; } .circle_content .InBtn { width: 100px; height: 50px; margin: auto; background-color: #CACACA; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; position: absolute; top: 0; left: 50%; margin-left: -50px; z-index: 999; } .circle_content .InBtn:hover { background-color: #A2A2A2; } .circle_content .Outcircle > div.on { opacity: 1; pointer-events: auto; } </style>
3 - 2. JS 부분
<script> var inMenu_flag = 0; window.onload = function() { var circle_bt = document.getElementById("InBtn"); circle_bt.onclick = function () { for(var i=1; i<5; i++){ if(document.getElementById("inMenu_"+i).className == "inMenu_"+i+" on"){ document.getElementById("inMenu_"+i).className = "inMenu_"+i; inMenu_flag = 0; }else{ document.getElementById("inMenu_"+i).className += " on"; inMenu_flag = 1; } } }; }; function inMenuEvent(flag){ if(inMenu_flag == 1){ alert("click to "+ flag +"."); } } </script>
3 - 3. HTML 부분
<div class="circle_content"> <div class="InBtn" id="InBtn"></div> <div class="Outcircle"> <div class="inMenu_1" id="inMenu_1" onclick="inMenuEvent(1); return false;"></div> <div class="inMenu_2" id="inMenu_2" onclick="inMenuEvent(2); return false;"></div> <div class="inMenu_3" id="inMenu_3" onclick="inMenuEvent(3); return false;"></div> <div class="inMenu_4" id="inMenu_4" onclick="inMenuEvent(4); return false;"></div> <div class="Incircle"></div> </div> </div>
그밖에 구경거리 -> http://xline.dothome.co.kr/
'Programing > Web' 카테고리의 다른 글
( Jquery ) 아주아주 심플한 칼라 렌덤 팔레트 (0) | 2016.04.27 |
---|---|
( HTML & CSS ) 이쁜 메뉴만들기 두번째 !! (0) | 2016.04.26 |
( Web ) 슬라이드 효과주기 (0) | 2016.04.20 |
( javascript )( html ) Canvas를 이용한 삼각함수 표현 (0) | 2016.04.20 |
(DB) Linux 환경에서 테이블 백업 및 복구 (0) | 2015.11.27 |
RECENT COMMENT