Блог

Я пытаюсь создать адаптивную навигационную панель с помощью list amp; javascript и @media. Когда я изменяю размер браузера до ~ 700px, элемент в стиле списка становится «display: none» и появляется меню гамбургера. Если я не нажимаю меню гамбургера, при изменении размера браузера до нормального размера список по-прежнему отображает встроенный блок, но когда я нажимаю меню гамбургера для отображения элемента меню в «элемент списка», я все равно получаю тип отображения элемента списка при изменении размера моего браузера на обычный.

Я что-то упускаю?

 function myFunction3() {

x = document.getElementsByClassName("li-tag");
    if (x[0].style.display === 'none'){
        for (index = 0; index<x.length; index  )
        {
            x[index].style.display = 'list-item';
        }
    } else {
        for (index = 0; index<x.length; index  )
        {
            x[index].style.display = 'none';
        }
    }

}
  

Мой @Media

 @media (max-width: 700px){
    .toggle-button{
        display:block;
    }

    .li-tag {
        display:none;
    }
}
  

CSS навигационной панели:

 .tags{
    background: #0000cc;
    color:white;
    font-family: 'Alata', sans-serif;
    width: 100%;
    text-align: center;
}
.ul-tag {
    list-style-type:none;
    width: 70%;
    margin:auto;
    text-align: center;
}
.li-tag {
    display:inline-block;
    font-family: 'Alata', sans-serif;
    font-size:25px;
    margin-right: 10px;
}
  

HTML — код:

 <div class ="tags" >
        <a href="#" class ="toggle-button" onclick = "myFunction3()">☰</a>
        <ul class = "ul-tag">
            <li class = "li-tag "><a href="#home">Home</a></li>
            <li class = "li-tag "><a href="#news">Type 1</a></li>
            <li class = "li-tag"><a href="#contact">Type 2</a></li>
            <li class = "li-tag "><a href="#about">Type 3</a></li>
            <li class = "li-tag "><a href="#about">Type 4</a></li>
            <li class = "li-tag "><a href="#about">Type 4</a></li>
            <li class = "li-tag "><a href="#about">Type 4</a></li>
            <li class = "li-tag "><a href="#about">Type 4</a></li>
            <li class = "li-tag "><a href="#about">Type 4</a></li>
</div>
  

Мой Код

Приветствуется любой ввод!

CSS, применяемый с использованием js, является встроенным правилом, которое имеет более высокий приоритет, чем правила css в файле.Итак, когда вы устанавливаете list-item с помощью js, ваше inline-block правило больше не будет работать. Я предлагаю добавить класс к вашим элементам в js и управлять display свойством внутри класса.

JS:

 function myFunction3() {

var x = document.getElementsByClassName("li-tag");
  for (index = 0; index<x.length; index  )
  {
    x[index].classList.toggle('list_view');
  }
}
  

CSS:

 @media (max-width: 700px){
    .toggle-button{
        display:block;
    }

    .li-tag {
        display:none;
    }
    /* new */
    .li-tag.list_view{
        display: list-item;
    }

}
  

JSFiddle

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

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
  

Определите пространственную ширину стилей, отступы и поля для тегов, ul-тегов и li-тегов в каждой группе.