0

What happened to w3-sidenav? We now only seem to have w3-sidebar which is not as good as it always displays in large (laptop, desktop) machines.

Is it possible to use w3-sidebar, but avoid the always-on problem for large screens? I want it visible only when I say.

Rewind
  • 2,554
  • 3
  • 30
  • 56

1 Answers1

0

The w3 tutorials suggest that you use a class="w3-sidebar w3-bar-block" to build a side nav. You have different option of always display etc:

1) Always Display: Add Style="width=25%", and then to the adjacent div, add style="margin-left:25%"

2)Open over content: a) add to sidebar style="display:none" id="mySideBar" <button onClick="we-close" class="w3-bar-iitem w3-large">Close &times; </button>

b) Add to content (Adjacent Div): <button class="w3-button w3-large" onClick="W3-open()">&#9776; </button>

c) Add script 

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

Another option with this is to open the sidebar over the whole page, in which case you will use the same code as option 2 above, just add to the JS w3-open() function: document.getElementById("mySideBar").style.width="100%";

3) Collapsible & Responsive: (I think this is the one you will probably prefer): a) Define sidebar div with 

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) Define the main wrapper div with 

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

c) insert the javascript as per the above option 2, both w3-open() & w3-close()

Do not quote my code above, I just typed it freehand, so its probably riddled with errors.

Here is the w3school script for option 3

You can read more about sidebars here.

Jeffery Smith
  • 1
  • 2