상단 주메뉴 - 하위드롭 > SCRIPT

본문 바로가기
사이트 내 전체검색

SCRIPT

상단 주메뉴 - 하위드롭

페이지 정보

profile_image
작성자 관리자
댓글 0건 조회 246회 작성일 21-03-10 15:38

본문

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>

<style type="text/css">
/* menu styles */

#jsddm { 
 margin: 0;
 padding: 0;
}

#jsddm li { 
 float: left;
 list-style: none;
}

#jsddm li a {
 display: block;
/*
 text-decoration: none;
 white-space: nowrap;
*/ 
}

#jsddm li a:hover { 
/* 
 background: #24313C;
*/
}
  
#jsddm li ul { 
 margin: 0;
 padding: 0;
 position: absolute;
 visibility: hidden;
}
  
#jsddm li ul li {
 float: none;
 display: inline;
}
   
#jsddm li ul li a {
 font-size: 12px;
 width: auto;
 padding: 2px 20px;
 color: #24313C;
}
   
#jsddm li ul li a:hover { 
 background: #8EA344;
}
</style>


<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout         = 500;
var closetimer  = 0;
var ddmenuitem      = 0;

function jsddm_open()
{ jsddm_canceltimer();
 jsddm_close();
 ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
 { window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
 $('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
</script>

<ul id="jsddm">
 <li><a href="#"><img src="./images/menu_02.jpg"></a>
  <ul>
   <li><a href="#">회사소개</a></li>
   <li><a href="#">연혁</a></li>
   <li><a href="#">찾아오시는 길</a></li>
  </ul>
 </li>
 <li><a href="#"><img src="./images/menu_03.jpg"></a>
  <ul>
   <li><a href="#">제품1</a></li>
   <li><a href="#">제품2</a></li>
   <li><a href="#">제품3</a></li>
   <li><a href="#">제품4</a></li>
   <li><a href="#">제품5</a></li>
  </ul>
 </li>
 <li>
 <a href="#"><img src="./images/menu_04.jpg"></a>
  <ul>
   <li><a href="#">하위메뉴1</a></li>
  </ul> 
 </li>
 <li>
 <a href="#"><img src="./images/menu_05.jpg"></a>
  <ul>
   <li><a href="#">하위메뉴1</a></li>
  </ul>  
 </li>
 <li><a href="#"><img src="./images/menu_06.jpg"></a></li>
</ul>


 </body>
</html>
 

첨부파일

댓글목록

등록된 댓글이 없습니다.

회원로그인

회원가입

Copyright © neion.co.kr All rights reserved.