Question

W3.CSS是非常新的网络技术，除了w3schools.com之外，我找不到任何有关它的信息。我想知道这里是否有人知道如何让他们的sidenav开始开放？

这是一个工作示例，显示了一个实际操作： https://jsfiddle.net/8orgp5xv/

@import 'http://www.w3schools.com/w3css/w3full.css';

<nav id="id01" class="w3-sidenav white w3-depth-2">
  <a href="#" class="w3-closenav w3-large">Close ×</a>
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>		
</nav>
<div class="w3-content">
  <div class="w3-header teal">
    <a href="#id01" class="w3-opennav w3-xlarge">☰</a> 
    <h1>My Header</h1>
  </div>
  <img src="img_car.png" alt="Car" width="100%">
  <div class="w3-panel">
    <p>
      A car is a wheeled, self-powered motor vehicle used for transportation.
      Most definitions of the term specify that cars are designed to run primarily on roads,
      to have seating for one to eight people,
      to typically have four wheels. (Wikipedia)
    </p>
  </div>
  <div class="w3-footer teal">
    <h5>Footer</h5>
    <p>Footer information goes here</p>
  </div>
</div>

我只需要知道如何在页面加载时开始打开。

我试图弄乱w3-sidenav和w3-closenav而没有运气。有人知道吗？

Answer 1

代码的相关位似乎是：

.w3-sidenav:target {
  width: 25%;
  display: block;
}
.w3-sidenav:target + .w3-content {
  margin-left: 25%; 
}
.w3-sidenav:target + .w3-content .w3-opennav {
  display: none !important;
}
.w3-sidenav:target + .w3-content .w3-closenav {
  display: block !important;
}

这意味着导航显示/隐藏和周围的布局更改由CSS :target和散列片段驱动。这意味着除非你重写或复制这些规则并使用.w3-sidenav:not(:target)并更改a元素触发sidenav或类似的东西，否则很难说明在加载sidenav的情况下加载布局CSS。

毋庸置疑，通过在页面加载时设置适当的哈希，或者更好的是，重写整个组件以使用JavaScript而不是哈希片段和:target，这是微不足道的。

Answer 2

首先，W3.CSS不是“非常新的网络技术”。这只是一个样式表。

如果您想知道如何使用它，请参阅作者的文档，或学习CSS以直接理解它。

在这种情况下，打开sidenav的代码是

.w3-sidenav:target {
    width: 25%;
    display: block;
}

:target是一个伪类，它匹配ID（或名称）等于片段标识符的元素（#之后的URI部分）。

因此，您应该使用一些JS在页面加载时将片段标识符设置为元素的id。这可以使用hash：

完成

document.location.hash = 'id01';

document.location.hash = 'id01';

@import 'http://www.w3schools.com/w3css/w3full.css';

<nav id="id01" class="w3-sidenav white w3-depth-2">
  <a href="#" class="w3-closenav w3-large">Close ×</a>
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>		
</nav>
<div class="w3-content">
  <div class="w3-header teal">
    <a href="#id01" class="w3-opennav w3-xlarge">☰</a> 
    <h1>My Header</h1>
  </div>
  <img src="img_car.png" alt="Car" width="100%">
  <div class="w3-panel">
    <p>
      A car is a wheeled, self-powered motor vehicle used for transportation.
      Most definitions of the term specify that cars are designed to run primarily on roads,
      to have seating for one to eight people,
      to typically have four wheels. (Wikipedia)
    </p>
  </div>
  <div class="w3-footer teal">
    <h5>Footer</h5>
    <p>Footer information goes here</p>
  </div>
</div>

是否有可能在W3.CSS中开启sidenav？

2 个答案: