Strength & Honor

반응형 헤더 만들기 (5)

그래서 이번에는 html 파일에서 ajax 자바스크립트를 링크하였고 navbar__menu 에는 post_menu 라는 id 값을 주었다.
또한 navbar__tooggleBtn 에는 onclick 하였을때 openclose 라는 명령을 주었다.

          
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <ul id="post_menu" class="navbar__menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Macbook</a></li>
      <li><a href="#">Html</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">Python</a></li>
  </ul>

  <a onclick="openclose()" href="#" class="navbar__tooggleBtn">
      <i class="fas fa-bars"></i>
  </a>

그럼 아래와 같이 햄버거 버튼을 클릭했을때 메뉴바들이 나타나고 다시 클릭하면 사라지게 되었다.

아래는 연습에 사용한 html, css, JavaScript 의 원문이다.

1. 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>Practice</title>
      <link rel="stylesheet" href="practice_header.css">
      
  </head>

  <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://kit.fontawesome.com/ec520b0579.js" crossorigin="anonymous"></script>
      <script src="practice_header.js"></script>

      <nav class="navbar">
          <div class="navbar__logo">
              <i class="fab fa-old-republic"></i>
              <a href="">Strength & Honor</a>

          </div>

          <ul id="post_menu" class="navbar__menu">
              <li><a href="#">Home</a></li>
              <li><a href="#">Macbook</a></li>
              <li><a href="#">Html</a></li>
              <li><a href="#">CSS</a></li>
              <li><a href="#">JavaScript</a></li>
              <li><a href="#">Python</a></li>

          </ul>

          <ul class="navbar__icons">
              <li><i class="fas fa-home"></i></li>
              <li><i class="fas fa-at"></i></li>
              <li><i class="fab fa-linkedin"></i></li>
              
          </ul>

          <a onclick="openclose()" href="#" class="navbar__tooggleBtn">
              <i class="fas fa-bars"></i>
          </a>
      </nav>

  </body>
  </html>

2. CSS

          
    :root {
    --text-color: #f0f4f5;
    --background-color:#263344 ;
    --accent-color: #d49466; 
  }

  body {
    margin: 0;
  }

  a {
    text-decoration: none;
    color: var(--text-color);

  }

  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(9, 108, 173);
    padding: 0px 12px;
  }

  .navbar__logo {
    font-size: 18px;

  }

  .navbar__logo i {
    color: yellow;

  }

  .navbar__menu {
    display: flex;
    list-style: none;
    padding-left: 0;
    padding-top: 15px;

  }

  .navbar__menu li {
    padding: 8px 12px;

  }

  .navbar__menu li:hover {
    background-color: #838346;
    border-radius: 4px;

  }

  .navbar__icons {
    list-style: none;
    color: white;
    display: flex;
    padding: 0;
    padding-top: 15px;

  }

  .navbar__icons li {
    padding: 8px 12px;

  }

  .navbar__tooggleBtn {
    display: none;
    position: absolute;
    right: 32px;
    font-size: 24px;
    color: #d47c08;
  }

  @media screen and (max-width: 800px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 24px;
    }

    .navbar__menu {
        display: none;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .navbar__menu li {
        width: 100%;
        text-align: center;
    }

    .navbar__icons {
        display: none;
        justify-content: center;
        width: 100%;
    }

    .navbar__tooggleBtn {
        display: block;
        
    }

    
  }

3. JavaScript

        
  function openclose() {
  let status = $('#post_menu').css('display');
  if (status == 'block') {
      $('#post_menu').hide()
  } else {
      $('#post_menu').show()
  }
  }

휴~~ 이제 끝났다.
사실 유투브만 보고 따라하면 쉬울줄 알았다.
여러 웹사이트의 정보를 기초로 따라하더라도 동일한 결과를 얻지 못한다는 것을 알고는 있었지만 유투브를 따라하더라도 안된것은 처음이다.

그래도 여기저기 웹사이트에서 얻은 정보를 하나하나 조합해서 완성한 파일들이 나의 의도대로 동작하는 것에 만족을 한다.

다만 내가 알지도 못하는 자바스크립트 링크를 붙여야 하는 것이 마음에 들지 않을 뿐이다.

CSS

Wizzen2801

One Day, One New!

Strength & Honor

반응형 헤더 만들기 (5)

Categories

CSS

Wizzen2801