웹마스터 팁
Hide-Show-Menu 를 PHP로 구현하기...
2002.04.06 21:55
http://tryz.net/menutest/value.phpshttp://tryz.net/menutest/menu.php안녕하세요~ TryZ 입니다. 아직 초보 신세이지만 이렇게 강좌 하나 올려봅니다.
Hide-Show-Menu를 PHP로 구현하는 방법에 대해서 알려드릴텐데요.
우선 Hide-Show-Menu가 무엇인지 알아봅시다.
예제는... 바로 여기, Nzeo 입니다.
위쪽 메뉴에서 메뉴 하나 위에 마우스를 가져가면 하위 메뉴가 나타나죠?
그리고 http://moosim.pe.kr/ 여기 Moosim 님의 홈에서도 쓰였습니다.(엔지오와 달리 마우스를 클릭하면 하위메뉴가 나옵니다.)
하지만 제가 허접해서인지 마우스를 올렸을때 하위메뉴가 나오는것은 못하겠고, 마우스 클릭하면 하위메뉴가 나오도록 해 보았습니다.
메뉴가 나오는 Menu.php 파일과 메뉴 이름, 하위 메뉴 이름, 링크 등을 설정하는 value.php 파일이 있습니다.
우선 Menu.php 파일의 소스를 보면서 설명해 드릴게요. (쉽게 설명해 드리기 위해서 맨 앞에 라인을 붙였습니다. 소스 퍼 가시려면 http://tryz.net/menutest/menu.phps 에서 퍼 가세요.)
01. <?
02. include "value.php";
03. echo "<head><link rel=stylesheet href=".$stylesheet."></head>";
04. echo "<span style=font-size:".$fontsize."pt;><font face=".$font.">";
05. echo "
06. <a href=$PHP_SELF?menu=1>$menu1</a>
07. <a href=$PHP_SELF?menu=2>$menu2</a>
08. <a href=$PHP_SELF?menu=3>$menu3</a>
09. <a href=$PHP_SELF?menu=4>$menu4</a>
10. <a href=$PHP_SELF?menu=5>$menu5</a>
11. <a href=$PHP_SELF?menu=6>$menu6</a>
12. <br>
13. ";
14. if($menu==1)
15. {
16. echo "<a href=$menu11url target=$target>$menu11</a> <a href=$menu12url target=$target>$menu12</a> <a href=$menu13url target=$target>$menu13</a>";
17. }
18. if($menu==2)
19. {
20. echo "<a href=$menu21url target=$target>$menu21</a> <a href=$menu22url target=$target>$menu22</a> <a href=$menu23url target=$target>$menu23</a>";
21. }
22. if($menu==3)
23. {
24. echo "<a href=$menu31url target=$target>$menu31</a> <a href=$menu32url target=$target>$menu32</a> <a href=$menu33url target=$target>$menu33</a>";
25. }
26. if($menu==4)
27. {
28. echo "<a href=$menu41url target=$target>$menu41</a> <a href=$menu42url target=$target>$menu42</a> <a href=$menu43url target=$target>$menu43</a>";
29. }
30. if($menu==5)
31. {
32. echo "<a href=$menu51url target=$target>$menu51</a> <a href=$menu52url target=$target>$menu52</a> <a href=$menu53url target=$target>$menu53</a>";
33 . }
34. if($menu==6)
35. {
36. echo "<a href=$menu61url target=$target>$menu61</a> <a href=$menu62url target=$target>$menu62</a> <a href=$menu63url target=$target>$menu63</a>";
37. }
38. echo "</font></span>";
39. ?>
먼저 1번째 줄에서 php를 열고 2번째 줄에서 value.php (메뉴 이름, 메뉴 눌렀을때 url 이 변수로 저장된 파일) 를 포함시킵니다.
3, 4 줄은 스타일 시트파일을 열고 폰트 사이즈, 종류 등을 가져옵니다. 6~11 줄은 메뉴를 눌렀을때 하위메뉴가 나오게 하는 것입니다. $menu1~6 까지가 큰 메뉴의 이름입니다. 그리고 14~37까지의 줄은 하위메뉴를 출력하는 소스입니다. 큰 메뉴를 클릭했을때 1~6 까지의 값을 전달해서 그 값일 경우에 알맞은 하위메뉴를 출력합니다.$menu11~16까지는 큰메뉴 1의 하위메뉴들, $menu21~26 까지는 큰메뉴 2의 하위메뉴들로 $menu66까지 있습니다. 그리고 $menu11url~$menu66url 까지는 하위메뉴를 눌렀을때 이동할 경로입니다. 이제 끝입니다. value.php 파일은 변수만 저장되어있으므로 여기서 수정을 하시면 메뉴 이름, 경로 등을 수정할 수 있습니다. 소스는 http://tryz.net/menutest/value.phps 에서 보실 수 있습니다.
http://tryz.net/menutest/menu.php
http://tryz.net/menutest/menu.phps
http://tryz.net/menutest/value.php
http://tryz.net/menutest/value.phps
Hide-Show-Menu를 PHP로 구현하는 방법에 대해서 알려드릴텐데요.
우선 Hide-Show-Menu가 무엇인지 알아봅시다.
예제는... 바로 여기, Nzeo 입니다.
위쪽 메뉴에서 메뉴 하나 위에 마우스를 가져가면 하위 메뉴가 나타나죠?
그리고 http://moosim.pe.kr/ 여기 Moosim 님의 홈에서도 쓰였습니다.(엔지오와 달리 마우스를 클릭하면 하위메뉴가 나옵니다.)
하지만 제가 허접해서인지 마우스를 올렸을때 하위메뉴가 나오는것은 못하겠고, 마우스 클릭하면 하위메뉴가 나오도록 해 보았습니다.
메뉴가 나오는 Menu.php 파일과 메뉴 이름, 하위 메뉴 이름, 링크 등을 설정하는 value.php 파일이 있습니다.
우선 Menu.php 파일의 소스를 보면서 설명해 드릴게요. (쉽게 설명해 드리기 위해서 맨 앞에 라인을 붙였습니다. 소스 퍼 가시려면 http://tryz.net/menutest/menu.phps 에서 퍼 가세요.)
01. <?
02. include "value.php";
03. echo "<head><link rel=stylesheet href=".$stylesheet."></head>";
04. echo "<span style=font-size:".$fontsize."pt;><font face=".$font.">";
05. echo "
06. <a href=$PHP_SELF?menu=1>$menu1</a>
07. <a href=$PHP_SELF?menu=2>$menu2</a>
08. <a href=$PHP_SELF?menu=3>$menu3</a>
09. <a href=$PHP_SELF?menu=4>$menu4</a>
10. <a href=$PHP_SELF?menu=5>$menu5</a>
11. <a href=$PHP_SELF?menu=6>$menu6</a>
12. <br>
13. ";
14. if($menu==1)
15. {
16. echo "<a href=$menu11url target=$target>$menu11</a> <a href=$menu12url target=$target>$menu12</a> <a href=$menu13url target=$target>$menu13</a>";
17. }
18. if($menu==2)
19. {
20. echo "<a href=$menu21url target=$target>$menu21</a> <a href=$menu22url target=$target>$menu22</a> <a href=$menu23url target=$target>$menu23</a>";
21. }
22. if($menu==3)
23. {
24. echo "<a href=$menu31url target=$target>$menu31</a> <a href=$menu32url target=$target>$menu32</a> <a href=$menu33url target=$target>$menu33</a>";
25. }
26. if($menu==4)
27. {
28. echo "<a href=$menu41url target=$target>$menu41</a> <a href=$menu42url target=$target>$menu42</a> <a href=$menu43url target=$target>$menu43</a>";
29. }
30. if($menu==5)
31. {
32. echo "<a href=$menu51url target=$target>$menu51</a> <a href=$menu52url target=$target>$menu52</a> <a href=$menu53url target=$target>$menu53</a>";
33 . }
34. if($menu==6)
35. {
36. echo "<a href=$menu61url target=$target>$menu61</a> <a href=$menu62url target=$target>$menu62</a> <a href=$menu63url target=$target>$menu63</a>";
37. }
38. echo "</font></span>";
39. ?>
먼저 1번째 줄에서 php를 열고 2번째 줄에서 value.php (메뉴 이름, 메뉴 눌렀을때 url 이 변수로 저장된 파일) 를 포함시킵니다.
3, 4 줄은 스타일 시트파일을 열고 폰트 사이즈, 종류 등을 가져옵니다. 6~11 줄은 메뉴를 눌렀을때 하위메뉴가 나오게 하는 것입니다. $menu1~6 까지가 큰 메뉴의 이름입니다. 그리고 14~37까지의 줄은 하위메뉴를 출력하는 소스입니다. 큰 메뉴를 클릭했을때 1~6 까지의 값을 전달해서 그 값일 경우에 알맞은 하위메뉴를 출력합니다.$menu11~16까지는 큰메뉴 1의 하위메뉴들, $menu21~26 까지는 큰메뉴 2의 하위메뉴들로 $menu66까지 있습니다. 그리고 $menu11url~$menu66url 까지는 하위메뉴를 눌렀을때 이동할 경로입니다. 이제 끝입니다. value.php 파일은 변수만 저장되어있으므로 여기서 수정을 하시면 메뉴 이름, 경로 등을 수정할 수 있습니다. 소스는 http://tryz.net/menutest/value.phps 에서 보실 수 있습니다.
http://tryz.net/menutest/menu.php
http://tryz.net/menutest/menu.phps
http://tryz.net/menutest/value.php
http://tryz.net/menutest/value.phps
댓글 7
-
TheMics
2002.04.07 15:41
-
TheMics
2002.04.07 15:42
글구 님이 생각하신 마우스를 올려서 하는 거나 내용 위에 메뉴가 뜨는 거는 오로지 자바스크립트와 레이어를 써야만 가능합니다. 참고하세여^^ -
william
2002.04.17 08:45
자바스크립트와 레이어를 쓰는것보다 더 느리지 않나요? 페이지를 다시 전체로드하니까.. -
박종찬
2002.04.30 17:28
자바스크립트로 된거 보내주심 그걸루 쓰겠습니다... 제형편으론 이거써야겠네여 -
안승준
2002.04.30 17:36
자바스크립트만으로도 가능합니다.
방식은 자바스크립트의 onmouse~~를 사용해서
자바스크립트내의 명령문을 php로 활용하시면 될것이라 생각됩니다.
글구 자바스크립트와 레이어는 페이지를 전체 로딩하지 않습니다.
클라이언트 메모리상에서 작동되어지는 것입니다. -
엑시스트
2003.01.14 19:08
제 홈페이지 자료실에 오시면 메뉴를 php3 형식으로 만들어 놓은 것이 있습니다.^^ http://tagcom.wezip.co.kr -
엑시스트
2003.07.21 15:49
주소가 변경되었습니다. http://www.itagcom.com입니다... 현재 리뉴얼 작업중입니다.
그렇지 않으면 첫째로 페이지 전체를 리로드하니까 시간이 오래 걸리고, 둘째로 노프레임에서 인클루드로 사용시에는 속도 저하+천 페이지로 돌아와버리는 문제도 생깁니다...마지막으로 제로보드 매뉴얼에서처럼 세로메뉴를 사용할 경우 한번에 한개의 메뉴만 펼쳐지니까 좀 골치가 아픕니다..