Language

카테고리 없음

JQurey - 메뉴 (전체화면 모든메뉴, 각각메뉴)

초코렛맛 2025. 3. 27. 10:34

■ 전체화면 모든메뉴

 

 

<!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>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <style>
        body{
            margin: 0px;
        }

        header{
            height: 100vh;
        }
        header img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 노말라이즈 */
        ul{
            padding: 0;  margin: 0;
            list-style: none;
        }
        a{
            text-decoration: none; color: inherit;
        }
        /* 헤더 메뉴 */
        header{
            position: relative;
        }
        nav{
            position: absolute; left: 0; top: 0;
            z-index: 2;
            width: 100%; height: 50px;
            padding: 0 100px; box-sizing: border-box; 
            display: flex; justify-content: space-between;
            font-weight: 600;
            background-color: #fff;
        }

        

        
        /* 로고 */
        nav .logo{
            width: 100px; height: 100%;
            align-content: center;
        }

        /* 메뉴 */
        nav .menu{
            width: 500px; height: 100%;  
            display: flex;          
        }
        nav .menu > li{
            width: 100%; height: 100%;
            align-content: center;
        }
        nav .menu > li > a{
            display: inline-block;
            width: 100%; height: 100%;
            text-align: center; align-content: center;
            position: relative;
        }
        nav .menu > li:hover > a::after{
            position: absolute;
            content: "";
        }



        /* 서브메뉴 */
        nav .menu > li > .submenu{
            width: 100%; padding: 10px 0;
            color: black; display: none;
        }    
        nav .menu > li > .submenu > li{
            width: 100%; height: 40px;
            text-align: center; align-content: center;
        }    
        /* 메뉴 li 호버시 서브메뉴 */
        nav .menu:hover .submenu{
            display: block;
        }

        /* 서브메뉴 백그라운드 */
        nav .menu > .bg{
            position: absolute; left: 0; top: 100%;
            z-index: -1; display: none;
            width: 100%; height: 300px;
            background-color: #fff;
        }
        /* 메뉴호버시 백그라운드 */
        nav .menu:hover > .bg{
            display: block;
        }

        
        


        /* 아이콘 */
        nav .icon-box{
            width: 100px; height: 100%;
            display: flex;
            justify-content: space-between; align-items: center;
        }
        nav .icon-box .icon{
            width: 10px;
            height: 10px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <header>
            <img src="./header1.jpg" alt="">
            <nav>
                <div class="logo">로고</div>
                <ul class="menu">
                    <li><a href="#">Menu1</a>    
                        <ul class="submenu">
                            <li><a href="#">sub1-1</a></li>
                            <li><a href="#">sub1-2</a></li>
                            <li><a href="#">sub1-3</a></li>
                        </ul>                        
                    </li>
                    <li><a href="#">Menu2</a>    
                        <ul class="submenu">
                            <li><a href="#">sub2-1</a></li>
                            <li><a href="#">sub2-2</a></li>
                            <li><a href="#">sub2-3</a></li>
                        </ul>                        
                    </li>
                    <li><a href="#">Menu3</a>    
                        <ul class="submenu">
                            <li><a href="#">sub3-1</a></li>
                            <li><a href="#">sub3-2</a></li>
                            <li><a href="#">sub3-3</a></li>
                        </ul>                        
                    </li>
                    <li><a href="#">Menu4</a>    
                        <ul class="submenu">
                            <li><a href="#">sub4-1</a></li>
                            <li><a href="#">sub4-2</a></li>
                            <li><a href="#">sub4-3</a></li>
                        </ul>                        
                    </li>
                    <div class="bg"></div>
                </ul>
                <div class="icon-box">
                    <div class="icon"></div>
                    <div class="icon"></div>
                    <div class="icon"></div>
                </div>
            </nav>
            
        </header>
    </div>
    <script>
        $(function(){
            
        });
    </script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

■ 전체화면 각각 메뉴

 

 

<!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>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <style>
        body{
            margin: 0px;
        }

        header{
            height: 100vh;
        }
        header img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 노말라이즈 */
        ul{
            padding: 0;  margin: 0;
            list-style: none;
        }
        a{
            text-decoration: none; color: inherit;
        }
        /* 헤더 메뉴 */
        header{
            position: relative;
        }
        nav{
            position: absolute; left: 0; top: 0;
            z-index: 2;
            width: 100%; height: 50px;
            padding: 0 100px; box-sizing: border-box; 
            display: flex; justify-content: space-between;
            color: #fff; font-weight: 600;
        }

        /* 백그라운드 */
        header .bgb{
            position: absolute; left: 0; top: 0;
            display: none;          
            width: 100%; height: 100%;
            backdrop-filter: blur(5px); /*블러 효과*/
        }
        header .bgb.act{ /* act클래스 추가 되면*/
            display: block;
        }

        /* 네비에서 엑트시 내안에 있는 것 */
        nav.act{
            background-color: #fff;
            color: black;
        }
        nav.act .logo{ /* 네비에서 액트 되면 로고가 */
            color: blue;
        }
        /* 로고 */
        nav .logo{
            width: 100px; height: 100%;
            align-content: center;
        }

        /* 메뉴 */
        nav .menu{
            height: 100%;  
            display: flex;          
        }
        nav .menu > li{
            height: 100%;
            align-content: center; text-align: center;
        }
        nav .menu > li > a{
            --menu-pa : 30px; /*패딩 변수*/
            display: inline-block;
            height: 70%; padding: 0 var(--menu-pa); box-sizing: border-box;
            text-align: center; align-content: center;
            position: relative;
        }
        nav .menu > li:hover > a::after{
            content: "";
            position: absolute; left: var(--menu-pa); top: 100%;
            width: calc(100% - var(--menu-pa)*2); height: 2px; background-color: black;
        }

        /* 서브메뉴 */
        nav .menu > li > .sub-box{
            position: absolute; left: 0; top: 100%;
            width: 100%; height: 600px;
            background-color: #fff;
            z-index: -1; display: none;
            text-align: start;
        }
        
        /* 색비교 */
        nav .menu > li:nth-child(1) > .sub-box{
            background-color: aliceblue;
        }
        nav .menu > li:nth-child(2) > .sub-box{
            background-color: rgb(94, 143, 185);
        }
        nav .menu > li:nth-child(3) > .sub-box{
            background-color: rgb(87, 121, 151);
        }
        nav .menu > li:nth-child(4) > .sub-box{
            background-color: rgb(35, 49, 61);
        }
        
        /* 호버시 행동 */
        nav .menu > li:hover > .sub-box{
            display: block;
        }
        


        /* 아이콘 */
        nav .icon-box{
            width: 100px; height: 100%;
            display: flex;
            justify-content: space-between; align-items: center;
        }
        nav .icon-box .icon{
            width: 10px;
            height: 10px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <header>
            <img src="./header1.jpg" alt="">
            <nav>
                <div class="logo">로고</div>
                <ul class="menu">
                    <li><a href="#">Menu1</a>
                        <div class="sub-box">
                            <ul class="submenu">
                                <li><a href="#">sub1-1</a></li>
                                <li><a href="#">sub1-2</a></li>
                                <li><a href="#">sub1-3</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">Menu2</a>
                        <div class="sub-box">
                            <ul class="submenu">
                                <li><a href="#">sub2-1</a></li>
                                <li><a href="#">sub2-2</a></li>
                                <li><a href="#">sub2-3</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">Menu3</a>
                        <div class="sub-box">
                            <ul class="submenu">
                                <li><a href="#">sub3-1</a></li>
                                <li><a href="#">sub3-2</a></li>
                                <li><a href="#">sub3-3</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">Menu4</a>
                        <div class="sub-box">
                            <ul class="submenu">
                                <li><a href="#">sub4-1</a></li>
                                <li><a href="#">sub4-2</a></li>
                                <li><a href="#">sub4-3</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <div class="icon-box">
                    <div class="icon"></div>
                    <div class="icon"></div>
                    <div class="icon"></div>
                </div>
            </nav>
            <div class="bgb"></div>
        </header>
    </div>
    <script>
        $(function(){
            $("header .menu").hover(function(){
                $("header nav").addClass("act");
                $("header .bgb").addClass("act");
            },function(){
                $("header nav").removeClass("act");
                $("header .bgb").removeClass("act");
            })
        });
    </script>
</body>
</html>

 

 

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

  • 현재글JQurey - 메뉴 (전체화면 모든메뉴, 각각메뉴)

티스토리툴바