웹마스터 팁

홈페이지에 퀵메뉴를 다는 소스





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로 고정된 퀵메뉴를


보여줍니다.


제목 글쓴이 날짜
로그인 위젯 질문드립니다. 소리없는 2011.08.31
IE에선 업로드 되고 Firefox chrome에서는 업로드가 안될때 나정생 2011.08.30
[꽁수로 해결하자!] 모바일 레이아웃 적용시 파일 업로드 안 되는 문제 file 나루씡. 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] file Gekkou 2009.12.06
내 PC에서 XE 설치하는 방법 [2] file amd짱좋아 2011.08.17
XE 템플릿 구문 정리 [1] 우진홈 2011.08.17
FTP에서 인코딩 때문에 애 먹으시는 분들? file 히피♬ 2011.08.15
저니님의 업 다운 퀵메뉴 적용하기 [4] file 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
모듈 개발 틀 쉽게짜기 file Xiso 2011.08.03
모바일 메인에서 쓰는 기능을 삽입할려면 어떻게 해야 할까요?> 최상순480 2011.08.02
유튭 비디오를 XE에 올리는 아주 간단한 방법 [1] 유샤인 2011.07.23