카테고리 없음

이벤트

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>

 

'카테고리 없음'의 다른글

  • 현재글이벤트
댓글

티스토리툴바