CSS 调整问题菜单的大小

Question

你好，我有一个轻微的大小调整问题：

网站：Thelazylife.nl < 有问题的工作网站

HTML

<body>
<div class="headerContainer">
<div id="nav" class="nav">
    <div class="logo">Logo</div>
    <span onclick="abc()"><i class="fa fa-bars"></i></span>
    <ul id="toggle">
        <li>Home</li>
        <li>Over</li>
        <li>Contact</li>
        <li>Locatie</li>
    </ul>
</div>
<div class="box1">
    Box 1
</div>

<div class="box2">
    Box 2
</div>

<div class="box3">
    Box 3
</div>
</div>
</body>

CSS

body{
 padding:0;   
 margin:0;

}

.headerContainer{
    height:100vh;
    display:grid;
    position: relative;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50px 1fr 1fr;
    grid-template-areas: 
    "navigation navigation"
    "box1 box2"
    "box3 box3"
    ;
}

.nav{
    grid-area:navigation;

display: flex;
align-items: center;
justify-content: space-around;
background-color: red;




}

.nav ul li:hover{
    background-color:orange;
}

.nav ul{
    display:flex;
    list-style-type: none;

}

.nav ul li {
    padding:20px;
    background-color: green;
    margin-left:20px;
}

i.fa{
    display:none;
    font-size:22px;
}

.logo{
    font-size:22px;
}

.box1{
    grid-area:box1;
    background:blue;

}

.box2{
    grid-area:box2;
    background:green;
}

.box3{
    grid-area:box3;
    background:yellow;
}




@media screen and(max-width: 600px) {

body{
    margin:0;
    padding:0;
}



.nav ul {
    display:none;
    position: absolute;
    flex-direction:column;

 top:25px;
 right:0;
 width:300px;

}

.nav ul li:hover{
    background-color:orange;
}

i.fa{
    display:block;
}

}

JS

function abc(){
    var x = document.getElementById("toggle");
    if(x.style.display == 'block')
    x.style.display = 'none';
 else
    x.style.display = 'block';
}

刚开始看起来很丑，但问题出在菜单上。重现问题的步骤：将浏览器的大小调整为小于 600 像素，然后再次将浏览器调整为桌面视图。然后菜单消失了。此外，当调整到移动视图，然后打开菜单，然后调整浏览器大小时，菜单会保持列模式。

我该如何解决这个问题？

谨致问候并感谢您的提前帮助！

Answer 1

您可以简单地使用元素的悬停属性而不是 JS 代码来实现您想要的屏幕尺寸。

As per your need simply remove your JS code and add the following line of css:

span:hover + ul {
    display: flex;
}

Answer 2

根据您的问题，您需要在小于 600 像素的设备上禁用作为单列出现的导航栏。您采用的方法是为桌面和移动设备更新相同的菜单栏，为此您需要使用 onresize 事件来不断检查 window 的大小。 Read more here

另一种方法是您可以简单地创建两个导航菜单，一个用于桌面，一个用于移动，然后只需使用 CSS 媒体查询根据 window 大小显示一个。这将轻松解决您的目的。

CSS 调整问题菜单的大小

CSS Resizing issue menu

html

css

menu

flexbox

css-grid