G사의 쇼핑몰 제작 솔루션을 이용해서 쇼핑몰 구축중인데 웹과 모바일은 달라서 웹부터 진행하고 있다.
스킨따라 다르겠지만 사용한 스킨은 메뉴 선택해서 들어가면 선택한 메뉴에 대한 선택스타일이 지정되어있지 않다.
마우스 오버할때만 표시되고 그 밖에는 아무런 표시가 안되고, 대신 그 하단에 (메뉴 아래 본문 상단) 제목으로 들어가져있다.
디자인팀에서는 이 부분은 제거 하고 메뉴에 표시되도록 원해서 코드 및 관리자 페이지를 살펴보았으나 관련된 설정하는 부분을 찾을 수 없었다.
그래서 코드를 더 살펴보았더니 body태그 부분에 페이지 따라 적용된 클래스가 달라서 이것을 이용해서 메뉴마다의 페이지는 위 클래스로 구분자로 기준으로 해서 제이쿼리 함수에 추가로 함수 생성해서 호출하였다.
한동안 웹 개발 들어가서 관련된 메모를 이곳에 적어볼까 해서 포스팅해봅니다.
(이렇게 메모 해두면 나중에 관련 기능 구현시 도움이 될것 같아서..)
큰 팁은 아니고, 소소하지만 혹시나 저와 같은 궁금증이 있다면 참고해보세요.
예를들어 본문 body태그에 다음과 같은 코드가 있을경우 (사이트에 메뉴가 두개 있다고 가정시, 메뉴#1을 누르면 메뉴#1부분의 텍스트만 색이 바뀌도록 한다. 마찬가지로 메뉴#2 클릭하여 들어갈때도 메뉴 두개 중에 메뉴#2만 색이 바뀌도록 한다. * 색이 바뀌는것은 현재 너는 그 메뉴를 보고 있어 라는 의미전달)
- 메뉴 #1 들어가면 나오는 페이지 본문에 있는 태그
<body class=“body-menu1 body-pages”>
- 메뉴#2 선택해서 들어가면 나오는 페이지 본문 가운데
<body class=“body-menu2 body-pages”>
아래처럼 해당 ui.js페이지에서 함수 생성해서 다음과 같이 호출하였다.
function MenuActive(){
if($('body').hasClass(“body-menu1")) { /* menu#1 */
$(‘해당 메뉴#1 css 위치').addClass(‘메뉴에 색을 변화시킬 css 클래스');
}
else if($('body').hasClass("body-menu2")) { /* menu#2 */
$(‘해당 메뉴#2 css 위치').addClass('메뉴에 색을 변화시킬 css 클래스');
}
}
// 함수 호출
$(document).ready(function() {
MenuActive();
});
앞으로도 계속 메모할것이 생기면 이 카테고리에 적어봐야겠다.
댓글