( CSS & Javascript ) 슬라이드 메뉴 만들기 Programing/Web 2016. 5. 10. 19:12



이건 모바일에서 가장 많이 쓰이는 방법중에 하나 입니다.

물론 다른곳에도 쓰이구요.


부족한 화면에 메뉴를 숨겨뒀다가 땡겨오는거죠.

크롬, IE10에서만 확인했다는거...





1. 제작 과정





2. 완성본

Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Close





3. 소스 부분

  3-1. CSS 부분

view source
print?
01.<style>
02.    html, body {
03.        margin: 10 10;
04.    }
05. 
06.    .VirtualView {
07.        width: 400px;
08.        height: 600px;
09.        overflow: hidden;
10.        border: 1px;
11.        border-style: double;
12.        position: relative;
13.    }
14. 
15.    .hideMenuBody {
16.        width: 150px;
17.        height: 100%;
18.        background-color: #4d4d4d;
19.        padding-top: 100px;
20.        transition: transform 600ms;
21.        transform: translate(-150px, 0px);
22. 
23.        -ms-transition: -ms-transform 600ms;
24.        -webkit-transition: -webkit-transform 600ms;
25.        -moz-transition: -moz-transform 600ms;
26.        -o-transition: -o-transform 600ms;
27. 
28.        -ms-transform: translate(-150px, 0px);
29.        -webkit-transform: translate(-150px, 0px);
30.        -moz-transform: translate(-150px, 0px);
31.        -o-transform: translate(-150px, 0px);
32.    }
33. 
34.    .hideMenuBody > div {
35.        width: 150px;
36.        height: 30px;
37.        line-height: 30px;
38.        vertical-align: middle;
39.        text-align: center;
40.        color: #ffffff;
41.        cursor: pointer;
42.        margin-bottom: 5px;
43.        box-shadow: 1px 1px 0px #ffffff;
44.    }
45. 
46.    .hideMenuBody > div:hover {
47.        background-color: #808080;
48.    }
49. 
50.    .circleBt {
51.        width: 50px;
52.        height: 50px;
53.        position: absolute;
54.        bottom: 10px;
55.        left: 10px;
56.        border-radius: 25px;
57.        cursor: pointer;
58.        background: radial-gradient(#4d4d4d 50%, #ffffff 60%, #4d4d4d 10%);
59.    }
60. 
61.    .circleBt:hover {
62.        background: radial-gradient(#A5A5A5 50%, #ffffff 60%, #A5A5A5 10%);
63.    }
64. 
65.    .circleBt > div {
66.        width: 24px;
67.        height: 5px;
68.        background-color: #ffffff;
69.        margin-top: 5px;
70.        margin-left: 13px;
71.    }
72.</style>




  3-2. Javascript 부분

view source
print?
01.<script>
02.    function showLeftMenu(){
03.        var circleBtObj = document.getElementById('circleBt');
04.        var leftMenuObj = document.getElementById('hideMenuBodyId');
05.        circleBtObj.style['display'] = "none";
06.        leftMenuObj.style['transform'] = "translate(0px, 0px)";
07.         
08.        leftMenuObj.style['msTransform'] = "translate(0px, 0px)";
09.        leftMenuObj.style['mozTransform'] = "translate(0px, 0px)";
10.        leftMenuObj.style['webkitTransform'] = "translate(0px, 0px)";
11.        leftMenuObj.style['oTransform'] = "translate(0px, 0px)";
12.    }
13. 
14.    function closeLeftMenu() {
15.        var circleBtObj = document.getElementById('circleBt');
16.        var leftMenuObj = document.getElementById('hideMenuBodyId');
17. 
18.        circleBtObj.style['display'] = "block";
19.        leftMenuObj.removeAttribute("style");
20.    }
21.</script>




  3-3. HTML 부분

view source
print?
01.<div class="VirtualView">
02.    <div class="hideMenuBody" id="hideMenuBodyId">
03.        <div>Menu 1</div>
04.        <div>Menu 2</div>
05.        <div>Menu 3</div>
06.        <div>Menu 4</div>
07.        <div>Menu 5</div>
08.        <div onclick="closeLeftMenu(); return false;">Close</div>
09.    </div>
10. 
11.    <div class="circleBt" id="circleBt" onclick="showLeftMenu(this); return false;">
12.        <div style="margin-top: 13px;"></div>
13.        <div></div>
14.        <div></div>
15.    </div>
16.</div>





저작자표시

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

mobile web 작업시 safari 브라우저에서 투터치 줌 막기  (0) 2020.09.25
( CSS ) iconfonts 관련 사이트  (0) 2016.09.02
( CSS ) 심플한 드랍다운 메뉴 만들기  (10) 2016.05.10
( CSS ) 아주심플하면서 이쁜 메뉴 만들기!  (0) 2016.05.10
( Web ) 스케쥴 관리 웹 만들기  (0) 2016.05.02
,

티스토리툴바