심플한 드롭다운 레이어 메뉴 (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개
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7430 |
 wooriteam |
10년 전 | 4920 | |
| 7429 | 10년 전 | 1750 | ||
| 7428 |
멋진남자임
|
10년 전 | 1122 | |
| 7427 |
sdflksdj2
|
11년 전 | 785 | |
| 7426 | 11년 전 | 1326 | ||
| 7425 | 11년 전 | 1353 | ||
| 7424 | 11년 전 | 1020 | ||
| 7423 |
SeungYeon
|
11년 전 | 533 | |
| 7422 | 11년 전 | 777 | ||
| 7421 |
sdflksdj2
|
11년 전 | 654 | |
| 7420 | 11년 전 | 941 | ||
| 7419 |
 Terrorboy |
11년 전 | 1361 | |
| 7418 |
멋진남자임
|
11년 전 | 1376 | |
| 7417 | 11년 전 | 571 | ||
| 7416 |
senseme
|
11년 전 | 1191 | |
| 7415 | 11년 전 | 936 | ||
| 7414 | 11년 전 | 688 | ||
| 7413 | 11년 전 | 4817 | ||
| 7412 | 11년 전 | 4388 | ||
| 7411 |
holla
|
11년 전 | 869 | |
| 7410 | 11년 전 | 4213 | ||
| 7409 | 11년 전 | 3895 | ||
| 7408 | 11년 전 | 4249 | ||
| 7407 | 11년 전 | 5030 | ||
| 7406 | 11년 전 | 4700 | ||
| 7405 | 11년 전 | 4255 | ||
| 7404 | 11년 전 | 726 | ||
| 7403 | 11년 전 | 5639 | ||
| 7402 | 11년 전 | 1465 | ||
| 7401 |
Terrorboy |
11년 전 | 949 | |
| 7400 | 11년 전 | 2953 | ||
| 7399 |
멋진남자임
|
11년 전 | 880 | |
| 7398 |
파랑새1597
|
11년 전 | 2629 | |
| 7397 | 11년 전 | 2232 | ||
| 7396 |
basketball
|
11년 전 | 1325 | |
| 7395 | 11년 전 | 1570 | ||
| 7394 | 11년 전 | 893 | ||
| 7393 | 11년 전 | 2039 | ||
| 7392 | 11년 전 | 816 | ||
| 7391 |
잘살아보자
|
11년 전 | 5318 | |
| 7390 |
잘살아보자
|
11년 전 | 2187 | |
| 7389 |
잘살아보자
|
11년 전 | 3294 | |
| 7388 |
파랑새1597
|
11년 전 | 896 | |
| 7387 | 11년 전 | 1072 | ||
| 7386 |
프리랜서퍼블리셔
|
11년 전 | 948 | |
| 7385 | 11년 전 | 1549 | ||
| 7384 |
울라라라우
|
11년 전 | 872 | |
| 7383 | 11년 전 | 1518 | ||
| 7382 |
잘살아보자
|
11년 전 | 4198 | |
| 7381 |
잘살아보자
|
11년 전 | 1963 | |
| 7380 |
잘살아보자
|
11년 전 | 1913 | |
| 7379 |
잘살아보자
|
11년 전 | 5876 | |
| 7378 |
senseme
|
11년 전 | 1851 | |
| 7377 |
잘살아보자
|
11년 전 | 2707 | |
| 7376 | 11년 전 | 2361 | ||
| 7375 |
잘살아보자
|
11년 전 | 1020 | |
| 7374 |
잘살아보자
|
11년 전 | 3116 | |
| 7373 |
잘살아보자
|
11년 전 | 2449 | |
| 7372 |
잘살아보자
|
11년 전 | 5816 | |
| 7371 |
잘살아보자
|
11년 전 | 3441 | |
| 7370 |
잘살아보자
|
11년 전 | 1884 | |
| 7369 |
잘살아보자
|
11년 전 | 2144 | |
| 7368 |
ksdhtm56
|
11년 전 | 523 | |
| 7367 | 11년 전 | 1389 | ||
| 7366 | 11년 전 | 903 | ||
| 7365 | 11년 전 | 3507 | ||
| 7364 |
잘살아보자
|
11년 전 | 1357 | |
| 7363 |
잘살아보자
|
11년 전 | 1323 | |
| 7362 |
잘살아보자
|
11년 전 | 1464 | |
| 7361 | 11년 전 | 3567 | ||
| 7360 | 11년 전 | 3529 | ||
| 7359 | 11년 전 | 3357 | ||
| 7358 |
멋진남자임
|
11년 전 | 995 | |
| 7357 | 11년 전 | 3379 | ||
| 7356 | 11년 전 | 2579 | ||
| 7355 | 11년 전 | 3149 | ||
| 7354 |
파랑새1597
|
11년 전 | 623 | |
| 7353 |
잘살아보자
|
11년 전 | 2394 | |
| 7352 |
잘살아보자
|
11년 전 | 2382 | |
| 7351 |
잘살아보자
|
11년 전 | 2459 | |
| 7350 |
잘살아보자
|
11년 전 | 1435 | |
| 7349 |
잘살아보자
|
11년 전 | 1919 | |
| 7348 |
잘살아보자
|
11년 전 | 1238 | |
| 7347 |
잘살아보자
|
11년 전 | 1052 | |
| 7346 |
멋진남자임
|
11년 전 | 1622 | |
| 7345 | 11년 전 | 953 | ||
| 7344 | 11년 전 | 3836 | ||
| 7343 | 11년 전 | 3607 | ||
| 7342 | 11년 전 | 1233 | ||
| 7341 | 11년 전 | 2482 | ||
| 7340 |
 오드리15 |
11년 전 | 899 | |
| 7339 | 11년 전 | 1708 | ||
| 7338 | 11년 전 | 3312 | ||
| 7337 | 11년 전 | 3613 | ||
| 7336 | 11년 전 | 4539 | ||
| 7335 | 11년 전 | 934 | ||
| 7334 | 11년 전 | 1500 | ||
| 7333 | 11년 전 | 2905 | ||
| 7332 |
Terrorboy |
11년 전 | 1074 | |
| 7331 |
KeePin뽁이
|
11년 전 | 1061 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기