웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치
[31]
![]() | @kihwa | 2003.07.26 |
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기
[27]
![]() | @kihwa | 2003.07.26 |
이미지2장으로 홈페이지만들기 [5] | Conz | 2003.08.01 |
이미지2장으로 홈페이지만들기 2탄 [3] | Conz | 2003.08.01 |
<TD>에 스크롤바 생성하기!! [12] | millth | 2003.08.04 |
[나모] iframe창에서 다른 iframe창으로 링크걸기, 전체창으로 링크하기 [1] | 김병희 | 2003.08.06 |
홈페이지에 배경 음악 항상 흐르게 하기 (숨김프레임) [5] | 마이템플릿 | 2003.08.13 |
테이블의 세로정렬 [4] | clo | 2003.08.20 |
[re] 벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (간단) [3] | 윤혜성 | 2003.12.26 |
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1)
[31]
![]() | 토끼군 | 2003.08.20 |
스크롤바 왼쪽에 위치하도록 하기(문서 뒤집힘 없음) [6] | 행복한고니 | 2003.08.22 |
[동영상] 테이블태그의 쉽고 확실한 이해와 원프레임 만들기 [30] | 비행소년™ | 2003.08.27 |
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때...
[9]
![]() | PHASE | 2003.09.08 |
[동영상] 제로보드의 주요기능들을 적용한 웹사이트 만들기 1-10장 [51] | 비행소년™ | 2003.09.16 |
마우스 커서에 대해서...
[16]
![]() | impre | 2003.09.20 |
해상도에 따라 레이어 위치 바뀌는 것 고정하기 [13] | 김형준 | 2003.10.04 |
IFRAME 삽입 [20] | 박종익 | 2003.10.10 |
링크에 마우스 오버 할때 상태표시줄에 원하는 글 뜨게하기 [6] | siche | 2003.11.26 |
Input AccessKey를 이용한 홈페이지 단축키 사용하기 [8] | Juny. | 2003.12.12 |
스크롤바 색상을 아름답게.
[17]
![]() | 해리포터포에버 | 2003.12.16 |