{@

$program_set[start_code] = "00000000"; // 네비게이션 코드

$nav = program_load(NAVI_CATEGORY_MENU);

@}



<load target="/img_up/shop_pds/wdev/design/css/pm_nav_h2.css">

<load target="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

<load target="/img_up/shop_pds/wdev/design/js/pm_nav_h2.js">



<div class="pm-nav_h2">

	<!-- 1 Depth -->

	<ul class="dep1">

		<!--@foreach($nav[sub_menu] as $k=>$v)-->

			<li cond="$v[visible]" class="on"|cond="$k==1">

				<a href="javascript:content_link_chk('{$v[link_url]}', '선택한 연결주소는 안전하지 않을 수 있습니다.\n\n연결 하시겠습니까?')" targetx="{$v[link_target]}"|cond="$v[link_target]">

					<!--@if($v[bt1_img_url])-->

						<!--@if($v[bt2_img_url])-->

							<img src="{$v[bt1_img_url]}" onmouseover="this.src='{$v[bt2_img_url]}'" onmouseout="this.src='{$v[bt1_img_url]}'" alt="{$v[subject]}" />

						<!--@else-->

							<img src="{$v[bt1_img_url]}" alt="{$v[subject]}"/>

						<!--@end-->

					<!--@else-->

						{$v[subject]}

					<!--@end-->

				</a>

				<div cond="$v[sub_menu]">

					<!-- 2 Depth -->

					<ul class="dep2">

						<!--@foreach($v[sub_menu] as $k2=>$v2)-->

							<li cond="$v2[visible]">

								<a href="javascript:content_link_chk('{$v2[link_url]}', '선택한 연결주소는 안전하지 않을 수 있습니다.\n\n연결 하시겠습니까?')" targetx="{$v2[link_target]}"|cond="$v2[link_target]">

									<!--@if($v2[bt1_img_url])-->

										<!--@if($v2[bt2_img_url])-->

											<img src="{$v2[bt1_img_url]}" onmouseover="this.src='{$v2[bt2_img_url]}'" onmouseout="this.src='{$v2[bt1_img_url]}'" alt="{$v2[subject]}" />

										<!--@else-->

											<img src="{$v2[bt1_img_url]}" alt="{$v2[subject]}"/>

										<!--@end-->

									<!--@else-->

										{$v2[subject]}

									<!--@end-->

								</a>

							</li>

						<!--@end-->

					</ul>

					<!-- // 2 Depth -->

				</div>

			</li>

		<!--@end-->

	</ul>

	<!-- // 1 Depth -->

</div>



<p>

	<button type="button" role="navOff">네비게이션 기능끄기</button>

	<button type="button" role="navOn">네비게이션 기능켜기</button>

</p>



<script>

var navigationHorizon = new NavigationHorizon($('div.pm-nav_h2'));



$('button[role=navOff]').on('click', function(){

	navigationHorizon.off();

});

$('button[role=navOn]').on('click', function(){

	navigationHorizon.on();

});

</script>

네비게이션 자바스크립트 이벤트 기능을 on/off 메서드를 제공한다.
위의 소스는 버튼을 눌러 롤오버 기능을 켰다 끌 수 있다. 이 기능을 제공한 이유는 반응형 사이트를 작업할 때 모바일 사이즈에서는 자바스크립트 이벤트가 필요없기 때문에 사이즈에 따라서 기능을 껐다켤수 있도록 기능을 제공했다.

서브페이지 활성화 클래스를 넣으려면 li엘리먼트에서 "on"클래스를 넣으면 됩니다.
<li cond="$v[visible]" class="on">


- Demo page
http://wdev.anybuild.com/shop_add_page/index.htm?page_code=pm_nav_h2

- Source link
http://wdev.anybuild.com/img_up/shop_pds/wdev/design/css/pm_nav_h2.css
http://wdev.anybuild.com/img_up/shop_pds/wdev/design/js/pm_nav_h2.js