브라우저 제목

http://comlearn.co.kr/project1/full1.html

full drop-down

html

<header class="pc-header">
                    <h1 class="logo"><a href="#"><img src="images/logo.png"> </a></h1>
                    <div class="search">
                        <button class="sbt">
                            <img src="images/search.png">
                        </button>
                        <form action="" class="form-wrap">
                            
                            <input type="submit" name="sbt" value="">
                            <input type="text" name="search" placeholder="검색하세요 ">
                        </form>
                        
                    </div>
                    <div class="nav-full">
                        <nav class="main-nav">
                        <ul>
                            <li><a href="#s0">네비게이션1</a></li>
                            <li><a href="#s1">네비게이션2</a></li>
                            <li><a href="#s2">네비게이션3</a></li>
                            <li><a href="#">네비게이션4</a></li>
                            <li><a href="#">네비게이션5</a></li>
                            <li><a href="#">네비게이션6</a></li>
                        </ul>
                        <div class="drop-nav">
                            <ul>
                                <li>
                                    <ul class="drop-list">
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="drop-list">
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="drop-list">
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="drop-list">
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="drop-list">
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="drop-list">
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                        <li><a href="#"><span>네비1-1</span></a></li>
                                    </ul>
                                </li>

                            </ul>
                        </div>
                        
                    </nav>
                    </div>
                </header>

 

css

.pc-header{
    width:100%;
    max-width:1600px;   
    height:100%;
    border:1px solid black;
    margin:auto;
    position:relative;
    z-index:99999;
}

 

.drop-nav{
    position:absolute;
    width:100%;
    left:0;
    display:flex;
    justify-content: center;
    background-color:cadetblue;
    display:none;
    
}
.drop-nav>ul{
    width:90%;
    display:flex;
    justify-content: center;
}
.drop-nav>ul>li{
    list-style:none;
    width:15%;
    margin:0 1.2%;
    text-align:center;
    background:darkcyan;
}
.drop-list{
    width:100%;
}
.drop-list>li{
    list-style:none;
    text-align:left;
    text-indent:10px;
    height:40px;
    
}
.drop-list>li>a{
    display:block;
    height:100%;
    color:white;
    padding:0 10px;
}
.drop-list>li>a:hover{
    background:darkred;
}
.drop-list>li>a>span{
    display:block;
    height:100%;
    border-bottom:1px dashed white;
    display:flex;
    align-items: center;
}
.drop-list>li:last-child>a>span{
    border-bottom:none;
}

 

js

 

//drop-nav full
    $(".main-nav>ul>li").each(function(index){
        
        $(this).mouseenter(
            function(){
                $(".drop-nav").show();
                $(".main-nav>ul>li>a").css({
                    background:"orange"
                });
                $(this).find("a").css({
                    background:"black",
                });
                
                $(".drop-nav>ul>li").css({
                    background:"darkcyan",
                });
                $(".drop-nav>ul>li").eq(index).css({
                    background:"black",
                });
                        
            });
    
        });
    
        $(".drop-nav>ul>li").each(function(index){
        
            $(this).mouseenter(
                function(){
                    $(".drop-nav>ul>li").css({
                        background:"darkcyan"
                    });
                    $(this).css({
                        background:"black",
                    });

                    $(".main-nav>ul>li>a").css({
                        background:"orange"
                    });
                    $(".main-nav>ul>li>a").eq(index).css({
                        background:"black"
                    });
                        
            });
    
        });
    
    $(document).mouseover(function(event){
        if($(event.target).parents(".main-nav").length==0){
            $(".drop-nav").hide();
            $(".main-nav>ul>li>a").css({
                background:"orange"
            });
        }else{
            $(".drop-nav").css({
                display:"flex"
            });
        }
    });

 

 

제목 날짜
드레그 앤 드롭 효과 예제 new file 2020.04.03
드레그 앤 드롭 효과 원리 new file 2020.04.03
슬라이드 페이지 네이션 file 2020.04.02
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file 2020.04.02
모바일 작업 file 2020.04.02
자격증 슬라이드 기본 2020.03.30
스크롤바 없에는 css update 2020.03.30
터지이벤트와 mouseup, mousedown이벤트 2020.03.28
bitnami 설치 2020.03.20
3자리마다 쉼표 찍기 javascript 2020.03.19
3월 13일 헤더 애니메이션 file 2020.03.16
php를 이용한 파일 활용 2020.03.09
스크롤했을 때 헤더 애니메이션 2020.03.07
패밀리 사이트 이동 2020.03.07
검색폼 애니네이션 2020.03.07
탭 만들기 2020.03.07
모달 2020.03.07
페이지에서 화살표를 클릭하면 특정위치로 애니메이션되면서 이동, 네비 해시 애니메이션 scroll spy 2020.03.07
full drop-down, 2020.03.07
자격증 3일차 공지사항, 갤러리 css file 2020.03.03
태그 목록