홈페이지에 퀵 메뉴를 다는 팁

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


보여줍니다.