Выпадающее меню дает ошибку

Question

Итак, я разрабатываю сайт для школы. Я хочу сделать меню, которое будет отзывчивым и сворачивающимся. Я не могу позволить ей сложиться или сложиться. Я использовал JavaScript, Css3 и Html5. Вероятно, это будет невозможно сделать с помощью только JavaScript, Css3 и Html5. Я согласен с другими языками программирования, но предпочитаю использовать эти три.

Javascript:

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
    x.className += "responsive";
} else {
    x.className = "topnav";
}
}

HTML5:

<body>

 <div class="topnav" id="myTopnav">
 <ul class="topnav">
  <li><a href="index.html"><img class="home" alt="home" src="http://projekpeople.com/wp/student2/wp-content/uploads/sites/3/2015/09/home-logo-hi.png"></a></li>   
  <li><a class="subjects" href="webdesign_important.html">IMPORTANT SUBJECTS</a></li>
  <li><a class="subjects" href="webdesign_opdrachten.html">OPDRACHTEN</a></li>
  <li><a class="subjects" href="webdesign_css.html">CSS FILES</a></li>
  <li><a class="subjects" href="webdesign_donate.html">DONATE</a></li>
  <li><a class="subjects" href="webdesign_aboutme.html ">ABOUT ME</a></li>
  <li><a class="subjects" href="webdesign_form.html">FORM</a>
   <li class="icon">
<a class="menu" href="javascript:void(0);" style="font-size: 20px;"    onclick="myFunction()">☰</a>
  </li>
  </ul>
  </div>

Css3:

.topnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFF;
text-align: right;
float: right;
}

ul.topnav li {float: right;}

ul.topnav li a {
display: inline-block;
color: rgba(0, 0, 0, 0.5);
text-align: right;
padding: 16px 20px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
list-style-type: none;
height: 25px;
}

ul.topnav li a:hover {background-color: #ddd;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:1200px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
list-style-type: none;
}
}

@media screen and (max-width:1300px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
list-style-type: none;
}
ul.topnav.responsive li {
float: none;
display: inline;
list-style-type: none;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
list-style-type: none;
}
}
.menu {
text-decoration: none;
list-style-type: none;
height: 20px;
width: auto;
}

ul.topnav {
text-align: center;

}

Возможно, это глупая ошибка, но все же спасибо парню, который нашел время мне помочь! : D

javascript html css drop-down-menu responsive-design

0

T_rulezzz 6 Янв 2017 в 20:38

Если ваш сайт огромен, я рекомендую вам использовать фреймворк css, такой как bootstrap, материализовать css, Fundation и т. Д., Эти фреймворки адаптивны, вам нужно только использовать правила фреймворка.

–

Jorge Mejia

6 Янв 2017 в 20:56

Вы пытаетесь добавить "отзывчивый" к div, но ваш CSS проверяет наличие этого класса на ul. Кроме того, вы добавляете строку к className, чтобы сделать "topnavresponsive", вам нужно добавить пробел, чтобы разделить их.

–

Matthew Wilcoxson

6 Янв 2017 в 21:03

Answer 1

Попробуйте добавить пробел перед словом "отзывчивый"

Как это:

x.className += " responsive"

Классы разделяются пробелом

Надеюсь, что это все. :-).

0

Jonathan Wood 6 Янв 2017 в 20:55

Я попробовал. По-прежнему не работает :( ссылка: webdesign-trulezzz.c9users.io/index.html

–

T_rulezzz

6 Янв 2017 в 23:32

Answer 2

Посмотрите, поможет ли вам это: http://codepen.io/panchroma/pen/GrJmVq

Я сделал следующие исправления:

вам нужен пробел в вашем javascript в строке x.className += " responsive";, как отмечалось ранее Мэтью Уилкоксоном и < a href = "https://stackoverflow.com/users/7114773/jonathan-wood"> Джонатан Вуд
во-вторых, возникла проблема с тем, где этот JS добавляет «отзывчивый» класс. Ожидается, что ваш CSS будет применен к <ul class="topnav">, но JS добавляет его к <div class="topnav" id="myTopnav">

Мое решение заключалось в том, чтобы переместить id="myTopnav" на ul, хотя есть и другие способы достижения того же результата.

Я заметил, что ваш CSS все еще нуждается в доработке, потому что я заметил, что значок для мобильной навигации прыгает, но, надеюсь, это снова заставит вас двигаться.

Удачи!

0

Community 23 Май 2017 в 13:30

Выпадающее меню дает ошибку

2 ответа

Похожие вопросы

Новые вопросы

javascript