서브네비게이션 & 레이어팝업

티스토리 뷰

HTML_CSS

서브네비게이션 & 레이어팝업

LHOIKTN 2021. 4. 13. 08:24

<!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">
  <title>Document</title>
  <style>
    
    *{margin: 0; padding: 0;}
    ul,li{list-style: none;}

    #wrap{
      width: 100%;
    }

    #header{ 
      width: 1200px;
      height: 120px;
      margin: 0 auto;
      background: crimson;
    }

    .gnb{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background: cornflowerblue;
      width: 600px;
      margin: 0 auto;
      
    }

    .gnb>li{ 
      flex: 1;
      text-align: center;
      background: cornflowerblue;
    }

    .gnb>li>ul.snb{
      display: none;
    }

    .gnb>li>ul.on{
      display: block;
    }
  </style>
  <script type="text/javascript">
    window.addEventListener('DOMContentLoaded',init);
    function init(){
      let gnb = document.querySelectorAll('.gnb>li');
      console.log(gnb);
      //반복문 forEach문   //익명함수  이걸 쓰면 코드가 줄고 깔끔해진다^^
      //forEach는 배열을 반복할 떄 많이 사용한다. 
      gnb.forEach(forFn); //Array.forEach(callback:function);
      function forFn(value,index){ //첫번째 인자는 밸류. 두번째 인자는 인덱스
        console.log(index+' : '+ value);
      }
      //익명함수= 함수이름이 없는 함수.
      gnb.forEach(function(ele){
        ele.addEventListener('mouseenter',menuover);
        ele.addEventListener('mouseleave',menuout);
        }); 

      function menuover(event){
        let snb=event.currentTarget.querySelector('.snb');
        let snbAll=document.querySelectorAll('.snb');
        snbAll.forEach(function(ele){
          ele.classList.add('on');
        })
        //snb.classList.add('on');
      }

      function menuout(event){
        let snb=event.currentTarget.querySelector('.snb');
        let snbAll=document.querySelectorAll('.snb');
        snbAll.forEach(function(ele){
          ele.classList.remove('on');
        })
        // snb.classList.remove('on');
      }

      function menu(event){
        let snbAll=document.querySelectorAll('.snb');
        if(event.type=='mouseenter'){
          ele.classList.add('on');
        }
        else{
          ele.classList.remove('on');
        }
      }
    }
  </script>
</head>
<body>
  <div id="wrap">
    <div id="header">
      <ul class="gnb">
        <li><span>meue1</span>
          <ul class="snb on">
            <li>menu1-1</li>
            <li>menu1-2</li>
            <li>menu1-3</li>
            <li>menu1-4</li>
          </ul>
        </li>
        <li><span>meue2</span>
          <ul class="snb">
            <li>menu2-1</li>
            <li>menu2-2</li>
            <li>menu2-3</li>
            <li>menu2-4</li>
          </ul>
        </li>
        <li><span>meue3</span>
          <ul class="snb">
            <li>menu3-1</li>
            <li>menu3-2</li>
            <li>menu3-3</li>
            <li>menu3-4</li>
          </ul>
        </li>
        <li><span>meue4</span>
          <ul class="snb">
            <li>menu4-1</li>
            <li>menu4-2</li>
            <li>menu4-3</li>
            <li>menu4-4</li>
          </ul>
        </li>
        <li><span>meue5</span>
          <ul class="snb">
            <li>menu5-1</li>
            <li>menu5-2</li>
            <li>menu5-3</li>
            <li>menu5-4</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</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">
  <title>Document</title>
  <!-- 백그라운드 오버플로우 히든으로 스크롤바를 다 없앤다. -->

  <style>
     *{margin: 0; padding: 0;}
    #layer_popup_wrap{ 
      display: none;
      width: 100vw;
      height: 100vh;
      background: black;
      opacity: 0.6;
      position: fixed;
      top: 0;
    }

    #layer_popup{ 
      width: 500px;
      height: 500px;
      background: white;
      position: relative;
      text-align: center;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }

    .close{
      background: tomato;
      color: black;
      width: 80px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      padding: 7px 0;
      cursor: pointer;
      text-align: center;
      display: inline-block;
    }
  </style>
</head>
<body>
  <button id='btn'>레이어팝업</button>
  <div id="layer_popup_wrap" style="display:none;">
    <div id="layer_popup">
      "이부분의 내용이 나옵니다."
      <span class="close">닫기버튼</span>
    </div>
  </div>

  <script type="text/javascript">
    let layerBtn= document.querySelector('#btn'); 
    let closeBtn= document.querySelector('.close'); 
    //Element.addEventListener('이벤트명:String', 콜백함수:Function());  
    layerBtn.addEventListener('click',layerFn);
    closeBtn.addEventListener('click',layerFn);

    function layerFn(){
      let popup=document.querySelector('#layer_popup_wrap');
      let type='none'; 
      //type= (popup.style.display=='none') ? 'block':'none'; 
      if(popup.style.display=='none'){
        type='block';
        //popup.style.display='block'; 
      }
      else{
        type='none';
        //popup.style.display='none'; 
      }
      popup.style.display=type;
    }
  </script>
</body>
</html>

728x90

'HTML_CSS' 카테고리의 다른 글

[java script] Date 객체를 사용한 달력 만들기 (0)	2021.04.18
[java script] Array 메서드 indexOf find map filter reduce (0)	2021.04.15
[html_css] 반응형 웹 (0)	2021.04.12
[java script] forEach()와 익명함수 (0)	2021.04.12
[java script]Element.addEventListener(); (0)	2021.04.12

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

글 보관함

GPD2021

티스토리 뷰

서브네비게이션 & 레이어팝업

'HTML_CSS' 카테고리의 다른 글

티스토리툴바