기본 네비게이션 만들기

43288 단어 CSShtmljquery웹접근성CSS

HTML


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title> gnb</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/common3.js"></script>
    <link rel="stylesheet" href="css/common3.css">
</head>
<body>
    <header id="header">
        <div>
            <!-- 최대너비 1763, 문서가운데 위치, 하단 보더 1, relative -->
            <h1 class="logo p_a">
                <a href="index.html"><img src="../images/common/logo.png" alt="한화생명 리즈"></a>
            </h1>
            <nav id="gnb">
                <h2 class="blind_b">주메뉴</h2>
                <ul>
                    <li>
                        <a href="">About</a>
                        <ul>
                            <li><a href="#">브랜드 스토리</a></li>
                            <li><a href="#">역할 및 서비스</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Program</a>
                        <ul>
                            <li><a href="#">Career</a></li>
                            <li><a href="#">Home</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Recruit</a>
                        <ul>
                            <li><a href="#">LG 선발 프로세스</a></li>
                            <li><a href="#">지원하기</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Q&amp;A</a>
                        <ul>
                            <li><a href="#">자주 묻는 질문</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <a href="#" class="util p_a borderbox">지원하기</a>
        </div>
    </header>
</body>
</html>

css

@charset "utf-8";
@font-face{
    font-family: NtSansKR;
    font-weight: 300;
    font-style: normal;


    src:url("../../../../web/fonts/NotoSansKR-DemiLight.eot");
    src:url("../../../../web/fonts/NotoSansKR-DemiLight.eot#irfix") format("embedded-opentype"),
    url("../../../../web/fonts/NotoSansKR-DemiLight.woff2") format("woff2"),
    url("../../../../web/fonts/NotoSansKR-DemiLight.woff") format("woff"),
    url("../../../../web/fonts/NotoSansKR-DemiLight.otf") format("opentype");
}

/* tag reset */
body,h1,h2,ul,li{margin: 0;padding: 0;}
h1,h2{font-size: 100%;}
ul{list-style:none;}
header,nav{display: block;}
img{border:none;vertical-align: top;}
a:link,a:visited,a:hover,a:active{text-decoration: none;color: inherit;}

/* common class */
.blind_b{width: 1px;height: 1px;overflow: hidden;border:none;position: absolute;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);}
.p_a{position: absolute;}
.borderbox{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#header.active::before{content: "";position: absolute;top: 70px;left: 0;width: 100%;height: 49px;background: pink;}

body{font-family: NtSansKR;font-weight: 300;font-size: 17px;color: #333;}
#header{width: 100%;}
#header > div{border-bottom: 1px solid #aaa;height: 69px;}
.logo{top: 15px;left:0;}
.util{top: 18px;right: 0;width: 100px;height: 34px;text-align: center;border: 2px solid #f15b47;}

#gnb{text-align: center;height: 69px;}
#gnb a{display: block;}
#gnb>ul>li{display: inline-block;position: relative;}
#gnb>ul>li+li{margin-left: 73px;}
#gnb>ul>li>a{height: 69px;line-height: 69px;border-bottom: 2px solid transparent;}
#gnb>ul>li:hover>a,#gnb>ul>li.on>a,#gnb>ul>li>a:focus{color: #f15b47;border-bottom-color: #f15b47;}

#gnb ul li ul{display: none;position: absolute;top: 69px;left: 0;width: 250px;height: 49px;}
#gnb ul li ul li{float: left;}
#gnb ul li ul li+li{margin-left: 36px;}
#gnb ul li ul li a{font-size: 14px;color: #888;height: 49px;line-height: 49px;padding-top: 1px;}
#gnb ul li ul li:hover a,#gnb ul li ul li a:focus{color: #333;}

Javascript

$(document).ready(function(){

    //1.변수선언
    var _gnb = $('#gnb>ul');
    //depth2 ul숨기기
    _gnb.find('li ul').hide();


   /*  
     2. _gnb를 기준으로 a를 찾아서 mouseenter,focus이벤트 => 
       1. 초기화 : li.on제거 후 아들래미 ul숨기기 
       2. 이벤트 발생한 a의 베프 ul 보여주고 부모님에게 클래스 on추가 
       3. #header에 하얀배경색을 생성하기 위한 클래스 active추가 
       
    */
    _gnb.find('>li>a').on('mouseenter focus',function(){
        _gnb.find('li.on').removeClass('on').children('ul').hide();
        $(this).next().show().parent().addClass('on');
        $('#header').addClass('active');
    });

    /* 
    3. _gnb에서 마우스가 떠났을 때
    - 초기화 : 모든 li에 클래스on제거, 아들래미 숨기기
    - #header에 .active제거 
    */
    _gnb.on('mouseleave',function(){
        $(this).find('>li.on').removeClass('on').children('ul').hide();
        $('#header').removeClass('active');
    });

    /* 
      _gnb의 첫번째 a,마지막 a에서 포커스가 없어짐 
      => 어디로 갔는지 잠시 텀을 주고 찾는다. 
      gnb안에 a에 포커스된게 없으면 mouseleve이벤트 강제실행
    */
    _gnb.find('a:first, a:last').on('blur',function(){
        setTimeout(function(){
            if(!$('_gnb a').is(':focus')){
                _gnb.trigger('mouseleave');
            }
    },10);

    });
DAY 6 Python 베이스: list and tuple 2018-06-19
json 데이터 형식 을 기반 으로 한 간단 한 데이터베이스 - jsonDB

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage