Question

w3-sidenav发生了什么？现在，我们似乎只有w3-sidebar了，它不如通常在大型（笔记本电脑，台式机）计算机上显示的那样好。

是否可以使用w3-sidebar，但可以避免大屏幕始终出现问题？我只希望我说出它即可。

Answer 1

w3教程建议您使用class =“ w3-sidebar w3-bar-block”构建侧面导航。您可以选择始终显示等选项：

1）始终显示：添加Style =“ width = 25％”，然后向相邻的div添加style =“ margin-left：25％”

2）打开内容： a）添加到侧边栏style="display:none" id="mySideBar" <button onClick="we-close" class="w3-bar-iitem w3-large">Close × </button>

b）添加到内容（相邻分区）：<button class="w3-button w3-large" onClick="W3-open()">☰ </button>

c）添加脚本

function w3-open(){ 
      document.getElementById("mySideBar").style.display="block";
   }
   function w3-close(){
      document.getElementById("mySideBar").style.display="none";
   }

与此相关的另一个选项是在整个页面上打开侧栏，在这种情况下，您将使用与上面的选项2相同的代码，只需将其添加到JS w3-open（）函数中：document.getElementById("mySideBar").style.width="100%";

3）可折叠且响应迅速：（我认为这是您可能更喜欢的一种）： a）用

定义侧边栏div

class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width: 200px" id="mySideBar">
    <button class="w3-bar-item w3-button w3-large we-hide-large" onClick="w3-close()">close &times; </button>

b）使用

定义主包装div

    <div class="w3-main" style="margin-left:200px"> 
       <div class="w3-blue"> 
         <button class="w3-button …." onClick="w3-open()"> &#9776; </button> 
       </div> 
   </div>

c）按照上述选项2插入javascript，包括w3-open（）和w3-close（）

请勿在上面引用我的代码，我只是徒手输入，因此可能充满错误。

Here is the w3school script for option 3

You can read more about sidebars here.

w3-sidenav怎么了？是否可以使用w3-sidebar而没有缺点？

1 个答案: