Не могу понять, почему ошибку выдает при клике по кнопке, где должно появится все запросы, что изначально видны в горизонтальном положение в навигаций. По интернету походил, там на свет этого меню не нашел, но просто по мне отлично сделано под мобильные аппараты, и на широком экране смотрится по лучше других, но функция на мобильном, как появление выдвижение не работает.
HTML
Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="navbar-container" class="navbar">
<nav>
<h1>Portfolio</h1>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">skills</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">contact</a></li>
</ul>
<a href="javascript:void(0);" class="hamburger-menu" onclick="toggleNav()">
<i class="fa fa-bars"></i>
</a>
</nav>
</div>
CSS
Код
@import url('https://fonts.googleapis.com/css?family=Handlee');
@import url('https://fonts.googleapis.com/css?family=Lato');
* {
padding: 0;
margin: 0;
}
/*
====================
Navbar
====================
*/
#navbar-container {
position: fixed;
width: 100%;
overflow: hidden;
height: 80px;
background-color: black;
box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.3);
}
#navbar-container nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
#navbar-container nav h1 {
font-family: 'Handlee', cursive;
font-size: 35px;
color: white;
text-align: left;
padding: 10px 10px 10px 30px;
}
#navbar-container nav ul {
display: flex;
list-style: none;
align-items: center;
padding-bottom: 10px;
}
#navbar-container nav ul li {
font-size: 20px;
cursor: pointer;
font-family: 'Lato', sans-serif;
color: white;
padding: 0px 15px 0px 15px;
}
#navbar-container nav ul li:last-child {
padding-right: 50px;
}
#navbar-container nav a {
text-decoration: none;
color: white;
}
#navbar-container nav a:hover {
color: rgba(0,212,255,1);
}
#navbar-container .hamburger-menu {
display: none;
}
/*
====================
Landing Page
====================
*/
#landing-page-container {
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(64,221,196,1) 0%, rgba(0,212,255,1) 100%);
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow-x: hidden;
}
#landing-page-container h1 {
text-align: center;
font-family: 'Handlee', cursive;
color: black;
font-size: 50px;
}
#landing-page-container h3 {
text-align: center;
font-family: 'Handlee', cursive;
color: black;
font-size: 30px;
}
/*
====================
About
====================
*/
#about-container {
background: #fff;
/* width: 100vw;
height: 100vh; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
}
#about-container h1 {
text-align: center;
font-family: 'Handlee', cursive;
color: black;
font-size: 50px;
margin-top: 100px;
}
#about-container p {
text-align: justify;
font-family: 'Lato', cursive;
color: black;
font-size: 15px;
padding: 50px;
}
/*
====================
Media Queries
====================
*/
@media screen and (max-width: 700px) {
#navbar-container ul li {
display: none;
}
#navbar-container .hamburger-menu {
float: right;
display: block;
font-size: 30px;
padding-right: 20px;
}
}
@media screen and (max-width: 600px) {
#navbar-container .responsive {
position: relative;
}
#navbar-container .responsive .hamburger-menu {
position: absolute;
right: 0;
top: 0;
}
#navbar-container .responsive a {
float: none;
display: block;
text-align: left;
}
}
JS
Код
function toggleNav {
var x = document.getElementById("navbar-container");
if (x.className === "navbar") {
x.className += " responsive";
}
else {
x.className = "navbar";
}
}
See the Pen
Portfolio Layout by Kyla Stoneberg (@kylastoneberg)
on CodePen.