( HTML & CSS ) 이쁜 메뉴만들기 두번째 !!

일단 기본적으로 제가 디자인에 특출난 재능이 없기에...

색상이 불편하시더라도 따로 수정하셔서 쓰시면 될듯 합니다.

개발틱하게...!

아 이건 급하게 하느라 PC...것두 크롬에서만 확인해서 나머진...모르겠네요!!아핳!?

1. 만들어지는 과정

2. 만들어진 메뉴

Menu 1

Menu 2

Menu 3

Menu 4

3. 소스 부분

  1. CSS

view source

print?

01.<style>

02.    html, body {

03.        margin: 10px 5px 5px 5px;

04.    }

05.     

06.    .menu_body {

07.        width: 100%;

08.        height: 60px;

09.        background-color: #CACACA;

10.        padding-top: 10px;

11.        border-radius: 10px;

12.    }

13. 

14.    .menu_bk {

15.        height: 50px;

16.        background-color: #A2A2A2;

17.        margin-left: 10px;

18.        margin-right: 10px;

19.        position: relative;

20.        color: #ffffff;

21.        font-size: 20px;

22.        border-radius: 6px;

23.    }

24. 

25.    .menu_bk > div:hover{

26.        color: yellow;

27.    }

28. 

29.    #divBt {

30.        width: 150px;

31.        height: 50px;

32.        float: left;

33.        text-align: center;

34.        vertical-align: middle;

35.        line-height: 50px;

36.        cursor: pointer;

37.    }

38. 

39.    .triangle_point {

40.        width: 0;

41.        height: 0;

42.        z-index: 999;

43.        position: absolute;

44.        border-left: 6px solid transparent;

45.        border-right: 6px solid transparent;

46.        border-bottom: 8px solid #CACACA;

47.        bottom: 0px;

48.        transition: transform 800ms;

49.        transform: translate(71px, 0);

50.    }

51. 

52.    .divBt_1:hover ~ .triangle_point {

53.        transform: translate(71px, 0);

54.    }

55. 

56.    .divBt_2:hover ~ .triangle_point {

57.        transform: translate(221px, 0);

58.    }

59. 

60.    .divBt_3:hover ~ .triangle_point {

61.        transform: translate(371px, 0);

62.    }

63. 

64.    .divBt_3:active  ~ .triangle_point {

65.        transform: translate(371px, 0);

66.    }

67. 

68.    .divBt_4:hover ~ .triangle_point {

69.        transform: translate(521px, 0);

70.    }

71.</style>

  2. javascript

view source

print?

1.<script>

2.    window.onload = function(){

3.        var obj = document.getElementsByClassName("divBt_1");

4.        obj.divBt.style.color = "#000000";

5.    }

6.</script>

  3. HTML

view source

print?

01.<div class="menu_body">

02.    <div class="menu_bk">

03.        <div class="divBt_1" id="divBt" onclick="menu_click_event(this);">Menu 1</div>

04.        <div class="divBt_2" id="divBt" onclick="menu_click_event(this);">Menu 2</div>

05.        <div class="divBt_3" id="divBt" onclick="menu_click_event(this);">Menu 3</div>

06.        <div class="divBt_4" id="divBt" onclick="menu_click_event(this);">Menu 4</div>

07.        <div class="triangle_point"></div>

08.    </div>

09.</div>

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