Is it possible to have sidenav start open in W3.CSS? - css

Question

W3.CSS is a very new web technology and I cannot find any information about it other than w3schools.com. I was wondering if anyone here knows how to have their sidenav start out open?
Here is a working example that shows one in action:
https://jsfiddle.net/8orgp5xv/
#import 'http://www.w3schools.com/w3css/w3full.css';
<nav id="id01" class="w3-sidenav white w3-depth-2">
Close ×
Link 1
Link 2
Link 3
Link 4
Link 5
</nav>
<div class="w3-content">
<div class="w3-header teal">
☰
<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>
I just need to know how to make it start open when the page loads.
I tried messing with w3-sidenav and w3-closenav with no luck. Anyone know?

Answer 1

The relevant bit of code appears to be:
.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;
}
This means that the navigation show/hide and the surrounding layout changes are driven by CSS :target and hash fragments. Which means unless you rewrite or duplicate these rules and use .w3-sidenav:not(:target) and change the a element triggering the sidenav, or something similar, it's going to be difficult to tell the layout to load with the sidenav open in pure CSS.
Needless to say, this is made trivial by either setting the appropriate hash on page load, or better yet, rewriting the entire component to use JavaScript instead of hash fragments and :target.

Answer 2

First, W3.CSS is not a "very new web technology". It's just a stylesheet.
If you want to know how to use it, see the documentation of the authors, or learn CSS to understand it directly.
In this case, the code that opens the sidenav is
.w3-sidenav:target {
width: 25%;
display: block;
}
The :target is a pseudo-class that matches the element whose ID (or name) equals the fragment identifier (the part of the URI after #).
Therefore, you should use some JS to set the fragment identifier to the id of the element when the page loads. This can be done using 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">
Close ×
Link 1
Link 2
Link 3
Link 4
Link 5
</nav>
<div class="w3-content">
<div class="w3-header teal">
☰
<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>