( CSS ) 심플한 드랍다운 메뉴 만들기

음....색상은...개인 취향에 맞게 .... 전회색이 좋아요...

이 거역시 크롬, IE10에서만 확인을 했어요.

그때그때 생각나서 만든거라 미흡한것도 많을수 있어요 참고 해주세요

1. 제작 과정

2. 결과물

Menu 1

Sub Menu 1-1

Sub Menu 1-2

Sub Menu 1-3

Menu 2

Sub Menu 2-1

Sub Menu 2-2

Sub Menu 2-3

Menu 3

Sub Menu 3-1

Sub Menu 3-2

Sub Menu 3-3

3. 소스부분

  3-1. CSS 부분

view source

print?

001.<style>

002.    .menuBody_hsy {

003.        width: 250px;

004.        height: 300px;

005.        border: 1px double black;

006.        padding-left: 40px;

007.        padding-top: 40px;

008.    }

009. 

010.    .mainMenu {

011.        width: 200px;

012.        height: 50px;

013.        margin-bottom:5px;

014.        line-height: 50px;

015.        vertical-align: middle;

016.        text-align: center;

017.        background-color: #E0E0E0;

018.        box-shadow: 2px 0px 2px #868686;

019.        cursor: pointer;

020.        transition: transform 600ms;

021.         

022.        -ms-transition: -ms-transform 600ms;

023.        -webkit-transition: -webkit-transform 600ms;

024.        -moz-transition: -moz-transform 600ms;

025.        -o-transition: -o-transform 600ms;

026.    }

027. 

028.    #mainMenu_2 {

029.        transform: translateY(-100px);

030.         

031.        -ms-transform: translateY(-100px);

032.        -webkit-transform: translateY(-100px);

033.        -moz-transform: translateY(-100px);

034.        -o-transform: translateY(-100px);

035.    }

036. 

037.    #mainMenu_3 {

038.        transform: translateY(-200px);

039. 

040.        -ms-transform: translateY(-200px);

041.        -webkit-transform: translateY(-200px);

042.        -moz-transform: translateY(-200px);

043.        -o-transform: translateY(-200px);

044.    }

045. 

046.    .subMenu_body {

047.        width: 190px;

048.        height: 100px;

049.        border: 1px double #E0E0E0;

050.        margin-top: -5px;

051.        margin-bottom: 5px;

052.        margin-left: 5px;

053.        box-shadow: 1px 1px 1px #868686;

054. 

055.        transition: transform 600ms;

056.        transform: scaleY(0.0);

057.        transform-origin: 0px 0px;

058. 

059.        -ms-transition: -ms-transform 600ms;

060.        -webkit-transition: -webkit-transform 600ms;

061.        -moz-transition: -moz-transform 600ms;

062.        -o-transition: -o-transform 600ms;

063. 

064.        -ms-transform: scaleY(0.0);

065.        -webkit-transform: scaleY(0.0);

066.        -moz-transform: scaleY(0.0);

067.        -o-transform: scaleY(0.0);

068. 

069.        -ms-transform-origin: 0px 0px;

070.        -webkit-transform-origin: 0px 0px;

071.        -moz-transform-origin: 0px 0px;

072.        -o-transform-origin: 0px 0px;

073. 

074.        opacity: 0.0;

075.    }

076. 

077.    .subMenu_body > div {

078.        height: 30px;

079.        line-height: 30px;

080.        vertical-align: middle;

081.        text-align: center;

082.    }

083. 

084.    #subMenu_body_2 {

085.        margin-top: -105px;

086.        margin-bottom: 105px;

087.    }

088. 

089.    #subMenu_body_3 {

090.        margin-top: -205px;

091.    }

092. 

093.    #mainMenu_1:hover ~ #subMenu_body_1, #subMenu_body_1:hover{

094.        opacity: 1;

095.        transform: scaleY(1.0);

096. 

097.        -ms-transform: scaleY(1.0);

098.        -webkit-transform: scaleY(1.0);

099.        -moz-transform: scaleY(1.0);

100.        -o-transform: scaleY(1.0);

101.    }

102. 

103.    #mainMenu_1:hover ~ #mainMenu_2, #subMenu_body_1:hover ~ #mainMenu_2 {

104.        transform: translateY(0px);

105. 

106.        -ms-transform: translateY(0px);

107.        -webkit-transform: translateY(0px);

108.        -moz-transform: translateY(0px);

109.        -o-transform: translateY(0px);

110.    }

111. 

112.    #mainMenu_1:hover ~ #mainMenu_3, #subMenu_body_1:hover ~ #mainMenu_3 {

113.        transform: translateY(-100px);

114. 

115.        -ms-transform: translateY(-100px);

116.        -webkit-transform: translateY(-100px);

117.        -moz-transform: translateY(-100px);

118.        -o-transform: translateY(-100px);

119.    }

120. 

121.    #mainMenu_2:hover ~ #subMenu_body_2, #subMenu_body_2:hover{

122.        opacity: 1;

123.        transform: scaleY(1);

124. 

125.        -ms-transform: scaleY(1.0);

126.        -webkit-transform: scaleY(1.0);

127.        -moz-transform: scaleY(1.0);

128.        -o-transform: scaleY(1.0);

129.    }

130. 

131.    #mainMenu_2:hover ~ #mainMenu_3, #subMenu_body_2:hover ~ #mainMenu_3 {

132.        transform: translateY(-100px);

133. 

134.        -ms-transform: translateY(-100px);

135.        -webkit-transform: translateY(-100px);

136.        -moz-transform: translateY(-100px);

137.        -o-transform: translateY(-100px);

138.    }

139. 

140.    #mainMenu_3:hover ~ #subMenu_body_3, #subMenu_body_3:hover{

141.        opacity: 1;

142.        transform: scaleY(1);

143. 

144.        -ms-transform: scaleY(1.0);

145.        -webkit-transform: scaleY(1.0);

146.        -moz-transform: scaleY(1.0);

147.        -o-transform: scaleY(1.0);

148.    }

149.</style>

  3-2. JS 는 사용안했어요

  3-3. HTML 부분

view source

print?

01.<div class="menuBody_hsy">

02.    <div class="mainMenu" id="mainMenu_1"><b>Menu 1</b></div>

03.    <div class="subMenu_body" id="subMenu_body_1">

04.        <div>Sub Menu 1-1</div>

05.        <div>Sub Menu 1-2</div>

06.        <div>Sub Menu 1-3</div>

07.    </div>

08.    <div class="mainMenu" id="mainMenu_2"><b>Menu 2</b></div>

09.    <div class="subMenu_body" id="subMenu_body_2">

10.        <div>Sub Menu 2-1</div>

11.        <div>Sub Menu 2-2</div>

12.        <div>Sub Menu 2-3</div>

13.    </div>

14.    <div class="mainMenu" id="mainMenu_3"><b>Menu 3</b></div>

15.    <div class="subMenu_body" id="subMenu_body_3">

16.        <div>Sub Menu 3-1</div>

17.        <div>Sub Menu 3-2</div>

18.        <div>Sub Menu 3-3</div>

19.    </div>

20.</div>