안녕하세요 우기입니다.
며칠만에 글을 쓰게 되네요. 요즘 반응형 웹페이지 작업하고 있어 모바일 해상도 일 경우에는 상단 메뉴가 토글버튼이 보이는걸 만들고 있는데생각보다 여러가지가 있더라구요 그중에 제가 찾고 있는걸 발견하여 공유 해드릴까 합니다.
모바일 토글 드롭다운 버튼 및 메뉴 버튼
이런식으로 나오게 되어있는데요. 버튼을 클릭하면 드롭다운 되면서 보이게 됩니다.
참고로 홈페이지 붙이실 때는 커스터 마이징이 필요 하실거에요
출처 입니다. 간혹 모바일 웹 홈페이지를 만드시는 분들은 유용하게 쓰실수 있을겁니다.
드롭다운 버튼이 모바일 버전이 없어서 찾기 힘들더라구요.
http://www.jqueryscript.net/menu/Minimal-Mobile-First-Dropdown-Menu-with-jQuery-CSS3.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 |
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>jQuery Mobile Menu Plugin Demo</title>
</head>
<script type="text/javascript">
jQuery(document).ready(function($) {
// hide the menu when the page load
$("#navigation-list").hide();
// when .menuBtn is clicked, do this
$(".menuBtn").click(function() {
// open the menu with slide effect
$("#navigation-list").slideToggle(300);
});
});
</script>
<body>
<div class="wrapper">
<header>
<span class="menuBtn"><img src="icon.svg" alt="Menu icon"></span>
<nav id="navigation-list">
<ul>
<li><a href="#item1">우기블로그</a></li>
<li><a href="#item2">공감 눌러주세요</a></li>
<li><a href="#item3">감사합니다</a></li>
<li><a href="#item4">choman.tistory.com</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html> |
cs |
위에는 제가 수정한 버전인데 참고해서 쓰시면 감사하겠습니다.
광고 등 수정해서 편하게 쓰실 수 있으실겁니다.
모바일 토글 드롭다운 버튼,메뉴 버튼 많은 이용부탁드려용
'IT·인터넷' 카테고리의 다른 글
| 최적화블로그 되어보자! (5) | 2016.03.08 |
|---|---|
| 티스토리 애드센스 완전히 승인 완료! (6) | 2016.02.25 |
| JSON 값 맵 형태로 바꾸기 (0) | 2015.07.03 |
| 티스토리 네이버 검색유입 된다. (0) | 2015.07.01 |
| jquery 엔터키 이벤트(enterEvent Key) 처리 하는법 (2) | 2015.06.30 |
댓글