( CSS )( HTML ) 이쁜 메뉴 만들기

최대한 CSS 로만 만들어 볼려구 했는데 click 후 처리 이벤트는 JS를 써버렸네요.

소스도 css, js, html 나눠서 적어놨어요.

다들 css, js 고수라 생각되니 설명은 생략해놧어요.

그래도 혹시 몰라 만들어지는 과정은 찍어는데... 데이터 주의입니다. gif가 용량이 ㅋ...

그리구 중간에 <div> 그릴때 각도잘못 계산했네요...;;;

1. 메뉴가 만들어지는 과정

2. 만들어진 메뉴

Click ME!

3 - 1. CSS 부분

view source

print?

001.<style>

002.    .circle_content {

003.        width: 100%;

004.        position: static;

005.    }

006. 

007.    .circle_content .Outcircle {

008.        width: 300px;

009.        height: 150px;

010.        margin: auto;

011.        background-color: #ffffff;

012.        position: relative;

013.        border-bottom-left-radius: 150px;

014.        border-bottom-right-radius: 150px;

015.        z-index: 0;

016.        overflow: hidden;

017.    }

018. 

019.    .circle_content .Incircle {

020.        width: 130px;

021.        height: 65px;

022.        background-color: #ffffff;

023.        position: absolute;

024.        left: 50%;

025.        margin-left: -65px;

026.        border-bottom-left-radius: 65px;

027.        border-bottom-right-radius: 65px;

028.        z-index: 1;

029.    }

030. 

031.    .circle_content .Outcircle .inMenu_1{

032.        width: 200px;

033.        height: 150px;

034.        background-color: #Af0fff;

035.        position: absolute;

036.        top: 0;

037.        left: -129px;

038.        -webkit-transform: skew(-45deg, 0deg);

039.        -moz-transform: skew(-45deg, 0deg);

040.        -o-transform: skew(-45deg, 0deg);

041.        -ms-transform: skew(-45deg, 0deg);

042.        opacity: 0;

043.        transition: opacity 0.2s ease;

044.        pointer-events: none;

045.    }

046. 

047.    .circle_content .Outcircle .inMenu_2{

048.        width: 150px;

049.        height: 200px;

050.        background-color: #CB63FF;

051.        position: absolute;

052.        top: 76px;

053.        left: -3px;

054.        -webkit-transform: skew(0deg, -45deg);

055.        -moz-transform: skew(0deg, -45deg);

056.        -o-transform: skew(0deg, -45deg);

057.        -ms-transform: skew(0deg, -45deg);

058.        opacity: 0;

059.        transition: opacity 0.4s ease;

060.        pointer-events: none;

061.    }

062. 

063.    .circle_content .Outcircle .inMenu_3{

064.        width: 150px;

065.        height: 200px;

066.        background-color: #D59EF1;

067.        position: absolute;

068.        top: 76px;

069.        left: 149px;

070.        -webkit-transform: skew(0deg, 45deg);

071.        -moz-transform: skew(0deg, 45deg);

072.        -o-transform: skew(0deg, 45deg);

073.        -ms-transform: skew(0deg, 45deg);

074.        opacity: 0;

075.        transition: opacity 0.6s ease;

076.        pointer-events: none;

077.    }

078. 

079.    .circle_content .Outcircle .inMenu_4{

080.        width: 200px;

081.        height: 150px;

082.        background-color: #5A94FF;

083.        position: absolute;

084.        top: 0px;

085.        left: 225px;

086.        -webkit-transform: skew(45deg, 0deg);

087.        -moz-transform: skew(45deg, 0deg);

088.        -o-transform: skew(45deg, 0deg);

089.        -ms-transform: skew(45deg, 0deg);

090.        opacity: 0;

091.        transition: opacity 0.8s ease;

092.        pointer-events: none;

093.    }

094. 

095.    .circle_content .InBtn {

096.        width: 100px;

097.        height: 50px;

098.        margin: auto;

099.        background-color: #CACACA;

100.        border-bottom-left-radius: 50px;

101.        border-bottom-right-radius: 50px;

102.        position: absolute;

103.        top: 0;

104.        left: 50%;

105.        margin-left: -50px;

106.        z-index: 999;

107.    }

108. 

109.    .circle_content .InBtn:hover {

110.        background-color: #A2A2A2;

111.    }

112. 

113.    .circle_content .Outcircle > div.on {

114.        opacity: 1;

115.        pointer-events: auto;

116.    }

117.</style>

3 - 2. JS 부분

view source

print?

01.<script>

02.    var inMenu_flag = 0;

03.    window.onload = function() {

04.        var circle_bt = document.getElementById("InBtn");

05.        circle_bt.onclick = function () {

06.            for(var i=1; i<5; i++){

07.                if(document.getElementById("inMenu_"+i).className == "inMenu_"+i+" on"){

08.                    document.getElementById("inMenu_"+i).className = "inMenu_"+i;

09.                    inMenu_flag = 0;

10.                }else{

11.                    document.getElementById("inMenu_"+i).className += " on";

12.                    inMenu_flag = 1;

13.                }

14.            }

15.        };

16.    };

17.    function inMenuEvent(flag){

18.        if(inMenu_flag == 1){

19.            alert("click to "+ flag +".");

20.        }

21.    }

22.</script>

3 - 3. HTML 부분

view source

print?

01.<div class="circle_content">

02.    <div class="InBtn" id="InBtn"></div>

03.    <div class="Outcircle">

04.        <div class="inMenu_1" id="inMenu_1" onclick="inMenuEvent(1); return false;"></div>

05.        <div class="inMenu_2" id="inMenu_2" onclick="inMenuEvent(2); return false;"></div>

06.        <div class="inMenu_3" id="inMenu_3" onclick="inMenuEvent(3); return false;"></div>

07.        <div class="inMenu_4" id="inMenu_4" onclick="inMenuEvent(4); return false;"></div>

08.        <div class="Incircle"></div>

09.    </div>

10.</div>

그밖에 구경거리 -> http://xline.dothome.co.kr/