심플한 드롭다운 레이어 메뉴 (2단계 메뉴 구성)
심플한 드롭다운 레이어 메뉴입니다.
(2단계 메뉴 구성)
(예제)
----------------------------- 소스 시작 ---------------------------
<html>
<head>
<title>http://www.jioponti.co.kr</title>
<script type="text/javascript">
var TimeOut = 300;
var currentLayer = null;
var currentitem = null;
var currentLayerNum = 0;
var noClose = 0;
var closeTimer = null;
// Open Hidden Layer
function mopen(n)
{
var l = document.getElementById("menu"+n);
var mm = document.getElementById("mmenu"+n);
if(l)
{
mcancelclosetime();
l.style.visibility='visible';
if(currentLayer && (currentLayerNum != n))
currentLayer.style.visibility='hidden';
currentLayer = l;
currentitem = mm;
currentLayerNum = n;
}
else if(currentLayer)
{
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentitem = null;
currentLayer = null;
}
}
// Turn On Close Timer
function mclosetime()
{
closeTimer = window.setTimeout(mclose, TimeOut);
}
// Cancel Close Timer
function mcancelclosetime()
{
if(closeTimer)
{
window.clearTimeout(closeTimer);
closeTimer = null;
}
}
// Close Showed Layer
function mclose()
{
if(currentLayer && noClose!=1)
{
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentLayer = null;
currentitem = null;
}
else
{
noClose = 0;
}
currentLayer = null;
currentitem = null;
}
// Close Layer Then Click-out
document.onclick = mclose;
</script>
<style>
#dd
{ margin: 0;
padding: 0}
#dd li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#dd li a.menu
{ display: block;
text-align: center;
background: #5970B2;
padding: 4px 10px;
margin: 0 1px 0 0;
color: #FFF;
width: 100px;
text-decoration: none}
#dd li a.menu:hover
{ background: #49A3FF}
.submenu
{ background: #EAEBD8;
border: 1px solid #5970B2;
visibility: hidden;
position: absolute;
z-index: 3}
.submenu a
{ display: block;
font: 11px arial;
text-align: left;
text-decoration: none;
padding: 5px;
color: #2875DE}
.submenu a:hover
{ background: #49A3FF;
color: #FFF}
</style>
</head>
<body>
<ul id="dd">
<li>
<a href="#" class="menu" id="mmenu1" onmouseover="mopen(1);" onmouseout="mclosetime();">Home</a>
<div class="submenu" id="menu1" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
<a href="#">HTML DropDown</a>
<a href="#">DHTML DropDown menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">DropDown Menu</a>
<a href="#">CSS DropDown</a>
</div>
</li>
<li>
<a href="#" class="menu" id="mmenu2" onmouseover="mopen(2);" onmouseout="mclosetime();">Download</a>
<div class="submenu" id="menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX dropdown</a>
<a href="#">DIV dropdown</a>
</div>
</li>
<li><a href="#" class="menu">Order</a></li>
<li><a href="#" class="menu">Help</a></li>
<li><a href="#" class="menu">Contact</a></li>
</ul>
</body>
</html>
----------------------------- 소스 끝 ---------------------------
댓글 2개
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1830 |
갈색야생마
|
17년 전 | 2845 | |
| 1829 |
갈색야생마
|
17년 전 | 1593 | |
| 1828 |
갈색야생마
|
17년 전 | 1351 | |
| 1827 |
갈색야생마
|
17년 전 | 2017 | |
| 1826 |
갈색야생마
|
17년 전 | 1465 | |
| 1825 |
갈색야생마
|
17년 전 | 1406 | |
| 1824 |
갈색야생마
|
17년 전 | 1354 | |
| 1823 |
갈색야생마
|
17년 전 | 1563 | |
| 1822 |
갈색야생마
|
17년 전 | 2049 | |
| 1821 |
갈색야생마
|
17년 전 | 1436 | |
| 1820 |
갈색야생마
|
17년 전 | 1408 | |
| 1819 |
갈색야생마
|
17년 전 | 1212 | |
| 1818 |
갈색야생마
|
17년 전 | 1440 | |
| 1817 |
갈색야생마
|
17년 전 | 1169 | |
| 1816 |
갈색야생마
|
17년 전 | 1301 | |
| 1815 |
갈색야생마
|
17년 전 | 1559 | |
| 1814 |
갈색야생마
|
17년 전 | 1394 | |
| 1813 |
갈색야생마
|
17년 전 | 1294 | |
| 1812 |
갈색야생마
|
17년 전 | 1262 | |
| 1811 |
갈색야생마
|
17년 전 | 1378 | |
| 1810 |
갈색야생마
|
17년 전 | 1154 | |
| 1809 |
갈색야생마
|
17년 전 | 1208 | |
| 1808 |
갈색야생마
|
17년 전 | 1240 | |
| 1807 |
갈색야생마
|
17년 전 | 1313 | |
| 1806 |
갈색야생마
|
17년 전 | 1339 | |
| 1805 |
갈색야생마
|
17년 전 | 1342 | |
| 1804 |
갈색야생마
|
17년 전 | 1305 | |
| 1803 |
갈색야생마
|
17년 전 | 1626 | |
| 1802 | 17년 전 | 2961 | ||
| 1801 | 17년 전 | 3358 | ||
| 1800 | 17년 전 | 1454 | ||
| 1799 | 17년 전 | 1549 | ||
| 1798 | 17년 전 | 1363 | ||
| 1797 | 17년 전 | 2119 | ||
| 1796 | 17년 전 | 3036 | ||
| 1795 | 17년 전 | 1378 | ||
| 1794 | 17년 전 | 1373 | ||
| 1793 |
갈색야생마
|
17년 전 | 1372 | |
| 1792 |
갈색야생마
|
17년 전 | 1221 | |
| 1791 |
갈색야생마
|
17년 전 | 1415 | |
| 1790 |
갈색야생마
|
17년 전 | 1474 | |
| 1789 |
갈색야생마
|
17년 전 | 1282 | |
| 1788 |
갈색야생마
|
17년 전 | 2565 | |
| 1787 |
갈색야생마
|
17년 전 | 1313 | |
| 1786 |
갈색야생마
|
17년 전 | 1589 | |
| 1785 |
갈색야생마
|
17년 전 | 1461 | |
| 1784 |
갈색야생마
|
17년 전 | 1771 | |
| 1783 |
갈색야생마
|
17년 전 | 1795 | |
| 1782 | 17년 전 | 1806 | ||
| 1781 | 17년 전 | 1851 | ||
| 1780 | 17년 전 | 1512 | ||
| 1779 | 17년 전 | 1603 | ||
| 1778 |
갈색야생마
|
17년 전 | 1513 | |
| 1777 |
갈색야생마
|
17년 전 | 1861 | |
| 1776 |
갈색야생마
|
17년 전 | 1766 | |
| 1775 |
갈색야생마
|
17년 전 | 1561 | |
| 1774 |
갈색야생마
|
17년 전 | 1740 | |
| 1773 |
갈색야생마
|
17년 전 | 1408 | |
| 1772 |
갈색야생마
|
17년 전 | 1639 | |
| 1771 |
갈색야생마
|
17년 전 | 1960 | |
| 1770 |
갈색야생마
|
17년 전 | 2790 | |
| 1769 | 17년 전 | 1997 | ||
| 1768 | 17년 전 | 1409 | ||
| 1767 | 17년 전 | 1950 | ||
| 1766 | 17년 전 | 2404 | ||
| 1765 | 17년 전 | 1561 | ||
| 1764 | 17년 전 | 2325 | ||
| 1763 |
sini117
|
17년 전 | 1761 | |
| 1762 |
sini117
|
17년 전 | 1466 | |
| 1761 |
nooree
|
17년 전 | 1323 | |
| 1760 | 17년 전 | 1994 | ||
| 1759 | 17년 전 | 2884 | ||
| 1758 | 17년 전 | 2503 | ||
| 1757 | 17년 전 | 1529 | ||
| 1756 | 17년 전 | 2874 | ||
| 1755 | 17년 전 | 2409 | ||
| 1754 | 17년 전 | 2754 | ||
| 1753 | 17년 전 | 2766 | ||
| 1752 | 17년 전 | 2554 | ||
| 1751 | 17년 전 | 2368 | ||
| 1750 | 17년 전 | 1725 | ||
| 1749 | 17년 전 | 2459 | ||
| 1748 | 17년 전 | 3959 | ||
| 1747 |
|
17년 전 | 1837 | |
| 1746 | 17년 전 | 3923 | ||
| 1745 | 17년 전 | 1851 | ||
| 1744 | 17년 전 | 1739 | ||
| 1743 | 17년 전 | 2070 | ||
| 1742 | 17년 전 | 2485 | ||
| 1741 | 17년 전 | 1440 | ||
| 1740 | 17년 전 | 1777 | ||
| 1739 | 17년 전 | 2335 | ||
| 1738 | 17년 전 | 1811 | ||
| 1737 | 17년 전 | 1768 | ||
| 1736 | 17년 전 | 1545 | ||
| 1735 | 17년 전 | 1387 | ||
| 1734 | 17년 전 | 1345 | ||
| 1733 | 17년 전 | 1163 | ||
| 1732 | 17년 전 | 1151 | ||
| 1731 | 17년 전 | 1178 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기