8 반응형 햄버거메뉴

8.반응형 햄버거메뉴

1. 자바스크립트

index.html

1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
5
    <title>Responsive Navigation Bar</title>
6
    <!-- Font Awesome Icons -->
7
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
8
    <!-- Google Fonts -->
9
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap" rel="stylesheet" />
10
    <!-- Stylesheet -->
11
    <link rel="stylesheet" href="style.css" />
12
  </head>
13
  <body>
14
    <header>
15
      <nav>
16
        <a href="#home" id="logo">Site Logo</a>
17
        <i class="fas fa-bars" id="ham-menu"></i>
18
        <ul id="nav-bar">
19
          <li>
20
            <a href="#home">Home</a>
21
          </li>
22
          <li>
23
            <a href="#about">About</a>
24
          </li>
25
          <li>
26
            <a href="#services">Services</a>
27
          </li>
28
          <li>
29
            <a href="#team">Team</a>
30
          </li>
31
          <li>
32
            <a href="#contact">Contact</a>
33
          </li>
34
        </ul>
35
      </nav>
36
    </header>
37
    <section id="home">
38
      <h1>Home Section</h1>
39
    </section>
40
    <!-- Script -->
41
    <script src="script.js"></script>
42
  </body>
43
</html>

style.css

1
* {
2
  padding: 0;
3
  margin: 0;
4
  box-sizing: border-box;
5
}
6
html {
7
  font-size: 62.5%;
8
}
9
*:not(i) {
10
  font-family: 'Poppins', sans-serif;
11
}
12
header {
13
  position: fixed;
14
  width: 100%;
15
  background-color: #2c8eec;
16
  padding: 3rem 5rem;
17
}
18
nav {
19
  display: flex;
20
  justify-content: space-between;
21
  align-items: center;
22
}
23
nav ul {
24
  list-style: none;
25
  display: flex;
26
  gap: 2rem;
27
}
28
nav a {
29
  font-size: 1.8rem;
30
  text-decoration: none;
31
}
32
nav a#logo {
33
  color: #000000;
34
  font-weight: 700;
35
}
36
nav ul a {
37
  color: #ffffff;
38
  font-weight: 600;
39
}
40
nav ul a:hover {
41
  border-bottom: 2px solid #ffffff;
42
}
43
section#home {
44
  height: 100vh;
45
  display: grid;
46
  place-items: center;
47
}
48
h1 {
49
  font-size: 4rem;
50
}
51
#ham-menu {
52
  display: none;
53
}
54
nav ul.active {
55
  left: 0;
56
}
57
@media only screen and (max-width: 991px) {
58
  html {
59
    font-size: 56.25%;
60
  }
61
  header {
62
    padding: 2.2rem 5rem;
63
  }
64
}
65
@media only screen and (max-width: 767px) {
66
  html {
67
    font-size: 50%;
68
  }
69
  #ham-menu {
70
    display: block;
71
    color: #ffffff;
72
  }
73
  nav a#logo,
74
  #ham-menu {
75
    font-size: 3.2rem;
76
  }
77
  nav ul {
78
    background-color: black;
79
    position: fixed;
80
    left: -100vw;
81
    top: 73.6px;
82
    width: 100vw;
83
    height: calc(100vh - 73.6px);
84
    display: flex;
85
    flex-direction: column;
86
    align-items: center;
87
    justify-content: space-around;
88
    transition: 1s;
89
    gap: 0;
90
  }
91
}
92
@media only screen and (max-width: 575px) {
93
  html {
94
    font-size: 46.87%;
95
  }
96
  header {
97
    padding: 2rem 3rem;
98
  }
99
  nav ul {
100
    top: 65.18px;
101
    height: calc(100vh - 65.18px);
102
  }
103
}

script.js

1
let hamMenuIcon = document.getElementById('ham-menu');
2
let navBar = document.getElementById('nav-bar');
3
let navLinks = navBar.querySelectorAll('li');
4

5
hamMenuIcon.addEventListener('click', () => {
6
  navBar.classList.toggle('active');
7
  hamMenuIcon.classList.toggle('fa-times');
8
});
9
navLinks.forEach((navLinks) => {
10
  navLinks.addEventListener('click', () => {
11
    navBar.classList.remove('active');
12
    hamMenuIcon.classList.toggle('fa-times');
13
  });
14
});

2. 제이쿼리로 구현하기

index.html

1
...생략
2
  <!-- <script src="vanilla.js"></script> -->
3
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
4
  <script src="jquery.js"></script>
5
</body>

jquery.js

1
let hamMenuIcon = $('#ham-menu');
2
let navBar = $('#nav-bar');
3
let navLinks = $('li');
4

5
hamMenuIcon.click(function () {
6
  navBar.toggleClass('active');
7
  hamMenuIcon.toggleClass('fa-times');
8
});
9
navLinks.click(function () {
10
  navBar.removeClass('active');
11
  hamMenuIcon.toggleClass('fa-times');
12
});