2026, 새로운 도약을 시작합니다.
SIR
목록으로
이전글 다음글

퀵메뉴가 현재위치가 가로창크기를 줄이면 페이지에 고정 되어 있지 않고 창크기에 따라 움직입니다. 채택완료

아아미꼬
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전 조회 8,743
답변 3
목록
퀵메뉴가 창크기를 줄이면 가려서 안보여야 되고 상페라인옆에 딱 고정해야 하는데
제가 지금 포지션을
<div style='position: relative;'>
<div id='quick' style='position:absolute; z-index: 2; top: 0; left: 50px; margin: 0px; width: 100px; ' >
퀵메뉴 <br />
  레이어
 </div>
</div>
이렇게 줘도 ...
혹은 테이블안에
<table width="1000"  height="0" border="0" cellspacing="0" cellpadding="0">
  <tr align="left">
    <td width="1000"><div id='quick' style='position: relative; z-index: 2; top: 0; left: 50px; margin: 0px; width: 100px; height: auto; height: 1px;' >
퀵메뉴 <br />
  레이어
 </div>
</td>
  </tr>
</table>

줘도 지금 어떻게 줘도 고정되지가 않고 페이지 가로스크롤 바에 고정되어 움직여집니다.
당최 계속해서 구글에 퀵메뉴 소스를 계속 이것저것 응용하고 있는데 당최 답이 나오지 않습니다.
가르침 부탁 드립니다. ㅠ.ㅠ
#그누보드4

답변 3개

채택된 답변
+20 포인트
d

Copy 

var resize_quick = {
	action : function() {
		var max_width = 1180;
 var center_img_width = 1003;
		$("#quick").css({"left" : ($("body").width() - center_img_width) / 2 - 50 });
	}
}



$(document).ready(function(e) {
	resize_quick.action();
	$(window).resize(function(e) {
		resize_quick.action();
	});
});

하지만, 이 방법은 원활한 해결 방법은 아닙니다.

레이아웃을 다시 잡고, 컨텐츠 영역을 position:relative; 로 잡아 중심을 세우고, 

position:absolute 로 상대적인 위치를 잡는 것이 가장 좋은 방법입니다만, 다시 코딩하시는 것에 대한 부담으로

위와 같이 javascript 로 처리하는 방법을 제안한 것이므로 시간이 되신다면 

다시 코딩하시는 것이 좋을 것 같습니다 :-)
로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

�
됩니다. 잘작동합니다.^^. 감사합니다.

헌데 제가 궁금한게...
<div style="position:relative;">
<div style="position:absolute;">
퀵메뉴바 내용
</div>
</div>

이렇게 div로 포지션을 쌍으로 잡아주면
어떤 위치에도 고정 되는게 맞는데...
우쨰보면 딱 위치가 고정된것 처럼 보이나 창사이즈를 조절하면 거기에 따라 움직였거든요..
원래 이소스가 요런 문제가 있는건가요? 아니면
<table><tr><td>여기에다가 div 코드를 적고 테이블을 닫아 주어야 하나요?
흐음.. 우엣든 정말 감사합니다^^
t
아미꼬님. http://jsfiddle.net/fPRds/ 를 간단하게 짜 보았습니다.

한번 보시면, 무슨 이야기인지 쉽게 아실 수 있으리라 여겨집니다 :-)

고맙습니다~

참고로, 부모 엘리먼트의 height 값 때문에, 강제로 불필요한 div 을 써서, clear 해 주었는데

이건 그냥 대충 짠 거구요~ :after 를 사용하여 float 를 감싼 부모가 자식 height 를 쓰는 방법이

가장 좋습니다 :-)

댓글을 작성하려면 로그인이 필요합니다.

d
아.. 아미꼬님은 아예 한 위치에 고정되는 것을 원하시는군요.

저는 특정 사이즈 이하일 경우에만 고정된 것으로 파악했었습니다.

잠시만 기다려 주시면, 쉬운 해결 방법을 가지고 오겠습니다 :-) 
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

d
코드 순서에 문제가 있어 수정했네요 ^^

여러가지 방법이 있을 수 있겠네요.

우선, css 나 기타 등등을 수정하지 않고 해결할 수 있는 방법은 아래 방법이 있겠네요^^

아래에서 max_width 값을 수정해 주시면 될 것 같습니다.

애래 코드만, 붙여넣으면 원하시는 결과를 얻으실 수 있을 것 같습니다.

Copy 




var resize_quick = {
	action : function() {
		var max_width = 1180;
                var center_img_width = 1003;
		if( $("body").width()
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
소스를 그대로 붙여 넣었습니다. 헌데 어머나 세상에.. 저주소로 가보시면 창크기 최소폭은 고정되있는데 창 가로크기가 일정크기를 넘어서면 또 크기에 따라 움직이고 있습니다. .ㅜ.ㅜ. 원래 저소라면 제대로 됫겠지만 제가 또 뭘 잘못 준건가 심히 고민이 되지 않을 수가 없습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고