Question

*编辑：每个人都不喜欢这篇文章：（

所以我想要一个按钮（我将制作一个汉堡包文字），当我单击该按钮时，我希望整个页面（导航元素）变为（100％宽度和100高度），然后将flex放入其中）的导航菜单，当我再次单击该按钮时，导航元素就会消失。

我想知道的：

如何制作CSS，以便导航元素可以打开其他所有内容？位置：绝对吗？

（在我知道如何将导航元素放在其他所有元素之后- 也许显示：在导航页面上没有显示，并且在我更改显示时以某种方式将其放在所有内容上：可以通过JS看到？）

在哪里可以找到JS（因为我还不知道）来单击以编辑导航元素的CSS？

W3中的情况类似，但我可能需要将显示从无更改为可见，然后再次更改：

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

Answer 1

为了将导航设置为全屏，您应该使用CSS的position:fixed属性。为了正确隐藏和显示导航栏，您应该切换元素的类，而不是直接应用显示样式。请看下面的示例，以更好地理解它-

let btn = document.getElementById('btn');
let nav = document.getElementById('nav');

btn.addEventListener('click', function(){
  //event listener toggling the active class
  if(nav.classList.contains('active')){
    nav.classList.remove('active'); //remove active class if already added
  } else {
    nav.classList.add('active'); //add active class if not added
  }  
});

html, body{
  height: 100%;
  width: 100%;
}

nav{
  display: none; /*default in hidden state*/
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
  color: white;
}

nav.active{
  display: inline-block; /*visible if nav element contains active class, applied via JavaScript code*/
}

#btn{
  position: fixed;
  top: 40px;
  left: 10px;
  z-index: 100;
}

<nav id="nav">
  Full screen content
</nav>

<button id="btn">toggle full screen element</button>

<p>Some static content</p>

Answer 2

尝试添加CSS位置：绝对；并将z-index = 99导航到您的导航元素，然后使用onclick切换其显示。

JS，我想创建一个按钮来打开整个屏幕的导航

2 个答案: