메뉴 페이지 인식 두번째 방법.

2013. 11. 1. 17:41KnowLedge/JAVASCRIPT

다시 쓰기 귀찮아서 그냥 제가 디자인해놓은거 코드 컨트롤 c v 했어요 ^^;
이런 스타일로 페이지 인식할때 저는 이코드를 사용했어요.
SetMenuID 값만 잘보시면 됩니다. div에 삽입한 id 이름이랑 동일 하면 인식됩니다요~

 

 

<!--인식되어야될 페이지마다 넣어줘야됩니다.-->
<script>
SetMenuID("menu01");
</script>
<script>
SetMenuID("menu01_1");
</script>


/*CSS*/
#s_navi{float:left; width:1000px;}
   #s_top_menu{float:left;  width:838px;}
    #s_top_menu_align{float:left;}
     #menu1{float:left; width:158px; padding-left:48px;}
     #menu2{float:left; width:158px; padding-left:48px;}
     #menu3{float:left; width:158px; padding-left:53px;}
     #menu4{float:left; width:158px; padding-left:57px;}

    #s_sub_menu_align{padding-left:158px;  width:838px;}
    #s_sub_menu{float:left; width:158px; height:167px; padding-left:48px;}
     #s_sub_menu_text1{}
     #s_sub_menu_text2{}
     #s_sub_menu_text3{padding-left:5px;}
     #s_sub_menu_text4{padding-left:14px;}
     #s_sub_menu_box{padding-top:10px;}

<!--head script-->
<script>
function MenuRollOver(e) {
el = event.srcElement;
if(el.oversrc) {
tmp = el.src;
el.src = el.oversrc;
el.oversrc = tmp;
}
}
function InitRollOver() {
var max = document.images.length;
for(i=0; i<max; i++) {
el = document.images[i];
if(el.getAttribute("oversrc")) {
el.onmouseover = MenuRollOver;
el.onmouseout = MenuRollOver;
}
}
}
function SetMenuID(id) {
el = document.getElementById(id);
if(el.getAttribute("setsrc")) {
el.src = el.getAttribute("setsrc");
if(el.getAttribute("oversrc")) el.setAttribute("oversrc", el.getAttribute("setsrc"));
} else {
if(el.getAttribute("oversrc")) el.src = el.getAttribute("oversrc");
}
el.onmouseover = el.onmouseout = "";
}
window.onload=function() {
InitRollOver();
}
</script>
<!--head script-->

<!--로고-->
<div id="s_logo">
 <a href="/index.php"><img src="<?=$path?>img/s_logo.jpg" alt="아트스테이로고"></a>
</div>
<!--로고-->

<!--대메뉴-->
<div id="s_top_menu">
 <div id="s_top_menu_align">
  <div id="menu1">
   <a href="<?=$path?>sub1/menu01.php"><img src="<?=$path?>img/introduce.jpg" id="menu01" alt="Introduce" oversrc="<?=$path?>img/introduce_over.jpg" setsrc="<?=$path?>img/introduce_over.jpg"></a>
  </div>
  <div id="menu2">
   <a href="<?=$path?>sub2/menu01.php"><img src="<?=$path?>img/bussiness.jpg" id="menu02" alt="bussiness" oversrc="<?=$path?>img/bussiness_over.jpg" setsrc="<?=$path?>img/bussiness_over.jpg"></a>
  </div>
  <div id="menu3">
   <a href="<?=$path?>program/list.php"><img src="<?=$path?>img/portfolio.jpg" id="menu03" alt="portfolio"  oversrc="<?=$path?>img/portfolio_over.jpg" setsrc="<?=$path?>img/portfolio_over.jpg"></a>
  </div>
  <div id="menu4">
   <a href="<?=$path?>news/list.php"><img src="<?=$path?>img/community.jpg" id="menu04" alt="community" oversrc="<?=$path?>img/community_over.jpg" setsrc="<?=$path?>img/community_over.jpg"></a>
  </div>
 </div>
</div>
<!--대메뉴-->

<!--서브메뉴-->
<div id="s_sub_menu_align">

 <!--Introduce-->
 <div id="s_sub_menu">
  <div id="s_sub_menu_text1">
   <div id="s_sub_menu_box">
    <a href="<?=$path?>sub1/menu01.php"><img src="<?=$path?>img/sub1_1.jpg" id="menu01_1" alt="문화마루 소개" oversrc="<?=$path?>img/sub1_1_over.jpg" setsrc="<?=$path?>img/sub1_1_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>sub1/menu02.php"><img src="<?=$path?>img/sub1_2.jpg" id="menu01_2" alt="인사말" oversrc="<?=$path?>img/sub1_2_over.jpg" setsrc="<?=$path?>img/sub1_2_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>sub1/menu03.php"><img src="<?=$path?>img/sub1_3.jpg" id="menu01_3" alt="연혁" oversrc="<?=$path?>img/sub1_3_over.jpg" setsrc="<?=$path?>img/sub1_3_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>sub1/menu04.php"><img src="<?=$path?>img/sub1_4.jpg" id="menu01_4" alt="조직도" oversrc="<?=$path?>img/sub1_4_over.jpg" setsrc="<?=$path?>img/sub1_4_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>sub1/menu05.php"><img src="<?=$path?>img/sub1_5.jpg" id="menu01_5" alt="찾아오시는길" oversrc="<?=$path?>img/sub1_5_over.jpg" setsrc="<?=$path?>img/sub1_5_over.jpg"></a>
   </div>
  </div>
 </div>
 <!--Introduce-->

 <!--Bussiness-->
 <div id="s_sub_menu">
  <div id="s_sub_menu_text2">
   <div id="s_sub_menu_box">
    <a href="<?=$path?>sub2/menu01.php"><img src="<?=$path?>img/sub2_1.jpg" id="menu02_1" alt="춤공간 ARTstay" oversrc="<?=$path?>img/sub2_1_over.jpg" setsrc="<?=$path?>img/sub2_1_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>sub2/menu02.php"><img src="<?=$path?>img/sub2_2.jpg" id="menu02_2" alt="ART Project" oversrc="<?=$path?>img/sub2_2_over.jpg" setsrc="<?=$path?>img/sub2_2_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>sub2/menu03.php"><img src="<?=$path?>img/sub2_3.jpg" id="menu02_3" alt="공연 및 문화컨텐츠 기획" oversrc="<?=$path?>img/sub2_3_over.jpg" setsrc="<?=$path?>img/sub2_3_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>sub2/menu04.php"><img src="<?=$path?>img/sub2_4.jpg" id="menu02_4" alt="국고 예술문화사업" oversrc="<?=$path?>img/sub2_4_over.jpg" setsrc="<?=$path?>img/sub2_4_over.jpg"></a>
   </div>
  </div>
 </div>
 <!--Bussiness-->

 <!--Portfolio-->
 <div id="s_sub_menu">
  <div id="s_sub_menu_text3">
   <div id="s_sub_menu_box">
    <a href="<?=$path?>program/list.php"><img src="<?=$path?>img/sub3_1.jpg" id="menu03_1" alt="2012" oversrc="<?=$path?>img/sub3_1_over.jpg" setsrc="<?=$path?>img/sub3_1_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>program/list2.php"><img src="<?=$path?>img/sub3_2.jpg" id="menu03_2" alt="2013" oversrc="<?=$path?>img/sub3_2_over.jpg" setsrc="<?=$path?>img/sub3_2_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>program/list3.php"><img src="<?=$path?>img/sub3_3.jpg" id="menu03_3" alt="진행예정사업" oversrc="<?=$path?>img/sub3_3_over.jpg" setsrc="<?=$path?>img/sub3_3_over.jpg"></a>
   </div>
  </div>
 </div>
 <!--Portfolio-->

 <!--community-->
 <div id="s_sub_menu">
  <div id="s_sub_menu_text4">
   <div id="s_sub_menu_box">
    <a href="<?=$path?>news/list.php"><img src="<?=$path?>img/sub4_1.jpg" id="menu04_1" alt="문화마루 소개" oversrc="<?=$path?>img/sub4_1_over.jpg" setsrc="<?=$path?>img/sub4_1_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>information/list.php"><img src="<?=$path?>img/sub4_2.jpg" id="menu04_2" alt="인사말" oversrc="<?=$path?>img/sub4_2_over.jpg" setsrc="<?=$path?>img/sub4_2_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>notice/list.php"><img src="<?=$path?>img/sub4_3.jpg" id="menu04_3" alt="연혁" oversrc="<?=$path?>img/sub4_3_over.jpg" setsrc="<?=$path?>img/sub4_3_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>reply/list.php"><img src="<?=$path?>img/sub4_4.jpg" id="menu04_4" alt="조직도" oversrc="<?=$path?>img/sub4_4_over.jpg" setsrc="<?=$path?>img/sub4_4_over.jpg"></a>
   </div>
   <div id="s_sub_menu_box">
    <a href="<?=$path?>photo/list.php"><img src="<?=$path?>img/sub4_5.jpg" id="menu04_5" alt="찾아오시는길" oversrc="<?=$path?>img/sub4_5_over.jpg" setsrc="<?=$path?>img/sub4_5_over.jpg"></a>
   </div>
  </div>
 </div>
 <!--community-->

</div><!--서브메뉴-->

 

 

'KnowLedge > JAVASCRIPT' 카테고리의 다른 글

상단메뉴만들기^^  (0) 2014.04.14
메뉴 페이지 인식 두번째 방법.  (0) 2013.11.01
tweenmax  (0) 2013.11.01
모달팝업.  (0) 2013.10.28
오전 오후 다른 백그라운드 쓰기~  (0) 2013.02.12
상단 메뉴 고정 및 클릭시 부드럽게 이동  (0) 2013.02.12