민병수 / 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 @@
<meta name="viewport" content="width=device-width, initial-">
<link rel="preconnect" href="https://fonts.gstatic.com">
<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">
<title>Voicoding</title>
</head>
<body>
<p>Voicoding <img src="voico_0.jpg" width=auto height="200"></p>
<div id = "project">
......
:root{
--text-color:#fffde7;
--background-color:#ff94c2;
--accent-color:#ba2d65;
}
body{
margin : 0;
font-family: 'Source Sans Pro';
}
a{
text-decoration:none;
color:var(--text-color);
}
.menu{
display:flex;
justify-content:space-between;
align-items:center;
background-color:var(--background-color);
padding: 8px 12px;
}
.menu_bar_content li:hover{
background-color:var(--accent-color);
border-radius: 4px;
}
.menu_bar_icons li:hover{
background-color:var(--accent-color);
border-radius: 4px;
}
.menu_bar_logo{
font-size: 20px;
}
.menu_bar_logo i{
color:var(--accent-color);
}
.menu_bar_content{
display:flex;
list-style: none;
padding-left: 0;
}
.menu_bar_content li{
padding: 8px 12px;
}
.menu_bar_icons{
list-style: none;
display: flex;
padding-left:0;
}
.menu_bar_icons li{
padding: 8px 12px;
}
.menu_toggle{
display: none;
position: absolute;
right:32px;
font-size: 24px;
}
@media screen and (max-width: 500px) {
.menu{
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.menu_bar_content{
display:none;
flex-direction:column;
align-items:center;
width: 100%;
}
.menu_bar_content li{
width: 100%;
text-align: center;
}
.menu_bar_icons{
display:none;
justify-content: center;
width: 100%;
}
.menu_toggle{
display: block;
}
.menu_bar_content.active,
.menu_bar_icons.active{
display:flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="Voico_Menu.css" rel="stylesheet" type="text/css">
<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>Voicoding</title>
<script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
<script src="menu.js" defer></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<nav class="menu">
<div class="menu_bar_logo">
<i class="fas fa-microphone-alt"></i>
<a href="Voico_Home.html">Voicoding</a>
</div>
<ul class="menu_bar_content">
<li><a href="Voico_Home.html">Home</a></li>
<li><a href="">Manual</a></li>
<li><a href="">Contact</a></li>
</ul>
<ul class="menu_bar_icons">
<li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
<li><a = href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
</ul>
<a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
</nav>
</body>
</html>
\ No newline at end of file
const toggleBtn = document.querySelector('.menu_toggle');
const menu = document.querySelector('.menu_bar_content');
const icons = document.querySelector('.menu_bar_icons');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
})
\ No newline at end of file