Jam's story

[css] nav 열고 닫기 + transition+ js+jquery 본문

WEB/CSS

[css] nav 열고 닫기 + transition+ js+jquery

애플쩀 2022. 5. 25. 10:41

자바스크립트 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#main{
            padding: 16px;
            
        }
        .sidenav{
            background-color: #111;
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            
            /*옆으로 숨기기위해 */
            width: 0;
            overflow-x:hidden ;
           transition: 0.3s ease;
        }
        .sidenav a{

            display: block;
            text-decoration: none;
            font-size: 25px;
            padding: 8px 8px 8px 25px;
            color: #818181;
            transition: 0.3s ease;
        }
        .sidenav a:hover{
            color:#f1f1f1;
        }
        body{
            transition: 0.3s ease;
        }
    </style>
</head>
<body>
    <div id="mySidenav" class="sidenav">
        <a href="#" class="closebtn"id="closebtn"onclick="closeNav()">&times;</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
    </div>

    <div id="main">
        <h2>Lorem, ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores vitae reiciendis aut repellendus voluptatum sed nobis pariatur! Facere, pariatur magni.</p>
        <span style="cursor: pointer;font: size 30px;"onclick="openNav()">&#9776</span>
    </div>
<script>
function openNav(){
    document.getElementById("mySidenav").style.width="250px";
    document.getElementById("main").style.marginLeft="250px";
    document.body.style.backgroundColor="rgba(0,0,0,0.4)";
}
function closeNav(){
    document.getElementById("mySidenav").style.width="0px";
    document.getElementById("main").style.marginLeft="0px";
    document.body.style.backgroundColor="rgba(0,0,0,0)";
}
</script>    
</body>
</html>

 

제이쿼리 

    <script>


        $("#open-button").click(function (event) {

            $("#mySidenav").css("width", "250px");
            $("#main").css("margin-left", "250px");
            /*  $("body").css("opacity","0,4"); */
        });
     
        $("#mySidenav .closebtn").click(function (event) {
            alert("xx");
            $("#mySidenav").css("width", "0");
            $("#main").css("margin-left", "0");
            /* $(this).parents("div")  .css("width", "0"); */

            // body 배경색을 흰색을 설정
            $("body").css("background-color", "white");
        });
    </script>

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 타임라인  (0) 2022.05.25
[CSS] DropDown  (0) 2022.05.25
[CSS] 의사요소  (0) 2022.05.24
[CSS] 의사클래스 종류  (0) 2022.05.24
[CSS]:first(last)-child 의 정확한 의미  (0) 2022.05.24
'WEB/CSS' Related Articles more
Comments