jquery
서브메뉴
aneyh.c
2012. 2. 17. 17:08
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ko' lang='ko'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title> New Document </title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
</head>
<body>
<style type='text/css'>
.submenu{display:none; width:100px; position:absolute; z-index:100; border:1px solid red; }
</style>
<img src="bg_menu.png" width="880" height="38" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="0,0,49,24" href="#" />
<area shape="rect" coords="50,0,99,24" href="#" />
<area shape="rect" coords="100,-1,149,23" href="#" />
<area shape="rect" coords="148,0,197,24" href="#" />
<area shape="rect" coords="197,-1,246,23" href="#" />
<area shape="rect" coords="245,0,294,24" href="#" />
<area shape="rect" coords="294,1,343,25" href="#" />
<area shape="rect" coords="342,1,391,25" href="#" />
</map>
<div id='menu1' class='submenu'>menu1</div>
<div id='menu2' class='submenu'>menu2</div>
<div id='menu3' class='submenu'>menu3</div>
<div id='menu4' class='submenu'>menu4</div>
<div id='menu5' class='submenu'>menu5</div>
<div id='menu6' class='submenu'>menu6</div>
<div id='menu7' class='submenu'>menu7</div>
<div id='menu8' class='submenu'>menu8</div>
<div style="width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
여기에 내용이 들어갑니다. 여기에 내용이 들어갑니다. 여기에 내용이 들어갑니다. 여기에 내용이 들어갑니다. 여기에 내용이 들어갑니다.
</div>
<!--
white-space:nowrap; 자동줄바꿈 없이 쭉 이어지게 한다.
여기 넣은 이유는.. 말줄임 기능을 보여주기 위해 자동줄바꿈을 막은 것임
-->
<script language='javascript'>
$(document).ready(function(){
var last_id = null;
$('#Map area').mouseover(function(){
if(last_id != null) last_id.hide();
var idx = $('#Map area').index($(this)) + 1;
var coords = $(this).attr('coords').split(',');
if($.browser.msie) coords[0] = 0;
var offset = $(this).offset();
last_id = $('#menu'+idx);
$('#menu'+idx).css({
top : offset.top + $(this).height(),
left : offset.left + parseInt(coords[0], 10)
}).show();
});
$(document).click(function(){
$('.submenu').hide();
});
});
//특히 좌측 위치과 우측 위치가 차이가 나서 그런데
// top : offset.top + $(this).height(),
// left : offset.left + parseInt(coords[0], 10)
//이부분을 적절히 + 혹은 - 해주시면 됩니다.
//ex) top : offset.top + $(this).height() + 30,
</script>
</body>
</html>
