만드는 html메뉴 주소:http://ucnetworks.co.kr/hospi.php

 

따라할 플래시메뉴 주소:http://www.barosun.net/

 

따라할 플래시 메뉴주소를 html/css로 만들껀데요.

 

메뉴에 올리면 해당하는 이미지 색이 변경이 되죠.. 여기까진 좋아요.

근데 요플레시는 이거는 마우스를 뗴니까

원래 제일 처음 메뉴칸에 불이 켜지는 거에요.

 

각각의 메뉴에 마우스를 대면 해당하는 메뉴에만 불이켜지고..

마우스를 멀리 놔두면 자동으로 멘첫칸 메뉴에 불이켜지고.. (자동으로 마우스를 떼면 첫이미지에 불이켜지는 기능)

 

이 기능은 플래시 말고는 도저히 할수 없나요?

지금 막소스를 찾아다니년서 열불나게 머리싸메고 있어요.

 

일단 두종류의 메뉴를 만들었어요. 비슷한. 똑같지는 않구요.

첫번쨰 메뉴 소스는 요래요

 

$tnav_width = '989'; //메뉴 전체 가로 크기
$tnav_bg = '#fff'; //메뉴 배경색
$tnav_sub_round = '#fff'; //서브 메뉴 테두리 색상(※테두리를 없애려면 '#fff' 로 변경)
$tnav_main = array('0','#fff','#000'); //주 메뉴 관련 설정(※입력 순서: '메뉴 좌우 여백','메뉴 색상','메뉴 마우스 오버시 색상')
$tnav_sub = array('0','#00f','#000','underline'); //서브 메뉴 관련 설정(※입력 순서: '메뉴 좌우 여백','메뉴 색상','메뉴 마우스 오버시 색상','메뉴 마우스 오버시 밑줄 여부')
$addsub_left = array('0','0','0','0','0','0'); //사용자 추가 서브 메뉴 왼쪽 출력 위치(※사용자 그룹 수에 비례하여 style에 추가하여 사용하고 입력 순서는 순차적으로)

//사용자 추가 메뉴 그룹1 설정
$tnav_add1 = array(
    array('인사말','http://naver.com',''), //사용자 추가 메뉴 그룹1에서 추가할 메뉴1(※입력순서: '메뉴명','링크','새창여부')
    array('경영이념','http://nate.com',''), //사용자 추가 메뉴 그룹1에서 추가할 메뉴2
    array('주요사업','http://sir.co.kr','_blank'),
  //사용자 추가 메뉴 그룹1에서 추가할 메뉴3
  array('인사정보','http://sir.co.kr','_blank'),
  array('오시는길','http://sir.co.kr','_blank')
 
);

//사용자 추가 메뉴 그룹2 설정
$tnav_add2 = array(
    array('사용자메뉴2-1','http://naver.com',''),
    array('사용자메뉴2-2','http://nate.com',''),
    array('사용자메뉴2-3','http://sir.co.kr','_blank')
);

//사용자 추가 메뉴 그룹3 설정
$tnav_add3 = array(
    array('사용자메뉴3-1','http://naver.com',''),
    array('사용자메뉴3-2','http://nate.com',''),
    array('사용자메뉴3-3','http://sir.co.kr','_blank')
);

//사용자 추가 메뉴 그룹4 설정
$tnav_add4 = array(
    array('사용자메뉴4-1','http://naver.com',''),
    array('사용자메뉴4-2','http://nate.com',''),
    array('사용자메뉴4-3','http://sir.co.kr','_blank')
);
//사용자 추가 메뉴 그룹5 설정
$tnav_add5 = array(
    array('사용자메뉴4-1','http://naver.com',''),
    array('사용자메뉴4-2','http://nate.com',''),
    array('사용자메뉴4-3','http://sir.co.kr','_blank')
);
//사용자 추가 메뉴 그룹6 설정
$tnav_add6 = array(
    array('사용자메뉴4-1','http://naver.com',''),
    array('사용자메뉴4-2','http://nate.com',''),
    array('사용자메뉴4-3','http://sir.co.kr','_blank')
);

?>

<style type="text/css">
#tnav {position:relative; width:<?php echo $tnav_width ?>px; height:38px; background-color:<?php echo $tnav_bg ?>; margin:0 0 0 0px; z-index:100}
#tnav ul {margin:0; padding:0px 0 0px 0; list-style:none; float:right; }
#tnav ul li {float:left; margin:0 0px 0 0px}
#tnav ul li a, #tnav ul li a:visited {display:block; margin:0 0px 0 0px; padding:0 <?php echo $tnav_main[0] ?>px; text-decoration:none; font:bold 12px gulim, tahoma; color:<?php echo $tnav_main[1] ?>; line-height:36px}
#tnav ul li:hover a, #tnav ul li a:hover {margin:0 0 0 0px background-color:#fff; color:<?php echo $tnav_main[2] ?>}
#tnav ul li ul {position:absolute; top:38px; padding:6px 0 0px 0; left:0; visibility:hidden; }
#tnav ul li:hover ul, #tnav ul li a:hover ul {visibility:visible}
#tnav ul li:hover ul li a {background-color:#fff; padding:0 0 6px 0; border:0; text-decoration:none; font:normal 11px dotum, tahoma; color:<?php echo $tnav_sub[1] ?>; line-height:24px; height:20px}
#tnav ul li:hover ul li a:hover {text-decoration:<?php echo $tnav_sub[3] ?>; color:<?php echo $tnav_sub[2] ?>}
#tnav ul li:hover ul#addsub1_left {left:<?php echo $addsub_left[0] ?>px; border-right:0px solid <?php echo $tnav_sub_round ?>; border-bottom:0px solid <?php echo $tnav_sub_round ?>; border-left:0px solid <?php echo $tnav_sub_round ?>}
#tnav ul li:hover ul#addsub2_left {left:<?php echo $addsub_left[1] ?>px; border-right:0px solid <?php echo $tnav_sub_round ?>; border-bottom:0px solid <?php echo $tnav_sub_round ?>; border-left:0px solid <?php echo $tnav_sub_round ?>}
#tnav ul li:hover ul#addsub3_left {left:<?php echo $addsub_left[2] ?>px; border-right:0px solid <?php echo $tnav_sub_round ?>; border-bottom:0px solid <?php echo $tnav_sub_round ?>; border-left:0px solid <?php echo $tnav_sub_round ?>}
#tnav ul li:hover ul#addsub4_left {left:<?php echo $addsub_left[3] ?>px; border-right:0px solid <?php echo $tnav_sub_round ?>; border-bottom:0px solid <?php echo $tnav_sub_round ?>; border-left:0px solid <?php echo $tnav_sub_round ?>}

</style>

<div id="tnav">
<ul>
  <!-- 사용자 추가 메뉴 그룹1 -->
  <?php if ($tnav_add1) { ?>
  <li >
    <a href="../bbs/board.php?bo_table=jchcomp_01"><IMG SRC="../images/hospi/main/main_09.gif" onmouseover="this.src='../images/hospi/main/main_09.gif'" onmouseout="this.src='../images/hospi/main/main_09.gif'" /></a>
    <ul id="addsub1_left">
     
 <li><IMG SRC="../images/hospi/main/mainmenu.gif"   ALT=""></li>

 
    </ul>
  </li>
  <?php } ?>
  <!-- //사용자 추가 메뉴 그룹1 -->
  <!-- 사용자 추가 메뉴 그룹2 -->
  <?php if ($tnav_add2) { ?>
  <li>
    <a href="../bbs/board.php?bo_table=jchsale_01"><IMG SRC="../images/hospi/main/mainon_10.gif" onmouseover="this.src='../images/hospi/main/mainon_10.gif'" onmouseout="this.src='../images/hospi/main/mainon_10.gif'" /></a>
    <ul id="addsub2_left">
     
 <li><IMG SRC="../images/hospi/main/submain_03.gif"   ALT=""></li>
    </ul>
  </li>
  <?php } ?>
  <!-- //사용자 추가 메뉴 그룹2 -->
  <!-- 사용자 추가 메뉴 그룹3 -->
  <?php if ($tnav_add3) { ?>
  <li>
    <a href="../../bbs/board.php?bo_table=jchcommu_01"><IMG SRC="../images/hospi/main/main_11.gif" onmouseover="this.src='../images/hospi/main/mainon_11.gif'" onmouseout="this.src='../images/hospi/main/main_11.gif'" /></a>
    <ul id="addsub3_left">
  
 <li><IMG SRC="../images/hospi/main/submain_02.gif"   ALT=""></li>
    </ul>
  </li>
  <?php } ?>
  <!-- //사용자 추가 메뉴 그룹3 -->
  <!-- 사용자 추가 메뉴 그룹4 -->
  <?php if ($tnav_add4) { ?>
  <li>
    <a href="../../bbs/board.php?bo_table=jchinvest_02"><IMG SRC="../images/hospi/main/main_12.gif" onmouseover="this.src='../images/hospi/main/mainon_12.gif'" onmouseout="this.src='../images/hospi/main/main_12.gif'" /></a>
    <ul id="addsub4_left">
<li><IMG SRC="../images/hospi/main/submain_03.gif"   ALT=""></li>
  </ul>
  </li>
  <?php } ?>
    <?php if ($tnav_add5) { ?>
  <li>
    <a href="../../bbs/board.php?bo_table=jchinvest_02"><IMG SRC="../images/hospi/main/main_13.gif" onmouseover="this.src='../images/hospi/main/mainon_13.gif'" onmouseout="this.src='../images/hospi/main/main_13.gif'" /></a>
    <ul id="addsub4_left">
<li><IMG SRC="../images/hospi/main/submain_02.gif"   ALT=""></li>
  </ul>
  </li>
  <?php } ?>
    <?php if ($tnav_add6) { ?>
  <li>
    <a href="../../bbs/board.php?bo_table=jchinvest_02"><IMG SRC="../images/hospi/main/main_14.gif" onmouseover="this.src='../images/hospi/main/mainon_14.gif'" onmouseout="this.src='../images/hospi/main/main_14.gif'" /></a>
    <ul id="addsub4_left">
<li><IMG SRC="../images/hospi/main/submain_03.gif"   ALT=""></li>
  </ul>
  </li>
  <?php } ?>
  <!-- //사용자 추가 메뉴 그룹4 -->
</ul>
</div>
<div style="height:35px; background-color:#12a3f2;">
</div>

 

두번쨰 메뉴 소스는 요래요

 

   <script type="text/javascript">
    function menu_over(a) {
    var b = a+'sub'
    if(document.getElementById(a).className == 'menu_level_1') {
    document.getElementById('menu1').className = 'menu_level_1';
    document.getElementById('menu2').className = 'menu_level_1';
    document.getElementById('menu3').className = 'menu_level_1';
    document.getElementById('menu4').className = 'menu_level_1';
    document.getElementById('menu5').className = 'menu_level_1';
    document.getElementById('menu6').className = 'menu_level_1';
    document.getElementById(a).className = 'menu_level_1_over';
   
    document.getElementById('menu1sub').className = 'menu_level_2';
    document.getElementById('menu2sub').className = 'menu_level_2';
    document.getElementById('menu3sub').className = 'menu_level_2';
    document.getElementById('menu4sub').className = 'menu_level_2';
    document.getElementById('menu5sub').className = 'menu_level_2';
    document.getElementById('menu6sub').className = 'menu_level_2';
    document.getElementById('menu7sub').className = 'menu_level_2';
    document.getElementById('menu8sub').className = 'menu_level_2';
    document.getElementById(b).className = 'menu_level_2_over';
    }
    }
    <!-- // 메뉴 롤오버 스크립트 -->
    </script>
    <style>
    @font-face {font-family:NanumGothic; src:url(img/NanumGothic.eot);}
   
    body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
    body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
    img,fieldset{border:0}
    ul,ol{list-style:none}
    em,address{font-style:normal}
    a{text-decoration:none}
    a:hover,a:active,a:focus{text-decoration:underline}
   
   
   
   
    .lnb1 {margin:0 auto; 
           background:#12a3f3; border:0px solid #1F68CA; width:989px; height:35px; text-align:left; border-radius: 5px 5px 0 0;
           background:#850909 -webkit-gradient(linear, 0% 0%, 0% 100%,from(#5DA0FA), to(#1F68CA));
           background:#850909 -moz-linear-gradient(top, #5DA0FA, #1F68CA);
           filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#5DA0FA,endColorStr=#1F68CA);
          }
    .lnb2{margin:0 auto; background:#12a3f3; border:0px solid #cccccc; width:989px; height:33px; text-align:left; border-radius: 0 0 0px 0px;}
    .menu_level_1 {color:white; font-family:NanumGothic; Font-weight:500; float:left; padding:0px 0px 0 0px; cursor:pointer;}
    .menu_level_1_over {color:black; font-family:NanumGothic; Font-weight:500; float:left; background:white; border-radius: 0px 0px 0 0; margin:0px 0px 0 0px; padding:0px 0px 0px 0px; cursor:pointer;}
    .menu_level_2 {display:none;}
    .menu_level_2_over {display:block;}
    .menu_level_2_over div {cursor:pointer; padding:0px; font-family:NanumGothic; padding:0px; cursor:pointer; float:left;}
    .menu_level_2_over div:hover {display:block; Font-weight:bold; cursor:pointer;}
    </style>
  </head>
  <body>
  <br />
  <br />
  <br />
  <div class="lnb1" style="clear:both;">
  <div id="menu1" class="menu_level_1_over" onmouseover="menu_over('menu1')"><IMG SRC="../images/hospi/main/main_09.gif" onmouseover="this.src='../images/hospi/main/mainon_09.gif'" onmouseout="this.src='../images/hospi/main/main_09.gif'" /></div>
  <div id="menu2" class="menu_level_1" onmouseover="menu_over('menu2')"><IMG SRC="../images/hospi/main/main_10.gif" onmouseover="this.src='../images/hospi/main/mainon_10.gif'" onmouseout="this.src='../images/hospi/main/main_10.gif'" /></div>
   <div id="menu3" class="menu_level_1" onmouseover="menu_over('menu3')"><IMG SRC="../images/hospi/main/main_11.gif" onmouseover="this.src='../images/hospi/main/mainon_11.gif'" onmouseout="this.src='../images/hospi/main/main_11.gif'" /></div>
   <div id="menu4" class="menu_level_1" onmouseover="menu_over('menu4')"><IMG SRC="../images/hospi/main/main_12.gif" onmouseover="this.src='../images/hospi/main/mainon_12.gif'" onmouseout="this.src='../images/hospi/main/main_12.gif'" /></div>
   <div id="menu5" class="menu_level_1" onmouseover="menu_over('menu5')"><IMG SRC="../images/hospi/main/main_13.gif" onmouseover="this.src='../images/hospi/main/mainon_13.gif'" onmouseout="this.src='../images/hospi/main/main_13.gif'" /></div>
   <div id="menu6" class="menu_level_1" onmouseover="menu_over('menu6')"><IMG SRC="../images/hospi/main/main_14.gif" onmouseover="this.src='../images/hospi/main/mainon_14.gif'" onmouseout="this.src='../images/hospi/main/main_14.gif'" /></div>
 </div>
 <div class="lnb2" style="clear:both;">
  <div id="menu1sub" class="menu_level_2_over">
    <div>메뉴1_서브메뉴1</div>
    <div>서브메뉴2</div>
    <div>서브메뉴3</div>
    <div>서브메뉴4</div>
    <div>서브메뉴5</div>
    <div>서브메뉴6</div>
    <div>서브메뉴7</div>
    <div>서브메뉴8</div>
  </div>
  <div id="menu2sub" class="menu_level_2">
    <div><IMG SRC="../images/hospi/main/submain_03.gif"   ALT=""></div>
  </div>
  <div id="menu3sub" class="menu_level_2">
    <div><IMG SRC="../images/hospi/main/submain_01.gif"   ALT=""></div>
  </div>
        <div id="menu4sub" class="menu_level_2">
    <div><IMG SRC="../images/hospi/main/submain_02.gif"   ALT=""></div>
  </div>
  <div id="menu5sub" class="menu_level_2">
    <div>메뉴5_서브메뉴1</div>
    <div>서브메뉴2</div>
    <div>서브메뉴3</div>
    <div>서브메뉴4</div>
    <div>서브메뉴5</div>
    <div>서브메뉴6</div>
    <div>서브메뉴7</div>
    <div>서브메뉴8</div>
  </div>
  <div id="menu6sub" class="menu_level_2">
    <div>메뉴6_서브메뉴1</div>
    <div>서브메뉴2</div>
    <div>서브메뉴3</div>
    <div>서브메뉴4</div>
    <div>서브메뉴5</div>
    <div>서브메뉴6</div>
    <div>서브메뉴7</div>
    <div>서브메뉴8</div>
  </div>
  <div id="menu7sub" class="menu_level_2">
    <div>메뉴7_서브메뉴1</div>
    <div>서브메뉴2</div>
    <div>서브메뉴3</div>
    <div>서브메뉴4</div>
    <div>서브메뉴5</div>
    <div>서브메뉴6</div>
    <div>서브메뉴7</div>
    <div>서브메뉴8</div>
  </div>
  <div id="menu8sub" class="menu_level_2">
    <div>메뉴8_서브메뉴1</div>
    <div>서브메뉴2</div>
    <div>서브메뉴3</div>
    <div>서브메뉴4</div>
    <div>서브메뉴5</div>
    <div>서브메뉴6</div>
    <div>서브메뉴7</div>
    <div>서브메뉴8</div>
  </div>
 </div>