브라우저 제목

드롭다운 메뉴 적용 예

개별 드롭다운

http://comlearn.co.kr/ex/drop1.html

구조)

<header class="header">
        <div class="logo-nav">
            <h1 class="logo">
                <a href="index.html">
                    <img src="images/logo.png" alt="로고">
                </a>
            </h1>
            <nav class="nav">
                <ul class="main-nav">
                    <li><a href="#">nav-1</a>
                        
<ul class="drop-down">
                            <li><a href="#">nav1-1</a></li>
                            <li><a href="#">nav1-2</a></li>
                            <li><a href="#">nav1-3</a></li>
                        </ul>

                    
                    </li>

                    <li><a href="#">nav-2</a>
                        <ul class="drop-down">
                            <li><a href="#">nav2-1</a></li>
                            <li><a href="#">nav2-2</a></li>
                            <li><a href="#">nav2-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">nav-3</a>
                        <ul class="drop-down">
                            <li><a href="#">nav3-1</a></li>
                            <li><a href="#">nav3-2</a></li>
                            <li><a href="#">nav3-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">nav-4</a>
                        <ul class="drop-down">
                            <li><a href="#">nav4-1</a></li>
                            <li><a href="#">nav4-2</a></li>
                            <li><a href="#">nav4-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">nav-5</a>
                        <ul class="drop-down">
                            <li><a href="#">nav5-1</a></li>
                            <li><a href="#">nav5-2</a></li>
                            <li><a href="#">nav5-3</a></li>
                        </ul>
                    </li>
                </ul>
                
            </nav>
        </div>
        
    </header>

그룹 드롭다운1

http://comlearn.co.kr/ex/drop2.html

구조)

<nav class="nav">
                <ul class="main-nav">
                    <li><a href="#">nav-1</a>
                        <div class="drop-down-wrap">
                            <ul class="drop-down">
                                <li>네비1-1</li>
                                <li><a href="#">nav1-1</a></li>
                                <li><a href="#">nav1-2</a></li>
                                <li><a href="#">nav1-3</a></li>
                            </ul>
                            <ul class="drop-down">
                                <li>네비1-2</li>
                                <li><a href="#">nav1-1</a></li>
                                <li><a href="#">nav1-2</a></li>
                                <li><a href="#">nav1-3</a></li>
                            </ul>
                            <ul class="drop-down">
                                <li>네비1-3</li>
                                <li><a href="#">nav1-1</a></li>
                                <li><a href="#">nav1-2</a></li>
                                <li><a href="#">nav1-3</a></li>
                            </ul>
                            <ul class="drop-down">
                                <li>네비1-4</li>
                                <li><a href="#">nav1-1</a></li>
                                <li><a href="#">nav1-2</a></li>
                                <li><a href="#">nav1-3</a></li>
                            </ul>
                            <ul class="drop-down">
                                <li>네비1-5</li>
                                <li><a href="#">nav1-1</a></li>
                                <li><a href="#">nav1-2</a></li>
                                <li><a href="#">nav1-3</a></li>
                            </ul>
                        </div>

                    
                    </li>
                    <li><a href="#">nav-2</a>
                        <div class="drop-down-wrap">
                            <ul class="drop-down">
                                <li>네비2-1</li>
                                <li><a href="#">nav2-1</a></li>
                                <li><a href="#">nav2-2</a></li>
                                <li><a href="#">nav2-3</a></li>
                            </ul>
                            <ul class="drop-down">
                                <li>네비2-2</li>
                                <li><a href="#">nav2-1</a></li>
                                <li><a href="#">nav2-2</a></li>
                                <li><a href="#">nav2-3</a></li>
                            </ul>
                            <ul class="drop-down">
                                <li>네비2-3</li>
                                <li><a href="#">nav2-1</a></li>
                                <li><a href="#">nav2-2</a></li>
                                <li><a href="#">nav2-3</a></li>
                            </ul>
                            <ul class="drop-down">
                                <li>네비2-4</li>
                                <li><a href="#">nav2-1</a></li>
                                <li><a href="#">nav2-2</a></li>
                                <li><a href="#">nav2-3</a></li>
                            </ul>
                            <ul class="drop-down">
                                <li>네비2-5</li>
                                <li><a href="#">nav1-1</a></li>
                                <li><a href="#">nav1-2</a></li>
                                <li><a href="#">nav1-3</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">nav-3</a>
                        
                    </li>
                    <li><a href="#">nav-4</a>
                        
                    </li>
                    <li><a href="#">nav-5</a>
                        
                    </li>
                </ul>
                
            </nav>

 

그룹 드롭다운2

http://comlearn.co.kr/ex/drop3.html

 

그룹 드롭다운3, jquery

http://comlearn.co.kr/ex/drop4.html

구조)

<nav class="nav">
                <ul class="main-nav">
                    <li><a href="#">nav-1</a>
                        
                    </li>
                    <li><a href="#">nav-2</a>
                        
                    </li>
                    <li><a href="#">nav-3</a>
                        
                    </li>
                    <li><a href="#">nav-4</a>
                        
                    </li>
                    <li><a href="#">nav-5</a>
                        
                    </li>
                </ul>

                <div class="drop-nav">
                    <div class="drop-down-wrap">
                        <ul class="drop-down">
                            <li>네비1-1</li>
                            <li><a href="#">nav1-1</a></li>
                            <li><a href="#">nav1-2</a></li>
                            <li><a href="#">nav1-3</a></li>
                        </ul>
                        <ul class="drop-down">
                            <li>네비2-1</li>
                            <li><a href="#">nav2-1</a></li>
                            <li><a href="#">nav2-2</a></li>
                            <li><a href="#">nav2-3</a></li>
                        </ul>
                        <ul class="drop-down">
                            <li>네비3-1</li>
                            <li><a href="#">nav3-1</a></li>
                            <li><a href="#">nav3-2</a></li>
                            <li><a href="#">nav3-3</a></li>
                        </ul>
                        <ul class="drop-down">
                            <li>네비4-1</li>
                            <li><a href="#">nav4-1</a></li>
                            <li><a href="#">nav4-2</a></li>
                            <li><a href="#">nav4-3</a></li>
                        </ul>
                        <ul class="drop-down">
                            <li>네비5-1</li>
                            <li><a href="#">nav5-1</a></li>
                            <li><a href="#">nav5-2</a></li>
                            <li><a href="#">nav5-3</a></li>
                        </ul>
                    </div>
                </div>

            </nav>

 

css

.nav{
        width:85%;
        height:80%;
        border:1px solid black;
        float:left;
        
        top:10%;
    }
    .main-nav{
        list-style:none;
        margin:0;
        padding:0;
        width:100%;
        height:100%;
         text-align:center; 
        /*inline의 요소를 가운데 정렬 */
        /*display:flex;
        justify-content:center;
        */
        /*display:table; */
        
    }
    .main-nav>li{
        width:17%;
        background:transparent;
        display:inline-block;
        height:70%;
        margin-top:15px;
    /*    position:relative; */
        
    }
    .main-nav>li>a{
        height:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        background:darkred;
        color:white;
        font-weight:bold;
        transition:0.5s;
        
        
    }
    .main-nav>li>a:hover{
        background:red;
        box-shadow:2px 2px 2px black;
        text-shadow:0px 0px 5px black;
    }
    .drop-nav{
        position:absolute;
        top:72px; left:100px;
        background:white;
        width:85%;
        display:none;
        text-align:center;
        z-index:999999;
    }
    .drop-down-wrap{
        display:inline-block; 
        width:100%;
    
    }
ul.drop-down{
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
    top:0;
    left:0;
    width:17%;
    height:auto;
    background:transparent;
    top:20px;
    padding-top:0;
    display:inline-block;
}
.drop-down>li{
    width:100%;
    
}

.drop-down>li>a{
    background:orange;
    padding:10px 10px;
    display:block; 
    /* inline | block | none | table | table-cell | flex | inline-block*/
    /* 글자     박스    숨김   테이블   셀        정렬   글자 취급과 박스*/
    border-bottom:1px dotted black;
}
.drop-down>li:last-child >a{
    border-bottom:none;
}
.drop-down>li:first-child{
    background:white;
    padding:15px 0;
}

.main-nav>li:hover .drop-down-wrap{
    display:block;
    
}

 

jquery

$(document).mouseover(function(event){
        if($(event.target).parents(".nav").length==0){
            $(".drop-nav").hide();
        }
    });
    $(".main-nav>li").each(function(index){
        
        $(this).mouseenter(
            function(){
                $(".drop-down>li>a").css({
                    background:"orange"
                });
                console.log(index);
                $(".drop-nav").show();
                $(".drop-down").eq(index).find("a").css({
                    background:"red"
                });        
        });
    
    });
    $(".drop-down").each(function(index){
    
        $(this).hover(
            function(){
                
                $("a",this).css({background:"red"});
            },
            function(){
                $(".drop-down>li>a").css({
                    background:"orange"
                });
            }
        
        );
    });

제목 날짜
html css정리는 http://comlearn.co.kr/html_css 게시판에 내용 업로드 됩니다. 2019.02.13
57일차 - 데스크탑, 모바일 구분 접속 2019.02.11
55~56일차 24시 팝업 2019.02.09
54일차 - Dates 2019.02.07
53일차 select family 사이트 2019.02.04
52일차 form작성 방법 2019.01.27
51일차 모바일에서 nav처리방법 media query 작성, footer처리 방법, 높이 자동조절 file 2019.01.27
50일차 드롭다운 메뉴 file 2019.01.27
49일차 팝업, 3초에 닫히는 팝업 2019.01.26
48일차 webfont적용 2019.01.25
46일차 탭 2019.01.22
45일차 swiper에서 애니메이션 2019.01.22
44일차 일반 휠이벤트 정리 2019.01.21
43일차 attr매서드 스트링 slice() 2019.01.17
42일차 휠 애니메이션 2019.01.16
40일~41일차 2019.01.16
38-39일차 애니메이션 2019.01.15
38-39일차 애니메이션 2019.01.15
37일차 특정위치에서 애니메이션 2019.01.11
48일차 네비 스크롤 애니메이션 file 2019.01.09
태그 목록