그냥 개발자 블로그

모바일웹에서 숨김메뉴 구현 제이쿼리(jquery) 플러그인 본문

소식/플러그인소식

모바일웹에서 숨김메뉴 구현 제이쿼리(jquery) 플러그인

마음이파파 2015. 9. 21. 20:02

요즘 홈페이지 개편한다고 뚝딱거리고 있어서


제이쿼리(jquery) 플러그인 업데이트가 잘 안되고 있었네요.

moon_and_james-29 






오늘 소개할 플러그인은


네이버 블로그 어플을 이용해 보셨으면 알만한 기능인데요.


사이트 최상단에 위치한 작은 버튼을 클릭해서 


위에 숨겨진 영역을 불러오는 그런 기능이죠.


이해를 돕기위해서 제작된 제이쿼리(jquery) 플러그인 예제 테스트 영상 한번 보실게요.








화질이 구려서 잘 보이지 않네요.;;


최상단에 weaher라는 버튼이 있고요 이걸 눌렀을때


아래로 펼쳐지면서 보여주고자하는 정보가 보여지죠.


이러한 형태는 위에서 언급한 네이버블로그 어플 처럼


스마트폰 환경에서 부족한 화면 사이즈에


더 많이 넣고자 할때 쓰이고 있죠.


그럼 이제 영상에 보여진 예제를 보시면서 사용법을 알아볼게요.


 




<style>

.button{text-align:center; background:#eee; height:20px; line-height:20px;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="topmenu.js"></script>


<script>

$(function(){

$('#topmenu').topmenu({

button:'.button',

dropspeed:800,

returnspeed:500

});

});

</script>


<body>

<div id="topmenu">

<div><!-- 메뉴 또는 배너 --></div>

<div class="button"><!-- 버튼명 --></div>

</div>

<div>

<!-- 본문 -->

</div>

</body> 



예제를 위해 작성된 html 이에요.


본문영역이라고 되어 있는 부분은 실제 메인화면 소스가


들어간다고 생각하시면되고요.


실제 동작 부분은 topmenu 부터 그 안쪽까지라고 보시면되요.


제이쿼리(jquery) 플러그인을 테스트 해보신다면 topmenu 부터 안쪽


태그들을 작성해주시면 되겠네요.


여기서 포인트는 topmenu와 button 이에요.





 


<style>

.button{text-align:center; background:#eee; height:20px; line-height:20px;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="topmenu.js"></script>


<script>

$(function(){

$('#topmenu').topmenu({

button:'.button',

dropspeed:800,

returnspeed:500

});

});

</script>


<body>

<div id="topmenu">

<div><!-- 메뉴 또는 배너 --></div>

<div class="button"><!-- 버튼명 --></div>

</div>

<div>

<!-- 본문 -->

</div>

</body> 




동영상에서 클릭하는 버튼 부분에


스타일을 주었어요.





 



<style>

.button{text-align:center; background:#eee; height:20px; line-height:20px;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="topmenu.js"></script>


<script>

$(function(){

$('#topmenu').topmenu({

button:'.button',

dropspeed:800,

returnspeed:500

});

});

</script>


<body>

<div id="topmenu">

<div><!-- 메뉴 또는 배너 --></div>

<div class="button"><!-- 버튼명 --></div>

</div>

<div>

<!-- 본문 -->

</div>

</body> 




워크식스 share 영역에서 topmenu.js 파일을


다운 받아주시고 연결해주세요.


연결법은 다들 아시죠?




 



<style>

.button{text-align:center; background:#eee; height:20px; line-height:20px;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="topmenu.js"></script>


<script>

$(function(){

$('#topmenu').topmenu({

button:'.button',

dropspeed:800,

returnspeed:500

});

});

</script>


<body>

<div id="topmenu">

<div><!-- 메뉴 또는 배너 --></div>

<div class="button"><!-- 버튼명 --></div>

</div>

<div>

<!-- 본문 -->

</div>

</body> 




사이트 로딩이 완료되는 시점에서

 

이와 같이 작성해주시면되요.


button : 열고 닫을 버튼의 아이디 또는 클래스

dropspped : 펼쳐질때 속도. 해당 옵션을 지우면 기본으로 0.8초의 속도 적용. 1000 = 1초 

returnspeed : 접힐때 속도. 해당 옵션을 지우면 기본으로 0.5초의 속도 적용. 1000 = 1초 

 




topmenu.js 제이쿼리(jquery) 플러그인은


홈페이지에서 


다운 받으실수 있어요.





저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

모바일용 회전메뉴 제이쿼리(jquery) 플러그인  (0) 2015.09.21
공지용 레이어팝업 간단 구현 제이쿼리(jquery) 플러그인  (0) 2015.09.21
sns공유하기 추가 제이쿼리 플러그인  (2) 2015.09.21
남은 시간 표시하는 제이쿼리 플러그인 (jquery plugin)  (0) 2015.09.21
모바일웹 접속시 자동으로 바탕화면에 바로가기 생성  (1) 2015.09.21
'소식/플러그인소식' Related Articles more