반응형 웹사이트에 대하여 문의드립니다 채택완료
http://red2.net/rwd2/" target="_self">http://red2.net/rwd2/
1. 이미지 말고 배경 이미지를 교체하는 식으로 롤오버 버튼을 만들려고 하는데
제이쿼리에서 어떻게 코딩해야 하는지요? 구글에서 찾아서 해봤는데 계속 실패합니다. ㅠ.ㅠ
2. 메뉴에 마우스를 올리면 하위 메뉴가 뜨는데, 하위 메뉴의 목록이 하나밖에 안뜹니다. 배경이미지도 이상하게 지정되어 있고.. 어떻게 하면 모든 목록을 뜨게 할 수 있나요?
-스샷 참고-
답변 4개
제가 올린 코드는 단순 배경 이미지 변경이기 때문에..
해당 코드와 말씀하신 문제는 영향이 없을것으로 생각됩니다
다른부분을 확인해보셔야 할 것 같습니다..
자세히는 못봤지만 손볼 부분이 꽤 많아 보였는데요..
굳이 직접 개발하셔야 되는부분이 아니라면...
구글에 Responsive Menu jquery 검색해보시면 이식해볼만한 메뉴가 많이 있으실겁니다..
댓글을 작성하려면 로그인이 필요합니다.
자바스크립트에 아래 코드를 추가하니 깜박임이 없어졌네요.
출처: http://stackoverflow.com/questions/1373142/preloading-css-background-images" target="_self">stackoverflow
</p><p><span class="Apple-tab-span" style="white-space: pre;"> </span>pic = new Image();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pic2 = new Image();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pic3 = new Image();</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pic4 = new Image();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pic5 = new Image();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pic6 = new Image();</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pic.src="images/mainmenu/main_over.png";</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pic2.src="images/mainmenu/game_over.png";</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pic3.src="images/mainmenu/content_over.png";</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pic4.src="images/mainmenu/comm_over.png";</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pic5.src="images/mainmenu/down_over.png";</p><p><span class="Apple-tab-span" style="white-space: pre;"> </span>pic6.src="images/mainmenu/site_over.png"; </p><p>댓글을 작성하려면 로그인이 필요합니다.
성공했는데 깜빡거림은 여전하네요 -_-;;
</p><p> $('#main-rollover').hover(function(){</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>$('#main-rollover').css("background-image","url(images/mainmenu/main_over.png)");</p><p> },function(){</p><p> $('#main-rollover').css("background-image","url(images/mainmenu/main.png)");</p><p> }) </p><p>댓글을 작성하려면 로그인이 필요합니다.
1번의 경우..
http://red2.net/rwd2/images/mainmenu/main.png">http://red2.net/rwd2/images/mainmenu/main.png
같이 background-image를 지정한
지금
</p><p> <span style="line-height: 1.5;">$('#menu_1').on({</span></p><p><span class="Apple-tab-span" style="white-space: pre;"> </span>mouseenter: function(){</p><p><span class="pln"> $</span><span class="pun">(this</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">'background-image'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'url('<a href="<a href="http://rwd2/images/mainmenu/main.png" target="_blank" rel="noopener noreferrer">http://rwd2/images/mainmenu/main.png</a>">/rwd2/images/mainmenu/main_on.png</a></span><span class="str">')'</span><span class="pun">);</span></p><p><span class="Apple-tab-span" style="white-space: pre;"> </span>},</p><p><span class="Apple-tab-span" style="white-space: pre;"> </span>mouseleave: function(){</p><p><span class="Apple-tab-span" style="white-space: pre;"><span class="pln"> $</span><span class="pun">(this</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">'background-image'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'url('<a href="<a href="http://rwd2/images/mainmenu/main.png" target="_blank" rel="noopener noreferrer">http://rwd2/images/mainmenu/main.png</a>">/rwd2/images/mainmenu/main_off.png</a></span><span class="str">')'</span><span class="pun">);</span></span></p><p><span class="Apple-tab-span" style="white-space: pre;"> </span>}</p><p>});
간단하게 CSS Hover를 이용해서 하는방법도 있습니다.
이미지도 background-image를 지정하지 않고 CSS 클래스만 변경하는 방법도 있구요..
행운을 빕니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인