상단 지역코드목록 슬라이딩 메뉴로 바꾸기

addon.css

addon.php

jquery-1.4.2.min.js

샘플보기 : http://tindevil.com/websample/slidemenu/sample.php

슬라이딩 메뉴를 구현하였습니다. jQuery 를 사용하였습니다.
물론 검색엔진을 통해서 여기저기 자료를 취합하였습니다.
jQuery는 굉장히 광범위하게 사용할 수 있을듯합니다.
슬라이딩 메뉴가 어떤건지 확인하려면 상단의 샘플보기를 눌러보시기 바랍니다.

디자인별도로 처리하지는 않았습니다.
작성자는 디자인! 이란단어에 치를 떨기때문에 디자인은 직접!하시기 바랍니다.

#첨부된 파일은 작업하고자하는 파일과 같은경로 있어야합니다.
#그렇지않을경우에는 해당 위치에 맞도록 include 와 script src , link href 를 수정해주시기 바랍니다.

addon.php : 데이터베이스관련한 간단한 명령을 둔 함수.
addon.css : style sheet 파일
jquery... 스크롤메뉴를 위한 jquery 파일

보통솔루션의 경우 헤더파일에서 작업하시면 될듯합니다. 표시하고자하는 위치에 따라다르겠지만
아마도 화면의 최상위에 노출하는경우가 대부분이더군요.  그렇다면 헤더가 맞을겁니다.

<? include "addon.php"; ?>
<script type="text/ecmascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">

 //Page Load Event
 jQuery(document).ready(function () {
     $("#areamenu").toggle(off, on);
 });
 function off() {
     $("#tgarea").slideUp(200);
     $("#areamenu").attr("value", "지역열기");
 }
 function on() {
     $("#tgarea").slideDown(200);
     $("#areamenu").attr("value", "지역닫기");
 }
</script>
<div style="height:100px; top:0;" id="tgarea">
    <div id="menulist">
        <ul>
            <li><a href='#none' class='active'>지역1</a></li>
            <li><a href='#none' class=''>지역2</a></li>
        </ul>
    </div>
</div>
<div><input type="button" id="areamenu"  value="지역닫기"></div>

원데이넷 사용자는 /pages/head2.inc.html에서 작업하시면 맞을겁니다.

#파일위쯤에 아래코드를 먼저 선언합니다.
<!-- 지역구분 파일및 함수선언 -->
<? include "addon.php"; ?>
<script type="text/ecmascript" src="jquery-1.4.2.min.js" ></script>
<link href="addon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 //Page Load Event
 jQuery(document).ready(function () {
     $("#areamenu").toggle(off, on);
 });
 function off() {
     $("#tgarea").slideUp(200);
     $("#areamenu").attr("value", "지역열기");
 }
 function on() {
     $("#tgarea").slideDown(200);
     $("#areamenu").attr("value", "지역닫기");
 }
</script>

##지역코드($thiscate) 가 결정된 바로 직후에 다름 코드를 추가하세요.
<!--지역구분-->
<div style="height:40px; top:0;" id="tgarea">
    <div id="menulist">
        <ul>
            <?
            $Query = "select * from snsCategory where cHidden = 'no'";
            $Result = mysql_query($Query);
            while($Row = mysql_fetch_array($Result))
            {
                $catecode = $Row[catecode];
                $catename = $Row[catename];
                $ProdCnt = getScalar("select count(*) from snsProduct where cateCode ='$catecode'");
                $link = "/changeArea.php?Aid=$param1";
                if ($catecode==$thiscate) { $var1 = "active"; }
                else                      { $var1 = "";       }
                echo "<li><a href='/changeArea.php?Aid=$catecode' class='$var1'>$catename</a></li>";
                //if($ProdCnt)   echo "<li><a href='/changeArea.php?Aid=$catecode' class='$var1'>$catename</a></li>";
            }
            ?>
        </ul>
    </div>
</div>
<div><input type="button" id="areamenu"  value="지역닫기"></div>