가로 메뉴

saichoi·2021년 11월 23일
1

WebDesignLibrary

목록 보기
7/10

메뉴랩 만들기

<!doctype html>

<html>
	<head>
		<title>Page Title</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0">
		
	<style>
        
        *{margin:0; padding:0;}
        ul,li{list-style: none;}
        a{text-decoration: none; color:black;}
        
        #menu_wrap{
            width: 1000px;
            height: 100px;
            border: 10px solid black;
            margin:0 auto;
        }
        
        .top_menu{
            width: 250px;
            height: 100px;
            float: left;
            background-color: gold;
            font:22px/100px '';
            text-align: center;
            
            transition-duration: 0.5s;
        }
        
        .sub_menu{
            width: 100%;
            height: 0px;
            /*=>1.일단 높이값을 잡아준다*/
            background-color: greenyellow;
            
            overflow: hidden;
            /*=>2.자식들을 숨겨준준다*/
            
            transition-duration: 0.5s;
            /*=>4.서브메뉴 움직임을 부드럽게 만들어준다*/
        }
        
        .sub_menu>li{
            width:100%;
            height: 100px;
            border-bottom: 1px solid gray;
            box-sizing: border-box;
            font-size: 16px;
            
            transition-duration: 0.5s;
            
            
        }
        
        .top_menu:hover{
            background-color: olive;    
        }
        
        .sub_menu>li:hover{
            background-color: yellow;
        }
        
        
        /*3.탑메뉴에 마우스 올리면 서브메뉴의 높이 값을 넣어준다*/
        .top_menu:hover>.sub_menu{
            height: 300px;
        }
        
        
        
    </style>	
		
	</head>

	<body>
	
	    <ul id="menu_wrap">
        <li class="top_menu">
            <a href="#">메뉴1</a>
            <!--=>여기까지가 상위메뉴-->
            
            <!--=>여기부터 하위메뉴-->
            <ul class="sub_menu">
                <li><a href="#">하위메뉴</a></li>
                <li><a href="#">하위메뉴</a></li>
                <li><a href="#">하위메뉴</a></li>
            </ul>
            
        </li>
        
        <li class="top_menu">
            <a href="#">메뉴2</a>
            <!--=>여기까지가 상위메뉴-->
            
            <!--=>여기부터 하위메뉴-->
            <ul class="sub_menu">
                <li><a href="#">하위메뉴</a></li>
                <li><a href="#">하위메뉴</a></li>
                <li><a href="#">하위메뉴</a></li>
            </ul>
            
        </li>
        
        <li class="top_menu">
            <a href="#">메뉴3</a>
            <!--=>여기까지가 상위메뉴-->
            
            <!--=>여기부터 하위메뉴-->
            <ul class="sub_menu">
                <li><a href="#">하위메뉴</a></li>
                <li><a href="#">하위메뉴</a></li>
                <li><a href="#">하위메뉴</a></li>
            </ul>
            
        </li>
        
        <li class="top_menu">
            <a href="#">메뉴4</a>
            <!--=>여기까지가 상위메뉴-->
            
            <!--=>여기부터 하위메뉴-->
            <ul class="sub_menu">
                <li><a href="#">하위메뉴</a></li>
                <li><a href="#">하위메뉴</a></li>
                <li><a href="#">하위메뉴</a></li>
            </ul>
            
        </li>
    </ul>
    

	</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">
 
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
    <title>Document</title>

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        ul,li{
            list-style: none;
        }

        a{
            text-decoration: none;
            color: #000;
        }

        header{
            width: 100%;
            height: 80px;
            background-color:  lightgray;
            float: left;
        }

        .in-header{
            width: 80vw;
            height: 50px;
            background-color: lightblue;
            margin: 15px auto;
        }

        .logo{
            width: 15%;
            height: 100%;
            background-color: crimson;
            float: left;
            text-align: center;
            line-height: 50px;
            color: #fff;
            font-size: 30px;
        }
        
        .menu-wrap{
            width: 60%;
            height: 50px;
            background-color: teal;
            float: left;
            text-align: center;
           
        }
        
        .top-menu{
            width: 20%;
            height: 50px;
            float: left;
            background-color: cadetblue;
            line-height: 50px;
            transition-duration: 0.5s;
        }

        .sub-menu{
            width: 100%;
            height: 0px;
            background-color: gray;
            overflow: hidden;
            transition-duration: 0.5s;
        }

        .sub-menu>li{
            width: 100%;
            height: 50px;
            float: left;
            background-color: salmon;
            transition-duration: 0.5s;
        }

        .top-menu:hover>.sub-menu{
            height: 150px;
        }


        .side-menu{
            width: 25%;
            height: 100%;
            background-color: gold;
            float: right;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }

        .side-menu>li{
            width: 50%;
            height: 100%;
            background: pink;
            float: left;
        }




    </style>

    <script>

        // $('html').click(function(){
        //     $(this).css({
        //         backgroundColor:'pink'
        //     });
        // });

        // $('.top-menu').eq(0).hover(function(){
        //     $('.sub-menu').eq(0).css({
        //         height:'150px'
        //     });
        // });

    </script>
</head>
<body>
    <header>

        <div class="in-header">
            <div class="logo">logo</div>
            <ul class="menu-wrap">
                <li class="top-menu">menu

                    <ul class="sub-menu">
                        <li>sub</li>
                        <li>sub</li>
                        <li>sub</li>
                    </ul>
                    <!-- sub-menu end -->

                </li>
                <!-- top-menu end -->

                <li class="top-menu">menu

                    <ul class="sub-menu">
                        <li>sub</li>
                        <li>sub</li>
                        <li>sub</li>
                    </ul>
                    <!-- sub-menu end -->

                </li>
                <!-- top-menu end -->

                <li class="top-menu">menu

                    <ul class="sub-menu">
                        <li>sub</li>
                        <li>sub</li>
                        <li>sub</li>
                    </ul>
                    <!-- sub-menu end -->

                </li>
                <!-- top-menu end -->

                <li class="top-menu">menu

                    <ul class="sub-menu">
                        <li>sub</li>
                        <li>sub</li>
                        <li>sub</li>
                    </ul>
                    <!-- sub-menu end -->

                </li>
                <!-- top-menu end -->

                <li class="top-menu">menu

                    <ul class="sub-menu">
                        <li>sub</li>
                        <li>sub</li>
                        <li>sub</li>
                    </ul>
                    <!-- sub-menu end -->

                </li>
                <!-- top-menu end -->

                </li>
                <!-- top-menu end -->

            </ul>
            <!-- menu-wrap end -->

            <ul class="side-menu">
                <li>side1</li>
                <li>side2</li>
            </ul>
        </div>
        <!-- in-header end -->

    </header>
    <!-- header end -->

    

</body>
</html>
profile
코딩 기록 블로그

0개의 댓글