Я создаю складную панель навигации для мобильного просмотра моих сайтов.В мобильном представлении у меня есть заголовок с логотипом и значком справа.Затем пользователь может щелкнуть значок, чтобы получить доступ к другим ссылкам на веб-сайт.
Когда я комментирую «не отображать ни одного», это показывает, что все остальные ссылки находятся под логотипом и значком.Я запустил свой HTML, CSS и JavaScript через валидатор кода W3C, и он вернулся с «без ошибок».Мой HTML-файл, CSS-файл и JS-файл, кажется, также находятся в соответствующих папках.
HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Responsive Design</title>
<link rel='stylesheet' type="text/css" href='styles/styleresponsive.css' />
<script type="text/javascript" src="scripts/responsive.js"></script>
<script src="https://kit.fontawesome.com/01c3568935.js"></script>
</head>
<body>
<!-- There's nothing here! -->
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<a href="#" class="logo"> Logo<!-- <img src='images/stars.jpg' alt="logo" /> --> </a>
<ul class="main-nav" id="js-menu">
<li>
<a href="#" class="nav-links1"><img src='images/stars.jpg' alt="Art" /></a>
</li>
<li>
<a href="#" class="nav-links2"><img src='images/stars.jpg' alt="Code" /></a>
</li>
<li>
<a href="#" class="nav-links3"><img src='images/stars.jpg' alt="Dogs" /></a>
</li>
<li>
<a href="#" class="nav-links4"><img src='images/stars.jpg' alt="Contact" /></a>
</li>
</ul>
</nav>
CSS
/* So, testing for mobile, tablet, and desktop */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mobile Styles */
@media only screen and (max-width: 400px) {
body{
background-color: #F09A9D; /* Red */
}
/* Here is where that Navigation bar gets tricky */
.navbar {
font-size: 18px;
background-color: #5995DA;
width: 100%;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
font-size: 24px;
}
/* Hide the menu so it's not visible by default */
.main-nav {
list-style-type: none; /* Specifies the type of list-item marker */
/* display: none; /* Not displayed */
}
/* Styles the navigation links & logo */
.nav-links1,
.nav-links2,
.nav-links3,
.nav-links4,
.logo {
text-decoration: none;
/* list-style-type: none; /* Removes the default list text underline */
}
/* Styles the list */
.main-nav li {
text-align: center; /* Aligns text center */
margin: 15px auto;
height: 100px;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
height: 100px;
}
.active {
display: block;
}
JS
/* Now lets make this responsive with JS */
let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");
navBarToggle.addEventListener("click", function () {
mainNav.classList.toggle("active");
});
Я ожидаю, что смогу щелкнуть значок и другие навигационные ссылки "свернуть".Вместо этого эта панель навигации кажется застойной.
Демонстрационное изображение
Редактировать: странная вещь, когда я проверяю свой исходный код и код с правками, предложенными на codepen, оно работает.Когда я тестирую его с помощью Firefox и инспектора разработчиков Safari, он не работает.На консоли Safari JavaScript для изображения «Звезды» написано «Не разрешено загружать локальный ресурс».Это то, что не так?
Редактировать два: Пробовал без звезд.jpg.Просто чтобы каждая ссылка выглядела как
"<li>
<a href="#" class="nav-links1">Art<!--<img src='images/stars.jpg' alt="Art"/> --></a>
</li>"
, чтобы "проверить" ее.
В консоли Safari JavaScript он говорит: «TypeError: null не является объектом (оценка 'navBarToggle.addEventListener')
В консоли FireFox JavaScript он говорит« TypeError: navBarToggle равен нулю"
Если этот код будет работать на codepen, почему он не работает, когда я пытаюсь открыть файл со своего компьютера?