브라우저 제목

기본 코드

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 시작</title>
<!-- 외부 style -->
<link rel="stylesheet" href="css/nav_ex.css">
<!-- 외부 script -->

</head>
<body>

    <div class="full-container nav">
        <nav id="gnb">
            <ul>
                <li><a href="#">페이스케어</a>
                    <div class="drop-down">
                        <ul>
                            <li><a href="#">페이스케어1-1</a></li>
                            <li><a href="#">페이스케어1-2</a></li>
                            <li><a href="#">페이스케어1-2</a></li>
                            <li><a href="#">페이스케어1-2</a></li>
                            <li><img src="images/pdslider1.jpg" width="90%"></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">바디케어</a></li>
                <li><a href="#">헤어케어</a></li>
                <li><a href="#">맘&베이비</a></li>
                <li><a href="#">립스틱</a></li>
            </ul>
        </nav>
    </div>

</body>
</html>

 

css

@charset "utf-8";

a{
    color:#333333; 
    text-decoration:none;
}
a{
    color:orange;
}
.full-container{
    width:100%;
    position:relative;
    margin-top:50px;
    background:black;
}
#gnb{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    position:relative;
    z-index:999999;
}
#gnb>ul{
    width:100%;
    list-style:none;
    padding:0; margin:0;
    background:black;
    text-align:center;
}
#gnb>ul>li{
    display:inline-block;
    width:15%;
    position:relative;
}
#gnb>ul>li>a{
    display:block;
    width:100%;
    padding:15px 0;
    font-size:1.5em;
    color:white;
    
}

#gnb>ul>li>a:hover{
    background:darkred;
}

.drop-down{
    position:absolute;
    background:#333333;
    width:100%;
    text-align:left;
    text-indent:10px;
    display:block;
}
.drop-down>ul{
    list-style:none;
    padding:0; margin:0;
}
.drop-down>ul>li{
    padding:0 10px;
    box-sizing:border-box;
}
.drop-down>ul>li>a{
    display:block;
    color:white;
    padding:10px 0;
    border-bottom:1px dotted white;
    
}
.drop-down>ul>li:last-child>a{
    border-bottom:0;
}
.drop-down>ul>li:last-child{
    padding:10px;
}


jquery

$(document).ready(function(){
    $("#gnb>ul>li>a").click(function(){
        $(".drop-down:visible").fadeOut();
        $(this).parent().find(".drop-down").fadeIn();
    });
    
    $(document).mouseup(function(e){
        if($(e.target).parents("#gnb>ul").length==0){
            $(".drop-down").fadeOut();
        }
    });

});

제목 날짜
웹디자인 기능사 모의 평가 자료 file 2020.04.04
요청하신 일러스트 밑그림 자료입니다. file 2020.03.21
gtq자료 2019.05.27
자료 file 2018.12.11
버튼이 있는 슬라이딩 file 2018.08.30
자격증 세로 네비게이션 2018.08.19
자격증 슬라이드 다시 정리했습니다. 3가지 유형입니다. 2018.07.25
자격증에서 fade애니메이션 좌우 애니메이션 2018.07.24
woff변환 프로그램 file 2018.06.18
태그와 css정리 목록 file 2018.06.15
연산자와 네비고정, 네비 메뉴 file 2018.06.12
네비 드롭(click)2 file 2018.06.11
네비 드롭(click)1 file 2018.06.11
bxslider 연결 및 기본 옵션 file 2018.06.07
jquery 로그인 팝업 2018.06.06
jquery 시작 동영상 file 2018.06.06
태그 정리 file 2018.06.04
21일차 동영상은 제작하지 않았습니다. 2018.05.08
레이아웃6 두번째 file 2018.05.04
레이아웃6 첫번째 file 2018.05.04
태그 목록