그누보드 - 모바일 웹에 딱 어울리는 메뉴 공유합니닷.. [1차 수정]

모바일 웹에 딱 어울리는 메뉴 공유합니닷.. [1차 수정] 정보

모바일 웹에 딱 어울리는 메뉴 공유합니닷.. [1차 수정]

첨부파일

mmenu.zip (12.5K) 1438회 다운로드 2015-01-15 10:11:22

본문

메뉴 아이콘 및 메뉴 안에 디자인은 css 에서 직접 수정하셔야됩니다..
전 할줄몰라서 포기..!


<link rel="stylesheet" href="jquery.mmenu.all.css" />
<script type="text/javascript" src="jquery.mmenu.min.all.js"></script>
<script type="text/javascript">
$(function() {
  $('nav#menu').mmenu();
});
</script>

/*메뉴 아이콘 버튼 아무곳에다가 넣으세요.*/
<div id="page"><div class="header"><a href="#menu"></a></div></div>

/*  메뉴 부분 하단에 넣는게 좋겠죠..?? 무한 서브 지원합니다. */
  <nav id="menu">
    <ul>
      <li><a href="#notice">알림방</a>
        <ul>
          <li><a href="#notice">준비중 입니다.</a></li>
          <li><a href="#notice">준비중 입니다.</a></li>
          <li><a href="#notice">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#story">이야기관</a>
        <ul>
          <li><a href="#story/2">준비중 입니다.</a></li>
          <li><a href="#story/2">준비중 입니다.</a></li>
          <li><a href="#story/2">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#buy">구매 & 분양</a>
        <ul>
          <li><a href="#buy">준비중 입니다.</a></li>
          <li><a href="#buy">준비중 입니다.</a></li>
          <li><a href="#buy">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#photo">포토 갤러리</a>
       <ul>
          <li><a href="#photo">준비중 입니다.</a></li>
          <li><a href="#photo">준비중 입니다.</a></li>
          <li><a href="#photo">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#data">자료실</a>
        <ul>
          <li><a href="#data">준비중 입니다.</a></li>
          <li><a href="#data">준비중 입니다.</a></li>
          <li><a href="#data">준비중 입니다.</a></li>
        </ul>
      </li>
    </ul>
  </nav>

댓글 전체

뒷집돌쇠 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

15.01.15 10:21:59

감사합니다. ^^
적용이 매우 쉬워서 좋으네요 ㅎㅎ

익명닉네임 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

15.01.15 10:25:00

히힛.. 첫 댓글 감사합니다.~~ 앞으로 좋은 플러그인 찾으면 공유할수잇도록 해볼께요..
거기에다가 추천까지..!! 감사합니닷..!

익명닉네임 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

15.01.15 11:08:03

제가 모르고 뭔가 중요한거 하나를 추가안했습니다. 그래서 방금 수정했어요 ..!!

MVP솔루션 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

15.01.16 12:26:09

지금 찾고 있었는데 이런게 ㅎㅎㅎ 감사합니다.

붉은바람 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

15.01.17 00:43:59

좋은정보 감사합니다.^^

초보엄마 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

15.01.19 11:26:24

제가 초보라서 그런데...
mmenu 폴더를 어디다 올리는거예요?? 올려주신 소스는 어디다 적용하는건가요?

익명닉네임 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

15.01.19 12:42:15

mmenu 는 임의로 만든 폴더며 안에 보면 다있습니다. ^^ 소스는 head 헤더부분에다가 넣구요.
링크 부분 아이콘 은 직접 구하셔야 됩니다. ^^

이제는난 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

15.01.21 11:36:42

아.. 이상하네요 .. 아무리 적용해도 적용이 안되네요..
그냥 위에 소스 그대로 한 폴더에 집어넣고 위의 소스만 그대로 따다가 붙여놓으면 일단
작동은 해야할거 같은데. ㅜㅜ . 제가 뭘 잘못하고 있는걸가요 ㅜㅜ'
너무 적용해보고 싶은데..

초보를 위해서 예제파일까지 같이 한번 부탁드려도 될까요..ㅜㅜ
기본적으로 위에 소스 그대로 같은 폴더에 놓고 위에 내용 php로 만들어서 올리면 되는게 아닌가요 ㅜㅜ

익명닉네임 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

15.01.21 12:26:47

다 작동되는거구요 제일 중요한 css 는 이미지 쪽에 문제가있어서 제가 제시를 안했습니다.

<a href="#menu">메뉴 출력할 이미지 또는 글씨</a> 넣고 테스트를 해보시는게 좋겠습니다. ^^

이제는난 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

15.01.21 18:01:57

희안하네요.. 그대로 따로 빼서 테스트도 해보고 집어넣어서도 해보고..
일단 이러나저러나 그대로 복사해서 소스 넣고 구동하면 되야할거 같은데..
제가 바보인거 같긴한데.. ㅜㅜ 다른분들은 쉽게 쉽게 되시나보네요.
변수값이 뭐 딱히 문제 있는거 같지는 않은데..

익명닉네임 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

15.01.22 09:13:39


<!DOCTYPE>
<html lang="ko">
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>모바일웹 레이아웃 2015</title>
<link rel="stylesheet" href="jquery.mmenu.all.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jquery.mmenu.min.all.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
  $('nav#menu').mmenu();
});
</script>

<div id="page"><div class="header"><a href="#menu">메뉴</a></div></div>

  <nav id="menu">
    <ul>
      <li><a href="#notice">알림방</a>
        <ul>
          <li><a href="#notice">준비중 입니다.</a></li>
          <li><a href="#notice">준비중 입니다.</a></li>
          <li><a href="#notice">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#story">이야기관</a>
        <ul>
          <li><a href="#story/2">준비중 입니다.</a></li>
          <li><a href="#story/2">준비중 입니다.</a></li>
          <li><a href="#story/2">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#buy">구매 & 분양</a>
        <ul>
          <li><a href="#buy">준비중 입니다.</a></li>
          <li><a href="#buy">준비중 입니다.</a></li>
          <li><a href="#buy">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#photo">포토 갤러리</a>
       <ul>
          <li><a href="#photo">준비중 입니다.</a></li>
          <li><a href="#photo">준비중 입니다.</a></li>
          <li><a href="#photo">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#data">자료실</a>
        <ul>
          <li><a href="#data">준비중 입니다.</a></li>
          <li><a href="#data">준비중 입니다.</a></li>
          <li><a href="#data">준비중 입니다.</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

[code]
<!DOCTYPE>
<html lang="ko">
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>모바일웹 레이아웃 2015</title>
<link rel="stylesheet" href="jquery.mmenu.all.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jquery.mmenu.min.all.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
  $('nav#menu').mmenu();
});
</script>

<nav id="menu">
    <ul>
      <li><a href="#notice">알림방</a>
        <ul>
          <li><a href="#notice">준비중 입니다.</a></li>
          <li><a href="#notice">준비중 입니다.</a></li>
          <li><a href="#notice">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#story">이야기관</a>
        <ul>
          <li><a href="#story/2">준비중 입니다.</a></li>
          <li><a href="#story/2">준비중 입니다.</a></li>
          <li><a href="#story/2">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#buy">구매 & 분양</a>
        <ul>
          <li><a href="#buy">준비중 입니다.</a></li>
          <li><a href="#buy">준비중 입니다.</a></li>
          <li><a href="#buy">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#photo">포토 갤러리</a>
       <ul>
          <li><a href="#photo">준비중 입니다.</a></li>
          <li><a href="#photo">준비중 입니다.</a></li>
          <li><a href="#photo">준비중 입니다.</a></li>
        </ul>
      </li>
      <li><a href="#data">자료실</a>
        <ul>
          <li><a href="#data">준비중 입니다.</a></li>
          <li><a href="#data">준비중 입니다.</a></li>
          <li><a href="#data">준비중 입니다.</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>
[/code]