HTML + CSS/JQuery

JQuery - 메뉴바 나오게 하기

초코렛맛 2024. 7. 10. 11:20

■  메뉴바 나오기

<style>
   a{
    text-decoration: none;
    color: inherit;
    }
    li{
        width: 100px;
        background-color: beige;
        width: 100px;
        height: 50px;
        align-content: center;     
    }
    .menu{
        text-align: center;
    }
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
    } 
    .menu > ul{
        display: flex;
    }
    .menu> ul>li{
        position: relative;
    }
    .menu > ul > li > ul{
        position: absolute;
        display: none;
        left: 0;
        top: 100%;
    }
</style>

<body>
    <nav class="menu">
        <ul>
            <li>
                <a href="#">1메뉴 1</a>
                <ul>
                    <li><a href="">2메뉴 1</a></li>
                    <li><a href="">2메뉴 2</a></li>
                    <li><a href="">2메뉴 3</a></li>                    
                </ul>
            </li>
            <li>
                <a href="#">1메뉴 2</a>
                <ul>
                    <li><a href="">2메뉴 1</a></li>
                    <li><a href="">2메뉴 2</a></li>
                    <li><a href="">2메뉴 3</a></li>                    
                </ul>
            </li>
            <li>
                <a href="#">1메뉴 3</a>
                <ul>
                    <li><a href="">2메뉴 1</a></li>
                    <li><a href="">2메뉴 2</a></li>
                    <li><a href="">2메뉴 3</a></li>  
                </ul>
            </li>

        </ul>
    </nav>
    


    <script>
        $(".menu > ul >li").mouseover(
            function(){
                $(this).find("ul").stop().slideDown(200);
            }
        ).mouseout(
            function(){
                $(this).find("ul").stop().slideUp(200)
            }
        );

    </script>
</body>

 

○ 자식이 아닌것 나오게 하기

<style>
    *{
        text-align: center;
    }
   a{
    text-decoration: none;
    color: inherit;
    }
    li{
        width: 100px;
        background-color: beige;
        width: 100px;
        height: 50px;
        align-content: center;
    }
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
    } 
    .menu > ul{
        display: flex;
    }
    .in{
        display: flex;
        position: relative;
    }
    .in > ul{
        display: none;
        position: absolute;
        left: 0%;
        top: 0%;
    }
</style>

<body>
    <nav class="menu">
        <ul>
            <li>
                <a href="#">1메뉴 1</a>
            </li>
            <li>
                <a href="#">1메뉴 2</a>
            </li>
            <li>
                <a href="#">1메뉴 3</a>

            </li>

        </ul>
    </nav>
    <div class="in">
        <ul class="in0">
            <li><a href="">1-1</a></li>
            <li><a href="">1-2</a></li>
            <li><a href="">1-3</a></li>                    
        </ul>
        <ul class="in1">
            <li><a href="">2-1</a></li>
            <li><a href="">2-2</a></li>
            <li><a href="">2-3</a></li>                    
        </ul>
        <ul class="in2">
            <li><a href="">3-1</a></li>
            <li><a href="">3-2</a></li>
            <li><a href="">3-3</a></li>  
        </ul>
    </div>
    


    <script>
        $(".menu > ul >li").mouseover(
            function(){
                $(".in"+$(this).index()).stop().slideDown(200);
                $(".in"+$(this).index()).css("display","flex");
            }
        ).mouseout(
            function(){
                $(".in"+$(this).index()).stop().slideUp(200)
            }
        );

    </script>

 

 

 

■  메뉴바 모두 나오게 하기

<style>
    a{
        text-decoration: none;
    }
    li{
        width: 100px;
        padding: 10px 0px;
    }
    .menu{
        text-align: center;
    }
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
    } 
    .menu > ul{
        display: flex;
        width: 100%;
        justify-content: center;
        background-color: aqua;
    }
    .menu> ul>li{
        position: relative;
    }
    .menu > ul > li > ul{
        margin-top: 30px;
        position: relative;
        display: none;
        
    }
 </style>
<body>
    <nav class="menu">
        <ul>
            <li>
                <a href="#">1메뉴 1</a>
                <ul>
                    <li><a href="">2메뉴 1</a></li>
                    <li><a href="">2메뉴 2</a></li>
                    <li><a href="">2메뉴 3</a></li>                    
                </ul>
            </li>
            <li>
                <a href="#">1메뉴 2</a>
                <ul>
                    <li><a href="">2메뉴 1</a></li>
                    <li><a href="">2메뉴 2</a></li>
                    <li><a href="">2메뉴 3</a></li>                    
                </ul>
            </li>
            <li>
                <a href="#">1메뉴 3</a>
                <ul>
                    <li><a href="">2메뉴 1</a></li>
                    <li><a href="">2메뉴 2</a></li>
                    <li><a href="">2메뉴 3</a></li>  
                </ul>
            </li>

        </ul>
    </nav>
    


    <script>
        $(".menu > ul >li").mouseover(
            function(){
                $("ul > li > ul").stop().slideDown(200);
            }
        ).mouseout(
            function(){
                $("ul > li > ul").stop().slideUp(200)
            }
        );

    </script>
</body>