여기까지 잘 따라오셨다면 모든 메뉴가 상단에 줄줄줄 나열되어 있어 복잡한 상태 일겁니다.^-^

 그럼 본 미션을 통해 지금 구성되어 있는 메뉴를 대메뉴/소메뉴로 나누어서 깔끔하게 출력되도록 네비게이션을 만들어 보겠습니다.

 필자는 아래와 같이 대메뉴/소메뉴로 나누었습니다. 여러분은 각자 취향에 맞게 수정하시기 바랍니다.

[대메뉴] 매니져 소개
      [소메뉴] 매니져 프로필 (추가 페이지)
      [소메뉴] 매니져 사진 (추가 페이지)

[대메뉴] 매니져 농장
      [소메뉴] 농장 소개 (추가 페이지)
      [소메뉴] 농장 연혁 (추가 페이지)

[대메뉴] 자료실
      [소메뉴] 1.일반형 (게시판)
      [소메뉴] 2.앨범형 (게시판)

 [대메뉴] 커뮤니티
      [소메뉴] 3.웹진형 (게시판)
      [소메뉴] 4.블러그형  (게시판)
      [소메뉴] 5.달력형 (게시판)

      [소메뉴] 예약접수 (나만의 등록폼)

      [소메뉴] 채팅방 (추가 페이지)

 

 

 관리자모드에서 [디자인관리 》 전문가 환경설정 》 네비게이션 마법사]으로 이동 후 [대메뉴(최상위)생성] 버튼을 클릭 후 아래 그림과 같이 입력합니다.

 

위 화면에서 텍스트분류명에 "매니져소개"라고 입력하고 링크정보에서 "page1::매니저 농장"을 선택했습니다.

이유는 대메뉴를 클릭시 소메뉴의 첫번째로 이동되도록 하는데 있습니다.

즉 "매니져 농장"을 클릭하면 "농장 소개"로 이동되도록 설정,

"자료실"을 클릭하면 "일반형 게시판"으로 이동되도록 설정,

"커뮤니티"를 클릭하면 "웹진형 게시판"으로 이동 되도록 설정하시면 됩니다.

 

 

  위와 같이 진행 후 네비게이션 마법사를 다시 클릭하여 아래와 같은 화면이 나타나면 성공입니다.

 

 

 

  이제 소메뉴를 만들어 보도록 합시다.

[매니져 소개] 옆에 있는 [하위메뉴생성]버튼을 클릭 하신 후 생성 하시면 됩니다. 생성방법은 대메뉴 만드는 방법과 동일합니다.

소메뉴를 생성 후 아래와 같은 화면이 나타나면 성공입니다. ^-^

 

 위 화면에서 URL 주소가 바르게 들어가 있는지 한번 확인 바랍니다.

 

 

네비게이션 마법사를 통해 메뉴구조를 만들었는데 이걸 실제 홈페이지에 적용시켜 보도록 하겠습니다.

[디자인관리 》 고급 디자인 관리 》 그룹디자인 관리]으로 이동 후 [프로그램 마법사 생성]버튼을 클릭하세요.

프로그램 종류에서 "네비게이션 마법사"를 선택 하신 후 "상단메뉴바"를 선택 하시기 바랍니다.

아래 그림과 같이 설정 후 저장 하시기 바랍니다.

 

 

 위 프로그램 마법사를 통해 {GROUP_navi} 라는 그룹을 생성 하였습니다.

이 그룹코드를 [디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 상단디자인에 넣어보도록 하겠습니다.

 

※ 적당한 위치에 {GROUP_navi} 를 삽입 하세요.

 

 실제 어떻게 출력되지는 한번 확인 해보세요

대메뉴에 마우스 커서를 올리면 밑으로 서브메뉴가 나타 나죠?

 

 

 

네비게이션이 정상적으로 작동은 되는데 기존 메뉴와 섞여 있어서 보이지 않습니다.

보기 좋게 수정해보도록 하겠습니다. ^^

  [디자인관리 >  고급 디자인 관리 > 스킨 관리]에서 기존  소스를 테이블 구조로 조금 변경 하였습니다.

여러분도 아래 그림과 같이 소스를 수정해보세요.^-^

 

 

※ HTML 소스 <!-- 상단 디자인 출력 부분 --> <table width="960" height=80 border="1" align=center>   <tr>     <td align=center width=200>      <a href="/shop_main/main_body.htm">웹디모 초간단 홈페이지</a>     </td>     <td align=center>      {GROUP_navi}     </td>   </tr> </table>   <!-- BODY 본문 디자인 출력 부분 --> <table width="960" border="1" align=center> <tr> <td width=200 valign=top>  <table width="200" border="1">    <tr>   <td>    <br>    <br>     로그인 박스<br>    <br>     <br>     배너1 <br>     배너2 <br>    배너3 <br>    배너4 <br>   </td>    </tr>  </table> </td> <Td  valign=top>   {BODY_CONTENT} </td> </tr> </table> <!-- 하단 디자인 출력 부분 --> <table width="960" border="1" align=center>   <tr>     <td width="200">       <p><br>        <a href='/shop_main/main_body.htm'> 하단 로고</a><br>       </p>       </td>     <td> <br>       홈페이지명 : 초급미션홈피<br>       운영자:웹돌이<br>       이메일주소 : aaaa@naver.com<br>       <br> 총 누적 접속수 {COUNT_TOTAL} / 이달 접속수 {COUNT_MONTH} / 오늘 접속수 {COUNT_TODAY} <br> 총 게시물 수 {BBS_TOTAL_CNT}, 새글 수 {BBS_NEW_CNT}<br> 총 회원 수 {MEM_TOTAL_CNT}, 신규 회원 수 {MEM_NEW_CNT}<br>   </td>   </tr> </table>

 

※ 본 솔루션은 HTML 및 DIV 표준 코딩 모두 적용 가능 합니다. 여러분의 편의에 맞게 코딩 하시기 바랍니다.

 
다시 홈페이지로 접속 해서 수정결과를 확인해봅시다.^-^  아~주 심플하고 깔끔한 메뉴가 만들어졌습니다.

 

 

 

헌데 메뉴가 텍스트로만 되어 있어서 좀 심심하네요.. 이미지 버튼으로 바꿔봅시다. ^-^

본 게시판에 첨부되어 상단 우측에 있는 [버튼.zip]를 다운로드 받아줍니다.

매니져소개, 매니져 농장, 자료실, 커뮤니티 버튼을 만드신 후 [디자인관리 》 전문가 환경설정 》 네비게이션 마법사] 에서 해당 대메뉴의 [메뉴수정]버튼을 클릭합니다.

아래 그림과 같이 이미지 버튼을 첨부합니다.

 

 

수고 하셨습니다.

 

완성 화면 : http://uhkr09b.aramschool.co.kr

위 화면과 같이 작동 된다면 다음 미션으로 고고~~~~

 

위 미션 수행 후 덧글에 소감 한마디 남겨주세요~~~~ ^0^