반응형 웹사이트에 대하여 문의드립니다
관련링크
본문
1. 이미지 말고 배경 이미지를 교체하는 식으로 롤오버 버튼을 만들려고 하는데
제이쿼리에서 어떻게 코딩해야 하는지요? 구글에서 찾아서 해봤는데 계속 실패합니다. ㅠ.ㅠ
2. 메뉴에 마우스를 올리면 하위 메뉴가 뜨는데, 하위 메뉴의 목록이 하나밖에 안뜹니다. 배경이미지도 이상하게 지정되어 있고.. 어떻게 하면 모든 목록을 뜨게 할 수 있나요?
-스샷 참고-
답변 4
제가 올린 코드는 단순 배경 이미지 변경이기 때문에..
해당 코드와 말씀하신 문제는 영향이 없을것으로 생각됩니다
다른부분을 확인해보셔야 할 것 같습니다..
자세히는 못봤지만 손볼 부분이 꽤 많아 보였는데요..
굳이 직접 개발하셔야 되는부분이 아니라면...
구글에 Responsive Menu jquery 검색해보시면 이식해볼만한 메뉴가 많이 있으실겁니다..
1번의 경우..
http://red2.net/rwd2/images/mainmenu/main.png
같이 background-image를 지정한 <li> 태그에 id를 잡아주고 Jquery로 설정해주시면 됩니다..
지금 <li>로 되어있는부분을 <li id = "menu_1"> 이런 형태로요...
$('#menu_1').on({
mouseenter: function(){
$(this).css('background-image', 'url('/rwd2/images/mainmenu/main_on.png')');
},
mouseleave: function(){
$(this).css('background-image', 'url('/rwd2/images/mainmenu/main_off.png')');
}
});
간단하게 CSS Hover를 이용해서 하는방법도 있습니다.
이미지도 background-image를 지정하지 않고 CSS 클래스만 변경하는 방법도 있구요..
행운을 빕니다.
답변 감사합니다. 그런데 죄송하지만 위의 코드를 넣으면 창의 가로 크기를 최소로 줄여서 스마트폰 페이지가 됬을때는 오른쪽 상단의 =메뉴를 클릭해도 작동하지 않네요.
성공했는데 깜빡거림은 여전하네요 -_-;;
$('#main-rollover').hover(function(){
$('#main-rollover').css("background-image","url(images/mainmenu/main_over.png)");
},function(){
$('#main-rollover').css("background-image","url(images/mainmenu/main.png)");
})
자바스크립트에 아래 코드를 추가하니 깜박임이 없어졌네요.
출처: stackoverflow
pic = new Image();
pic2 = new Image();
pic3 = new Image();
pic4 = new Image();
pic5 = new Image();
pic6 = new Image();
pic.src="images/mainmenu/main_over.png";
pic2.src="images/mainmenu/game_over.png";
pic3.src="images/mainmenu/content_over.png";
pic4.src="images/mainmenu/comm_over.png";
pic5.src="images/mainmenu/down_over.png";
pic6.src="images/mainmenu/site_over.png";
