HTML адаптивное верхнее меню навигации
Итак, у меня возникли проблемы с попыткой создать Отзывчивое верхнее навигационное меню.. Я смог отобразить строку меню гамбургера, но javascript, когда пользователь щелкает значок, не работает.
Вот как сейчас выглядят мои HTML, CSS и JavaScript. Я слежу за w3schools.com, чтобы создать свой собственный веб-сайт.
HTML
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}/* Add a black background color to the top navigation */
.topnav {
background-color: #8585e0;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.active {
background-color: #00e68a;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
} <!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Cannon Homepage</title>
<link rel = "stylesheet" href = "css/style.css">
<link rel = "javascript" href = "script/javascript.js">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class = "topnav" id = "myTopnav">
<a href = "index.html" class = "active">Home</a>
<a href = "about.html">About</a>
<a href = "accomplishments.html">Accomplishments</a>
<a href = "hobbies.html">Hobbies</a>
<a href = "contact.html">Contact</a>
<a href = "javascript:void(0);" class = "icon" onclick = "myFunction()">
<i class = "fa fa-bars"></i>
</div>
<div style = "padding-left:16px">
<h2>Welcome to my website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>Было бы здорово, если бы вы могли сказать мне, что не так с функцией onclick в javascript и css, и посмотреть, как я могу заставить значок меню гамбургера действительно открываться и закрываться.
@Zlytherin Отображается значок гамбургера. Я хочу, чтобы значок мог всплывать, как показано здесь w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav, это то, что я пытаюсь сделать
@Zlytherin Я пытаюсь сделать значок раскрывающимся меню, чтобы вы могли видеть меню навигации в режиме рабочего стола, вы можете видеть все меню, но когда он находится в режиме планшета или смартфона, вы нажимаете кнопку трехстрочное меню значков, чтобы развернуть раскрывающееся меню. Это моя конечная цель здесь.
ваш код должен работать нормально. и вы должны закрыть свой тег привязки
@KANAYOAUSTINKANE Хорошо, как же так, когда я запускаю index.html из своей папки, которая сейчас находится на моем рабочем столе. Я могу просматривать веб-страницы во всех режимах рабочего стола, планшета и смартфона. Я нажимаю F12 и перехожу в режим смартфона. Я не могу щелкнуть значок гамбургера, но когда я запускаю фрагмент кода здесь, в stackoverflow, просматриваю его на полной странице и выполняю те же шаги, что упоминались ранее, метод F12 и значок гамбургера, кажется, открываются. Итак, почему он не открывается, когда я нахожусь в режиме разработки с рабочего стола. Мне нравится, когда он ОТКРЫТ! Это странно!
@ Азазель, я действительно не знаю, почему. но я предполагаю, что над вашей панелью меню может быть другой элемент, и поскольку его фон прозрачен, вы его не заметите. вы можете добавить это в свой стиль привязки CSS и посмотреть, поможет ли это z-индекс: 10;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, что нашел проблему. Вы используете <link> для файла javascript, вместо этого используйте <script> и поместите его в конец файла html, и он должен работать правильно:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Cannon Homepage</title>
<link rel = "stylesheet" href = "css/style.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class = "topnav" id = "myTopnav">
<a href = "index.html" class = "active">Home</a>
<a href = "about.html">About</a>
<a href = "accomplishments.html">Accomplishments</a>
<a href = "hobbies.html">Hobbies</a>
<a href = "contact.html">Contact</a>
<a href = "javascript:void(0);" class = "icon" onclick = "myFunction()">
<i class = "fa fa-bars"></i>
</div>
<div style = "padding-left:16px">
<h2>Welcome to my website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- here -->
<script type = "text/javascript" src = "script/javascript.js"></script>
</body>
</html>
Ха-ха! Спасибо чувак! Оно работает! Я почти собрался вырезать и вставить из моего javascript.js весь скрипт в конец моего HTML, но вместо этого я просто скопировал ссылку на скрипт в файл js, и это, кажется, помогло! Я обновил страницу и сделал метод F12 в режиме iPhone, и значок гамбургера теперь работает! Ты бомба! Вы, сэр, заслуживаете печенья.
Нет проблем чувак :)
это одна из тех раздражающих вещей, которые я просто ненавижу в целом, независимо от того, какой тип кодирования вы используете. Всегда есть этот подлый маленький ублюдок, который не будет работать, и всего одна чертова строка кода решает проблему!
Да, бывает. Нам просто нужно продолжать изучать причуды, и однажды они обретут смысл. Удачного кодирования!
Значок не отображается при запуске, как это должно работать?