22일차 - 제이쿼리) 상단 네비 (2)

(지금까지 한 것) 제이쿼리 책갈피 기능

<script>
    $(document).ready(function(){

        $(".depth1 a").click(function(e){
            // 
            e.preventDefault();
            var targetPos = $($(this).attr('href')).offset().top;
            $('body, html').animate({'scrollTop':targetPos});
            });

    });
</script>

---

2. 자바스크립트로 네비게이션(배열) 삽입

자세한 과정은 21일차 https://velog.io/@la_sta/21일차-자바-스크립트

---

2-1. 배열 삽입 ~ 변수 생성 ~ 출력 코드

HTML

<!-- 1단메뉴 원뎁스 네비게이션 -->
    <header id="nav">
      <ul class="depth1">
      	<!-- 자바스크립트로 네비게이션(배열) 삽입 -->
        <!-- 자바스크립트로 네비게이션(배열) 삽입 -->
        <!-- 자바스크립트로 네비게이션(배열) 삽입 -->
        <!-- 자바스크립트로 네비게이션(배열) 삽입 -->
      </ul>
    </header>

제이쿼리

<script>

    $(document).ready(function(){
    // ----- 네비게이션 ----- //
        const nvDB = [
            ['나야나', '#about'],
            ['배웠어', '#portfolio'],
            ['내사진', '#preInterview'],
            ['깃허브', '#contact']
        ];

        let nvli ='';
        $('.depth1').html(nvli); // ul에 네비 삽입하기
        						 // ".depth1 섹션에 nvli 삽입"
    });
    
</script>

2-2. for-in문

2-3. HTML 섹션에 id 삽입, 클릭 → 각 섹션 이동

---

3. 네비게이션 스크롤

HTML 섹션에 class="slideSection" 삽입

HTML

  <section id="about" class="slideSection">
    	<h2>각 섹션 타이틀</h2>
  </section>
  
  <section id="portfolio" class="slideSection">
    	<h2>각 섹션 타이틀</h2>
  </section>
  
    <section id="preInterview" class="slideSection">
    	<h2>각 섹션 타이틀</h2>
  </section>
  
    <section id="contact" class="slideSection">
    	<h2>각 섹션 타이틀</h2>
  </section>

3-1. each : 모든 슬라이드 섹션 각각 분리, 명령 수행

 // 모든 슬라이드 섹션들, 각각each(=객체들을 따로따로 분리해서) 다음 명령 실행!
      $('.slideSection').each(function(){
      
          $(this).find('h2').html(nvDB[][0])
          // 각 섹션들아→ h2 찾아서→ .html에 (nvDB[?][0]) 노출해
      })

이때, .html( nvDB[?][0] ) 값은?

2부터 시작하면 안되지!

---

3-2. index 번호가 0부터 시작하도록

• section 영역을 div로 감싼다! → 시작점에 달라져, 첫섹션 index=0 됨.

• .html( nvDB[ $(this).index( ) ] [0])
  

---

여기까지 전체코드

<script>
  $(document).ready(function(){ 
	  // ---------- 네비게이션 ----------
      const nvDB = [
          ['꼭집어서 나','#about'],
          ['열정의 6개월','#portfoloio'],
          ['내사람테스트','#preInterview'],
          ['연락하기','#contact']
      ];

      let nvli = '';
      for(let i in nvDB){
          nvli += `<li><a href="${nvDB[i][1]}">${nvDB[i][0]}</a></li>`
      }

      $('.depth1').html(nvli); // ul에 네비 삽입하기 "depth1 객체에 태그 넣어라"
      
      // ---------- 스크롤 ----------
      
      // 모든 슬라이드 섹션들아, each각각 (=객체들을 따로따로 분리해서) function ~~
      $('.slideSection').each(function(){
          $(this).find('h2').html(nvDB[$(this).index()][0])
          // 각 섹션들아 -> h2 찾아서 -> .html()로 이동하시오
      })

      // ---------- 네비게이션 애니메이션 ----------
      $(".depth1 a").click(function(e){
          // 
          e.preventDefault();
          var targetPos = $($(this).attr('href')).offset().top;
          $('body, html').animate({'scrollTop':targetPos});
          });

  });
</script>