민병수 / Voicoding

Go to a project
Toggle navigation Toggle navigation pinning
민병수
0f267d55 1 parent 5d4b0936

Menu

Inline Side-by-side
Showing 4 changed files with 131 additions and 0 deletions
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
6 <meta name="viewport" content="width=device-width, initial-"> 6 <meta name="viewport" content="width=device-width, initial-">
7 <link rel="preconnect" href="https://fonts.gstatic.com"> 7 <link rel="preconnect" href="https://fonts.gstatic.com">
8 <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Noto+Serif+KR:wght@500&family=Noto+Serif:ital@1&display=swap" rel="stylesheet"> 8 <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Noto+Serif+KR:wght@500&family=Noto+Serif:ital@1&display=swap" rel="stylesheet">
9 + <title>Voicoding</title>
9 </head> 10 </head>
11 +
10 <body> 12 <body>
11 <p>Voicoding <img src="voico_0.jpg" width=auto height="200"></p> 13 <p>Voicoding <img src="voico_0.jpg" width=auto height="200"></p>
12 <div id = "project"> 14 <div id = "project">
......
1 +:root{
2 + --text-color:#fffde7;
3 + --background-color:#ff94c2;
4 + --accent-color:#ba2d65;
5 +}
6 +
7 +body{
8 + margin : 0;
9 + font-family: 'Source Sans Pro';
10 +}
11 +a{
12 + text-decoration:none;
13 + color:var(--text-color);
14 +
15 +}
16 +.menu{
17 + display:flex;
18 + justify-content:space-between;
19 + align-items:center;
20 + background-color:var(--background-color);
21 + padding: 8px 12px;
22 +}
23 +.menu_bar_content li:hover{
24 + background-color:var(--accent-color);
25 + border-radius: 4px;
26 +}
27 +.menu_bar_icons li:hover{
28 + background-color:var(--accent-color);
29 + border-radius: 4px;
30 +}
31 +.menu_bar_logo{
32 + font-size: 20px;
33 +
34 +}
35 +.menu_bar_logo i{
36 + color:var(--accent-color);
37 +}
38 +.menu_bar_content{
39 + display:flex;
40 + list-style: none;
41 + padding-left: 0;
42 +}
43 +.menu_bar_content li{
44 + padding: 8px 12px;
45 +}
46 +.menu_bar_icons{
47 + list-style: none;
48 + display: flex;
49 + padding-left:0;
50 +}
51 +.menu_bar_icons li{
52 + padding: 8px 12px;
53 +}
54 +.menu_toggle{
55 + display: none;
56 + position: absolute;
57 + right:32px;
58 + font-size: 24px;
59 +}
60 +@media screen and (max-width: 500px) {
61 + .menu{
62 + flex-direction: column;
63 + align-items: flex-start;
64 + padding: 8px 24px;
65 + }
66 + .menu_bar_content{
67 + display:none;
68 + flex-direction:column;
69 + align-items:center;
70 + width: 100%;
71 + }
72 + .menu_bar_content li{
73 + width: 100%;
74 + text-align: center;
75 + }
76 + .menu_bar_icons{
77 + display:none;
78 + justify-content: center;
79 + width: 100%;
80 + }
81 + .menu_toggle{
82 + display: block;
83 + }
84 + .menu_bar_content.active,
85 + .menu_bar_icons.active{
86 + display:flex;
87 + }
88 +}
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <link href="Voico_Menu.css" rel="stylesheet" type="text/css">
5 + <meta charset="UTF-8">
6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 + <title>Voicoding</title>
9 + <script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
10 + <script src="menu.js" defer></script>
11 + <link rel="preconnect" href="https://fonts.gstatic.com">
12 + <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
13 +</head>
14 +<body>
15 + <nav class="menu">
16 + <div class="menu_bar_logo">
17 + <i class="fas fa-microphone-alt"></i>
18 + <a href="Voico_Home.html">Voicoding</a>
19 + </div>
20 + <ul class="menu_bar_content">
21 + <li><a href="Voico_Home.html">Home</a></li>
22 + <li><a href="">Manual</a></li>
23 + <li><a href="">Contact</a></li>
24 + </ul>
25 + <ul class="menu_bar_icons">
26 + <li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
27 + <li><a = href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
28 + </ul>
29 + <a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
30 + </nav>
31 +
32 +</body>
33 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +const toggleBtn = document.querySelector('.menu_toggle');
2 +const menu = document.querySelector('.menu_bar_content');
3 +const icons = document.querySelector('.menu_bar_icons');
4 +
5 +toggleBtn.addEventListener('click', () => {
6 + menu.classList.toggle('active');
7 + icons.classList.toggle('active');
8 +})
...\ No newline at end of file ...\ No newline at end of file