웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
XE에서 레이아웃이나 기타의 페이지에 include 사용에 대한 오해??? [3] | DuRi | 2011.01.18 |
텍스타일 블로그 메인페이지 만들기 [1] | designm | 2011.01.13 |
두개 이상의 홈페이지 운영 - Virtual host 설정 [1] | 이성헌 | 2005.12.15 |
홈페이지 대량 변조 발생에 따른 ‘주의’ 경보발령 [4] | ATpple.com | 2005.01.07 |
[XAMPP]한 컴퓨터에서 여러 개의 홈페이지 운영하는 방법(가상호스트 아님) [8] | The Darkness | 2004.02.05 |
APM_Setup4 에서 에러페이지 띄우기 [2] | RedEye(kaist) | 2003.05.28 |
htaccss를 활용하자! 1탄 에러페이지 만들기 [10] | [쿨럭]블루엔젤 | 2003.01.23 |
에러페이지를 서버관리자가 지정한 페이지로. [1] | teenteenv | 2002.02.21 |
웹페이지 미리보기 snapshot 활용하기 [2] | 유창화 | 2008.02.15 |
나만의 미니홈 만들기 ㅡ 미니홈 생성 페이지
[3]
![]() | 예뜨락 | 2004.11.20 |
나만의 미니홈 만들기 ㅡ 기초적인 관리 페이지
[3]
![]() | 예뜨락 | 2004.11.20 |
페이지에 암호를 걸자..=_= [27] | ☺심심 | 2004.06.25 |
카일레라 서버 페이지 만들기. [2] | teslaMINT | 2003.12.09 |
홈페이지 관리자 모드 구축하기 (HTTP 인증, 중복 맞음)
[10]
![]() | 9000㎒ | 2003.11.01 |
내 홈페이지의 방문자 어디서 접속했을까 알아봅시다
[21]
![]() | 버찌소년 | 2003.10.08 |
홈페이지의 내용을 DB에 담기 [15] | 세죠위그이 | 2003.05.30 |
제로보드식 에러페이지 만들기 [2] | .zeve | 2003.02.04 |
[동주아빠] PHP 게시판(17강) - 저장 후 페이지 이동 | 손병목 | 2002.12.25 |
모닝샵 이용해서 쇼핑몰 만들기 (웹페이지 만들기1)
[8]
![]() | 한꼬마 | 2002.11.22 |
초보의 초보를위한 강의 PHP를 활용한 페이지 암호걸기 #3 [10] | 아이쿠 | 2002.11.15 |