카테고리 없음
이벤트
psys
2020. 7. 1. 10:41
728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: inline-block;
}
#id_menu {
width: 100px;
height: 100px;
border: 1px solid rgb(219, 57, 28);
}
</style>
</head>
<body>
<div id="id_menu">
<div>메인메뉴</div> <!-- div는 원래 한줄다차지 -->
<div>
<a href="#">네이버</a><br>
<a href="#">다음</a><br>
<a href="#">넥스트</a><br>
</div>
</div>
</body>
</html>
메인메뉴만 남기고 나머지는 감추기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: inline-block;
}
#id_menu {
width: 100px;
border: 1px solid rgb(219, 57, 28);
}
#id_sub {
display: none;
/* 공간도 차지 안 하고, 보이지도 않음 */
}
</style>
</head>
<body>
<div id="id_menu">
<div>메인메뉴</div> <!-- div는 원래 한줄다차지 -->
<div id="id_sub">
<a href="#">네이버</a><br>
<a href="#">다음</a><br>
<a href="#">넥스트</a><br>
</div>
</div>
</body>
</html>
마우스 올리면 보이게
<div id="id_menu" onmouseover="f_show()">
<div>메인메뉴</div> <!-- div는 원래 한줄다차지 -->
<div id="id_sub">
<a href="#">네이버</a><br>
<a href="#">다음</a><br>
<a href="#">넥스트</a><br>
</div>
</div>
<script>
var v_sub = document.getElementById("id_sub");
function f_show() {
v_sub.style.display = "inline-block";
}
</script>더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: inline-block;
}
#id_menu {
width: 100px;
border: 1px solid rgb(219, 57, 28);
}
#id_sub {
display: none;
/* 공간도 차지 안 하고, 보이지도 않음 */
}
</style>
</head>
<body>
<div id="id_menu" onmouseover="f_show()">
<div>메인메뉴</div> <!-- div는 원래 한줄다차지 -->
<div id="id_sub">
<a href="#">네이버</a><br>
<a href="#">다음</a><br>
<a href="#">넥스트</a><br>
</div>
</div>
<script>
var v_sub = document.getElementById("id_sub");
function f_show() {
v_sub.style.display = "inline-block";
}
</script>
</body>
</html>
마우스 벗어나면 사라지게
<div id="id_menu" onmouseover="f_show()" onmouseout="f_none()">
<div>메인메뉴</div> <!-- div는 원래 한줄다차지 -->
<div id="id_sub">
<a href="#">네이버</a><br>
<a href="#">다음</a><br>
<a href="#">넥스트</a><br>
</div>
</div>
<script>
var v_sub = document.getElementById("id_sub");
function f_show() {
v_sub.style.display = "inline-block";
}
function f_none() {
v_sub.style.display = "none";
}
</script>더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: inline-block;
}
#id_menu {
width: 100px;
border: 1px solid rgb(219, 57, 28);
}
#id_sub {
display: none;
/* 공간도 차지 안 하고, 보이지도 않음 */
}
</style>
</head>
<body>
<div id="id_menu" onmouseover="f_show()" onmouseout="f_none()">
<div>메인메뉴</div> <!-- div는 원래 한줄다차지 -->
<div id="id_sub">
<a href="#">네이버</a><br>
<a href="#">다음</a><br>
<a href="#">넥스트</a><br>
</div>
</div>
<script>
var v_sub = document.getElementById("id_sub");
function f_show() {
v_sub.style.display = "inline-block";
}
function f_none() {
v_sub.style.display = "none";
}
</script>
</body>
</html> |
 |
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: inline-block;
}
#id_menu,
#id_menu2 {
width: 100px;
border: 1px solid rgb(219, 57, 28);
}
#id_sub,
#id_sub2 {
display: none;
/* 공간도 차지 안 하고, 보이지도 않음 */
}
</style>
</head>
<body>
<div id="id_menu" onmouseover="f_show()" onmouseout="f_none()">
<div>메인메뉴</div> <!-- div는 원래 한줄다차지 -->
<div id="id_sub">
<a href="#">네이버</a><br>
<a href="#">다음</a><br>
<a href="#">넥스트</a><br>
</div>
</div>
<div id="id_menu2" onmousedown="f_down()">
<div>메인메뉴2</div>
<div id="id_sub2">
<a href="#">네이버</a><br>
<a href="#">다음</a><br>
<a href="#">넥스트</a><br>
</div>
</div>
<script>
var v_sub = document.getElementById("id_sub");
var v_sub2 = document.getElementById("id_sub2");
var flag = false;//현재 안 보이고있으므로 false
function f_down() {
//alert(event.button);//왼쪽:0 가운데:1 오른쪽:2
if (event.button == 0) {
if (!flag) {
v_sub2.style.display = "inline-block";
flag = true;
} else {
v_sub2.style.display = "none";
flag = false;
}
}
}
function f_show() {
v_sub.style.display = "inline-block";
}
function f_none() {
v_sub.style.display = "none";
}
</script>
</body>
</html>