( CSS ) 아주심플하면서 이쁜 메뉴 만들기! Programing/Web 2016. 5. 10. 15:16



아...음.... 네!

심플한 메뉴에요!

아주 심플하게 그라데이션효과를 확장해서 좌우로 왔다갔다하면서 만든거에요.


box-shadow를 줘서 더 꾸밀까 했는데.. 이건 다들 개인취향에 맞게 하실꺼라 믿고

심플하게만 만들었어요.


아 참고로 IE10 이랑 chrome 에서만 확인했어요!


-webkit-, -moz-, -o-, -ms-  등등은... 빠져있어요 ^ ㅡ^*




1. 제작 과정




2. 완성본



  tip ) 그라데이션을 이용한 버튼효과 원리





3. 소스 부분

  3-1. CSS 부분

view source
print?
01.<style>
02.    html, body {
03.        margin: 0;
04.    }
05. 
06.    .dropMenuBody {
07.        width: 500px;
08.        height: 70px;
09.        position: relative;
10.        border: 1px;
11.        border-style: dotted;
12.    }
13. 
14.    .mainMenu {
15.        width: 150px;
16.        height: 50px;
17.        line-height: 50px;
18.        vertical-align: middle;
19.        text-align: center;
20.        float: left;
21.        margin-left: 5px;
22.        cursor: pointer;
23. 
24.        background-image: linear-gradient(90deg, #98A57F 10%, #CCDDAA 40%);
25.        background-size: 300px auto;
26.        background-position: -150px 0;
27.        transition: background-position 0.5s;
28.    }
29. 
30.    .lineDiv {
31.        width: 5px;
32.        height: 50px;
33.        background-color: #98A57F;
34.        position: absolute;
35.    }
36. 
37.    #lineDiv_1 {
38.        left: 5px;
39.    }
40. 
41.    #lineDiv_2 {
42.        left: 160px;
43.    }
44. 
45.    #lineDiv_3 {
46.        left: 315px;
47.    }
48. 
49.    #mainMenu_1:hover {
50.        background-position: 5px 0;
51.    }
52. 
53.    #mainMenu_2:hover {
54.        background-position: 5px 0;
55.    }
56. 
57.    #mainMenu_3:hover {
58.        background-position: 5px 0;
59.    }
60.</style>




  3-2. JS부분은 없습니다.




  3-3. HTML 부분

view source
print?
01.<div class="dropMenuBody">
02.    <div class="lineDiv" id="lineDiv_1"></div>
03.    <div class="mainMenu" id="mainMenu_1"><b>메뉴 1</b></div>
04. 
05.    <div class="lineDiv" id="lineDiv_2"></div>
06.    <div class="mainMenu" id="mainMenu_2"><b>메뉴 2</b></div>
07.             
08.    <div class="lineDiv" id="lineDiv_3"></div>
09.    <div class="mainMenu" id="mainMenu_3"><b>메뉴 3</b></div>
10.</div>




저작자표시

'Programing > Web' 카테고리의 다른 글

( CSS & Javascript ) 슬라이드 메뉴 만들기  (0) 2016.05.10
( CSS ) 심플한 드랍다운 메뉴 만들기  (10) 2016.05.10
( Web ) 스케쥴 관리 웹 만들기  (0) 2016.05.02
( Jquery ) 아주아주 심플한 칼라 렌덤 팔레트  (0) 2016.04.27
( HTML & CSS ) 이쁜 메뉴만들기 두번째 !!  (0) 2016.04.26
,

티스토리툴바