아임웹 원페이지 메뉴 링크 PC와 모바일 따로 설정하기

아임웹에서 원페이지로 제작해서 각 섹션ID 로 메뉴에서 링크를 걸면, 
해당 섹션ID로 스크롤 이동을 하게 되는데,

원페이지 메뉴 링크 설정 방법

PC 섹션을 그대로 모바일과 같이 사용하게 되면 문제는 없지만,
해당 PC 섹션을 모바일 전용 섹션으로 생성하게 되면, 링크(앵커) 이동이 안된다.

이럴 때는, 모바일 디자인에서 '코드'를 삽입해서 script 로 메뉴 링크값을 변경하면 된다.

모바일 화면 '코드' 삽입

'코드'에 삽입할 Script 내용

<script>
//모바일 메뉴 노출 부분 selector
  $("#mobile_slide_menu .depth-01 a").each(function(){
  
  		//각 메뉴의 링크값 추출
		var url = $(this).data("url");
        
        //페이지번호 '16'이면 모바일 섹션 ID(#s202312158f36158b41510)로 href 로 수정
		if (url == '16') {
		  	$(this).attr('href','/#s202312158f36158b41510');
		}
        
        //페이지번호 '18'이면 모바일 섹션 ID(#s20231222390c52ac664f4)로 href 로 수정
		if (url == '18') {
		  	$(this).attr('href','/#s20231222390c52ac664f4');
		}
  });
</script>

 

위 스크립트의 구조는 아래 html 코드에서 확인이 가능하다.

모바일 메뉴단 selector 추출 방법

출처 : 나