웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
ie5, 6 사용자는 자바스크립트로 구현
ie7이상, 사파리, 불여우, 오페라 등은 CSS의 position:fixed 로 구현
메뉴의 내용은 자신의 홈에 맞게 수정하세요.
오른쪽내용이 잘렸지만 마우스로 드래그 하면 모두 복사 할 수 있습니다.
홈페이지에 퀵메뉴를 다는 소스 (ie7이상, 사파리, 불여우, 오페라 등은 position:fixed 로 고정)
2011.03.14 15:09
홈페이지에 퀵메뉴를 다는 소스
ie5, 6 사용자는 자바스크립트로 구현
ie7이상, 사파리, 불여우, 오페라 등은 CSS의 position:fixed 로 구현
1. 먼저 다음과 같이 quick_menu.php 파일을 만들어 사용중인 레이아웃의 layout.html파일이 있는곳에 올립니다.
메뉴의 내용은 자신의 홈에 맞게 수정하세요.
오른쪽내용이 잘렸지만 마우스로 드래그 하면 모두 복사 할 수 있습니다.
<?
$check = eregi("MSIE 5|MSIE 6",$_SERVER["HTTP_USER_AGENT"]);
if($check) { // ie5, 6 사용자: css에서 position:fixed 지원이 안되는 관계로 자바로 구현된 퀵메뉴 제공.
echo "<div id=\"quick\" >\n";
echo "<ul class=\"fixed\">\n";
} else { // ie 7이상, 사파리, 오페라, 불여우 등등 css에서 position:fixed로 구현된 퀵메뉴 제공.
echo "<ul class=\"menu_fixed\">\n";
}
?>
<li class="subject">Menu</li>
<li><a href="/?mid=home">Home</a></li>
<li><a href="/?mid=photo">Photo</a></li>
<li><a href="/?mid=pds">Pds</a></li>
<li><a href="/?mid=notice">Notice</a></li>
<li><a href="/?mid=biorhythm">Biorhythm</a></li>
<li><a href="/?mid=tide#today">Tide</a></li>
<li><a href="/?mid=calendar">Calendar</a></li>
<li><a href="/?mid=solar">Solar</a></li>
<li><a href="/?mid=lunar">Lunar</a></li>
<li><a href="/?mid=textyle">Blog</a></li>
<li class="top_bottom"><a href="#top" title="위로">Top</a> <a href="#footer" title="아래로">Bottom</a></li>
</ul>
<?
if($check) {
echo "</div>\n";
}
?>
2. 사용중인 레이아웃의 layout.html을 열어 아래의 코드를 제일 위에 넣습니다..
<include target="quick_menu.php" />
3. 사용중인 레이아웃의 layout.html에서 제일 처음로드되는 js파일에 아래 코드를 집어 넣습니다.
//슬라이드식 퀵메뉴(ie5, 6 사용자용)
var $j = jQuery.noConflict();
$j(document).ready(function(){
var currentPosition = parseInt($j("#quick").css("top"));
$j(window).scroll(function() {
var position = $j(window).scrollTop();
$j("#quick").stop().animate({"top":position+currentPosition+"px"},1000);
});
});
4. 사용중인 레이아웃의 layout.html에서 제일 처음로드되는 css파일에 아래 코드를 집어 넣습니다.
#quick { position:absolute; top:200px; right:20px; overflow:hidden; }
#quick .fixed { list-style:none; line-height:19px; font-family: Georgia, Times New Roman, Times, serif; border:1px #000000 solid; padding:10px; margin:0px; text-align:left; }
#quick .fixed a:link,#quick .fixed a:visited { color:#000000; text-decoration:none; }
#quick .fixed a:active,#quick .fixed a:hover,#quick .fixed a:focus { color:#f09; text-decoration:none; }
#quick .fixed .subject { text-align:center; color: #000000; font: bold 1.5em/1em Georgia, "Times New Roman", Times, serif; letter-spacing: -.05em; margin: 0 0 7px; padding: 0 0 7px; position: relative; border-bottom: double 4px #b09370; text-transform: none; text-shadow: 0 1px 0 #f7e4c8; }
#quick .fixed .top_bottom {text-align:center; }
.menu_fixed { position:fixed; right:20px; top:200px; list-style:none; line-height:19px; font-family: Georgia, Times New Roman, Times, serif; border:1px #000000 solid; padding:10px; margin:0px; text-align:left; }
.menu_fixed a:link,.menu_fixed a:visited { color:#000000; text-decoration:none; }
.menu_fixed a:active,.menu_fixed a:hover,.menu_fixed a:focus { color:#f09; text-decoration:none; }
.menu_fixed .subject { text-align:center; color: #000000; font: bold 1.5em/1em Georgia, "Times New Roman", Times, serif; letter-spacing: -.05em; margin: 0 0 7px; padding: 0 0 7px; position: relative; border-bottom: double 4px #b09370; text-transform: none; text-shadow: 0 1px 0 #f7e4c8; }
.menu_fixed .top_bottom {text-align:center; }
이상 모두 저장하여 원래 있던 곳으로 올리면 끝....^^*
이렇게 하면 퀵메뉴가 ie5, 6 사용자는 자바로 구현된 퀵메뉴를,
ie7이상 position:fixed;를 지원하는 웹브라우저는 CSS로 고정된 퀵메뉴를
보여줍니다.
댓글 20
-
Firstlove
2011.03.14 15:49
-
YO-DA
2011.03.15 11:04
좋은 팁에 감사^^ -
Firstlove
2011.03.15 11:57
소스 수정하였습니다.
최근게시물 스킨이나 최근댓글 스킨의 링크를 통해 게시물로 들어갔을 경우 퀵메뉴가 나타나지 않아 소스를 수정하였습니다.
이전에는 $m_id에 퀵메뉴를 나타나게할 mid를 나열했는데 이번에는 반대로 제외할 mid를 넣도록 바꿨습니다.
참고 하십시요. -
포토올/wow
2011.03.16 15:01
좋은 팁~..대단히 감사합니다.*^^*
제가 사용해본 결과...문의 점~
1) menu_fixed.php가....맞는것 같은데요~?..아닌가요?(전 둘다 올림..ㅋ~)
위, 아래 화살표 이미지는...이미지로 넣나요??..좀.알려주시길~~.이미지도 좀..첨부& 알려주시고~
2) Top이동은 잘되지만, Bottom 이동은...안돼네요?..(Firefox,IE 8.0에서)
대단히 감사합니다. -
Firstlove
2011.03.17 18:12
menu_fixed.php 와 common_layout.html 두개의 파일을 올리묜 됩니다.
그리고 아래로 버튼이 안되는 것은 귀하의 홈페이지의 레이아웃에 footer라는 id값을 가진 곳이 없기 때문입니다.
귀하의 홈페이지 소스를 보니 id=footer에 해당하는 것이 footer_01, footer_02 두개가 있네요.
따라서 <a href="#footer" title="아래로"> #footer를 #footer_01, #footer_02 두개 중에 하나를 선택해서 수정해보세요.
그리고 이미지는 제가 만든 것이 아니라서...인터넷에 뒤져 보세요...아주 흔하니깐...^^* -
포토올/wow
2011.03.17 19:04
넵~.잘 정리해주셔서 대단히 감사합니다.*^^*
상세 설명에 감사드립니다. -
김심판
2011.04.02 12:00
설치후 상단에 야래의 에러가 나옵니다
Err : "./common/tpl/fixed_menu.php " template file does not exists.
해당 url http://umpireschool.co.kr/ -
김심판
2011.04.02 12:12
원인을 찾았습니다
설명해주신 처음의
"1. 먼저 다음과 같이 fixed_menu.php 파일을 만들어 홈페이지의 xe가 설치된 폴더의 common폴더의 tpl폴더에 올립니다"에서
파일명을 fixed_menu.php 가 아니고 menu_fixed.php로 이름을 바꾸니 잘돼네요 참고하세요 -
눅아신고했니?
2011.04.06 16:39
좋은소스 감사합니다.
그런데, 해상도에 따른 구현은 어케 해죠???
님 홈페이지에서도, 퀵메뉴가, 1024 * 768 모드로 보면 ,난리던데 ㅜ.ㅜ.
모든 사용자에게, 1240 *1024 모드 이용을 희망하는건 무리가 아닐까요??
제 홈페이지에도 메인 레이아웃이 1000px 가까이 되서, 1240 모드에서 보면, 최적인데,
해상도 변경시 큰 문제가 발생합니다. -
Firstlove
2011.04.07 08:03
퀵메뉴는 기본적으로 홈페이지의 좌측이나 우측에 공간이 필요 합니다.
따라서 해상도가 적은 모니터에는 콘텐츠 위에 퀵메뉴가 덮이지요.
모든사용자의 모니터 해상도에 만족시킬 수 있는 홈페이지 레이아웃을
구현한다는 것은 거의 불가능(?) 하다는 생각이 듭니다.
홈페이지 좌우에 퀵메뉴를 달기가 어려우면 css소스를 수정해서
상단에 고정한다든지 하단에 고정하는 방법은 있지요. -
포토올/wow
2011.06.14 10:36
넵..님의 말씀이 맞습니다.ㅠㅠ.저도 모니터 해상도에 따라..상단에 빈 공간이 많이 생깁니다.ㅠㅠ.
그런데~, 모니터 해상도는 많아야..3-4가지 일텐데요~,그 경우에 각각 맞게 프로그램으로 맞출 수 없나요?
모니터 가로 해상도 1024,1680,1920,.....등...ㅠㅠ.
선처를 바라며 기다립니다. 감사합니다. -
Firstlove
2011.06.14 21:28
다시 말씀드리지만 퀵메뉴를 보기 좋게 사용할려면 화면상에 여백이 존재해야만 합니다.
홈페이지를 제작할 때 레이아웃의 가로폭은 가장 많이 사용하는 해상도를 기준으로 제작합니다.
컴터 사용자들이 가장 선호하는 해상도가 1280X1024더군요. 그럼 퀵메뉴를 사용할려면 콘테츠의 가로폭은
모니터 가로 해상도 - 퀵메뉴 가로폭 이어야 합니다.
사용자의 모니터 가로해상도가 작아서 콘텐츠만 겨우 볼수 있는데 퀵메뉴 까지 본다...ㅠ.ㅠ
작은 해상도에 맞게 레이아웃을 개조 할 수도 없구요...^^;;
거듭 말씀드리지만 모든 모니터의 해상도를 만족시킬 방법은 없다고 봅니다.^^;;;;;
모니터의 해상도가 1280미만이면 퀵메뉴가 안보이게 css를 수정하는 방법밖에 없는 것 같네요.
right:20px; 을 left:1000px; 로 고쳐서 1280미만의 해상도로 테스트하여 left:1000px;의 수치를
퀵메뉴가 안보이게 조절해 보세요. 이 방법 밖엔 없네요. -
포토올/wow
2011.06.16 17:20
빈 공간이 생기는데, 그 위치가 좌우가 아니라...레이아웃 상단부에 크게 생기니 문제입니다.
모니터 해상도랑 관련있고, menu-fixed.php를 삭제하면 상부 공간이 없어지고 보기 좋아집니다.ㅠㅠ.
좌우 여백이 아니라..상부 여백입니다.ㅠㅠ. -
Firstlove
2011.06.16 18:41
상부에 여백이 생기는 것은 퀵메뉴의 위로, 아래로 버튼 이미지의 태그가 잘못 되었기 때문입니다.
아래와 같이 이미지 링크 태그가 닫히지 않았기 때문입니다.
[귀하의 홈페이지 태그]
<li class="top_bottom"><a href="#top" title="위로"><img src="/common/tpl/UP.jpg"</a> <a href="#footer_02" title="아래로"><img src="/common/tpl/DOWN.jpg"</a></li>
[올바른 태그]
<li class="top_bottom"><a href="#top" title="위로"><img src="/common/tpl/UP.jpg" alt="UP.jpg" /></a> <a href="#footer_02" title="아래로"><img src="/common/tpl/DOWN.jpg" alt="DOWN.jpg" /></a></li>
이렇게 해도 안되면 현재 귀하의 홈페이지에 접속하면 자바스크립트 오류가 뜨는데 사용중인 smenubox_scaleupdown 애드온프로그램을 사용중지 시키고 해보세요. 애드온과 충돌이 생기는듯... 원인은 알수 없음,,,,
잘 검토해 보세요. -
포토올/wow
2011.06.17 14:03
아~!!!..대단히 감사합니다.~^^*태그가 빠졌더군요~!!..ㅠㅠ. 상단여백 생기는 문제 해결되었습니다.
바쁘실텐데..대단히 감사합니다. 건강하시고, 행복하세요~ -
Firstlove
2011.06.01 11:51
소스 수정하였습니다. XE core를 업데이트 할 경우 모든게 백지화되어 레이아웃을 수정하는 쪽으로 팁을 고쳤습니다. -
리리이
2011.06.08 22:50
왼쪽 하단에 넣으려면 포지션을 어떻게 고쳐야하나요?? -
Firstlove
2011.06.09 18:55
right:20px; --> left:20px; 이렇게 수정하면 모니터 좌측으로부터 20px 떨어진 곳에 퀵메뉴가 보이겠지요. 하단에 설치하려면 top:200px을 원하는 수치로 바꿔보세요. ^^* -
노형종
2011.08.02 10:48
댓글을 보면 저장되는 폴더가 헷갈립니다. 본문에서는 layout.html 이 있는곳으로 xe\layouts\xe_official 폴더에다가 quick_menu.php 파일을 만들어 사용중인 레이아웃의 layout.html파일이 있는곳에 올립니다.그리고같은 경로에 있는 css폴더안의 default.css와 js폴더내의 xe_official.js 파일을 열어서 본문내용을 추가 하면 될듯 한데 각파일에 내용추가시 기존 파일상단에 넣어야 하는지 아니면 맨나중에 추가를 해야 하는지도 정확히 알려 주시면 좋겟습니다. 암튼 이렇게 설치를 하면 될듯 한데..댓글을 보니 다른 경로가 올려져 있어서 헷갈립니다.댓글에는 common/tpl 폴더에는 menu_fixed.php 와 common_layout.html 두개의 파일을 올리묜 됩니다.이렇게 적혀 있는데 이두개의 경로중 어디다가 올려야 맞는겁니까?? 일주일째 이리저리 해봐도 안되는군요..ㅠ.ㅠ 정확한 경로와 설치법을 자세히 설명 해주시면 감사 하겠습니다.부탁 드립니다. -
Firstlove
2011.08.05 10:37
팁 소스가 수정되기 전에 올려진 댓글을 참고하시면 헷깔릴 수 있습니다.
수정된 팁은 layout.html 이 있는 곳인 xe\layouts\xe_official 폴더(귀하의 경우) 입니다.
그리고 css와 js는 기존파일의 상단이나 하단에 아무 곳에나 끼워넣으면 됩니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
로그인 위젯 질문드립니다. | 소리없는 | 2011.08.31 |
IE에선 업로드 되고 Firefox chrome에서는 업로드가 안될때 | 나정생 | 2011.08.30 |
[꽁수로 해결하자!] 모바일 레이아웃 적용시 파일 업로드 안 되는 문제 | 나루씡. | 2011.08.28 |
sejin7940 게시판에 소셜XE 댓글 다는 방법 [소스코드] [5] | Treasurej | 2011.08.16 |
게시판 글쓰기에서 자동링크의 target을 _blank로 일괄 적용 | 무얼까 | 2011.08.23 |
조회수 제한 풀고, 조회수 증가값을 더 크게 하는 소스 [7] | sejin7940 | 2011.08.21 |
닉네임이나 이름의 뒷부분을 ** 처리로 숨기고픈 경우 [2] | sejin7940 | 2011.08.06 |
XE 를 루트로 옮기는 방법과 문제 대응책 정리 (도메인 접속시 xe폴더로 이동 없이 바로 사이트 뜨게 하기) [8] | Gekkou | 2009.12.06 |
내 PC에서 XE 설치하는 방법 [2] | amd짱좋아 | 2011.08.17 |
XE 템플릿 구문 정리 [1] | 우진홈 | 2011.08.17 |
FTP에서 인코딩 때문에 애 먹으시는 분들? | 히피♬ | 2011.08.15 |
저니님의 업 다운 퀵메뉴 적용하기 [4] | nabul2 | 2010.09.05 |
계시판 확장변수에 대하여 여쭤봅니다. [1] | 마지막드론 | 2011.08.14 |
내 PC에서 XE 빠르게 설치하는 방법 [7] | 차오이 | 2011.04.10 |
자체 우편번호 검색DB 사용하기 | 우진홈 | 2011.08.11 |
플래시 랜덤하게 불러오기 [9] | 선비숨결 | 2009.04.21 |
홈페이지에 퀵메뉴를 다는 소스 (ie7이상, 사파리, 불여우, 오페라 등은 position:fixed 로 고정) [20] | Firstlove | 2011.03.14 |
모듈 개발 틀 쉽게짜기 | Xiso | 2011.08.03 |
모바일 메인에서 쓰는 기능을 삽입할려면 어떻게 해야 할까요?> | 최상순480 | 2011.08.02 |
유튭 비디오를 XE에 올리는 아주 간단한 방법 [1] | 유샤인 | 2011.07.23 |
본문에 보여지는데로 붙여넣기가 안되시는 분은 제홈에 오셔서 복사해 가세요...^^:::