如何使用列表、javascript 和 @media 创建响应式导航栏答案

【问题标题】：How can i create responive navbar with list, javascript and @media如何使用列表、javascript 和 @media 创建响应式导航栏
【发布时间】：2020-12-20 05:25:19
【问题描述】：

我正在尝试使用列表、javascript 和@media 创建一个响应式导航栏。当我将浏览器的大小调整到 ~700px 时，列表样式中的项目是“显示：无”，并且出现了汉堡菜单。如果我不单击汉堡菜单，当我将浏览器调整为正常大小时，列表仍然显示内联块，但是当我单击汉堡菜单以在“列表项”中显示菜单项时，我仍然得到列表- 当我将浏览器大小调整为正常时的项目显示类型。

我错过了什么吗？

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 (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>

我的Code

感谢任何输入！

【问题讨论】：

你不能选择使用像 bootstrap 这样的 CSS 库吗？
我可以使用引导程序，但我更喜欢手动操作以适应它。如果我先对代码感到满意，也许我可以稍后使用引导程序...

标签： javascript html css

【解决方案1】：

有大量不同高度和宽度的屏幕和设备，因此很难为每个设备创建一个准确的断点。为简单起见，您可以在不使用任何样式库的情况下定位五个组。

/* 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-tags 和 li-tags 定义空间宽度、填充和边距。

【讨论】：

【解决方案2】：

使用 js 应用的 Css 是一个 内联规则，它比文件中的 css 规则具有更高的优先级。因此，当您使用 js 设置 list-item 时，您的 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

【讨论】：