В настоящее время я пытаюсь создать веб-сайт с нуля, поскольку у меня есть время попрактиковаться.
Пока у меня есть работающая панель навигации (та, которая на самом деле не переводит вас в другую). страниц пока нет, но на самом деле работает).
Я решил сделать эту панель навигации отзывчивой, так как она довольно большая. Я дал вариант вертикальной черты одним нажатием кнопки. Отметим, что кнопка доступна пользователю только тогда, когда ширина браузера меньше 900 пикселей.
Моя текущая проблема заключается в том, что при нажатии кнопки ничего не отображается. Я убедился, что javascript для кнопки работает, методом проб и ошибок, но все еще не повезло.
Я новичок в этом, так что извините, если моя ошибка глупа, но любая помощь будет принята с благодарностью .
Чтобы дать представление о том, чего я пытаюсь достичь, вот ссылка, которую я использовал в качестве руководства: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
Если проблема заключается в связи с тем, что я использую тег «неупорядоченный список» для выравнивания моей навигационной панели по правому краю, а моего lo go по левому краю, тогда любой альтернативный способ также приветствуется!
Спасибо.
Ps игнорируйте названия каждого раздела в навигации, сейчас я просто заполняю пробелы ^^
body{
background-color: grey;
margin:0;
}
/*----------------------NAVIGATION BAR----------------------*/
.nav-container{
background-color: white;
float: right;
height: 80px;
position: absolute;
width: 100%;
margin-top: 0;
}
#nav-menu{
float:right;
padding: 13px 13px;
}
#nav-menu li{
display:inline-block;
font-size: 20px;
padding: 10px 12px;
text-align: center;
}
#nav-menu li a:not(.nav-active){
color: black;
text-decoration: none;
}
#nav-menu li a:hover:not(#logo){
color: #0aaaa0;
}
.nav-active {
color: #0aaaa0;
text-decoration: none;
}
/* LOGO */
#logo{
padding: 0px 13px;
float: left;
font-size: 27px;
}
/* Hide the link that should open and close the topnav on small screens */
#nav-menu .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: 900px) {
#nav-menu li a:not(.icon) {display: none;}
#nav-menu li 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: 900px) {
.nav-bar.responsive {position: relative;}
.nav-bar.responsive li a.icon{
position: relative;
right: 0;
top: 0;
}
.nav-bar.responsive li a{
float: none;
display: block;
text-align: left;
position: relative;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="practice.css">
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- NAVIGATION BAR -->
<div class="nav-container">
<ul id="logo">Dellion</ul>
<ul class="nav-bar" id="nav-menu">
<li><a class="nav-active" href="index.html">Home</a></li>
<li><a href="cars.html">Cars</a></li>
<li><a href="charities.html">Charities</a></li>
<li><a href="pros.html">Pros</a></li>
<li><a href="pros.html">Games</a></li>
<li><a href="auctions.html">Auctions</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a></li>
</ul>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-menu");
if (x.className === "nav-bar") {
x.className += " responsive";
} else {
x.className = "nav-bar";
}
}
</script>
</body>
</html>