amelieykw/00 - Content.md

Last active April 10, 2018 09:23

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/amelieykw/b6a7cb609dc0830038e1803ce08240c8.js"></script>
Save amelieykw/b6a7cb609dc0830038e1803ce08240c8 to your computer and use it in GitHub Desktop.

Download ZIP

[W3.CSS - Vertical Navigation Sidebar] #W3.CSS #Sidebar #Navigation #CSS #HTML

Raw

00 - Content.md

With side navigation, you have several options:

Always display the navigation pane to the left of the page content
Use a collapsible, "fully automatic" responsive side navigation
Open navigation pane over the left part of the page content
Open navigation pane over all of the page content
Slide the page content to the right when opening the navigation pane
Display the navigation pane on the right side instead of the left side

Raw

01 - Always Display the Sidebar.md

(`w3-sidebar w3-bar-block`)

<div class="w3-sidebar w3-bar-block" style="width:25%"> 
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div style="margin-left:25%">
... page content ...
</div>

EXample :

<!DOCTYPE html>
<html>
  <title>W3.CSS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

  <!-- Sidebar -->
  <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%">
    <h3 class="w3-bar-item">Menu</h3>
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>

  <!-- Page Content -->
  <div style="margin-left:25%">

  <div class="w3-container w3-teal">
    <h1>My Page</h1>
  </div>

  <img src="img_car.jpg" alt="Car" style="width:100%">

  <div class="w3-container">
  <h2>Sidebar Navigation Example</h2>
  <p>The sidebar with is set with "style="width:25%".</p>
  <p>The left margin of the page content is set to the same value.</p>
  </div>

  </div>
      
</body>
</html>

Raw

02 - Open the Sidebar Navigation Over a Part of the Content.md

(`w3-sidebar w3-bar-block` & `display:none` & `function w3_open()`)

function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}

Example :

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

  <!-- Sidebar -->
  <div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar">
      <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button>
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>

  <!-- Page Content -->
  <div class="w3-teal">
      <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
      <div class="w3-container">
        <h1>My Page</h1>
      </div>
  </div>

  <img src="img_car.jpg" alt="Car" style="width:100%">

  <div class="w3-container">
      <p>This sidebar is hidden by default, (style="display:none")</p>
      <p>You must click on the "hamburger" icon (top left) to open it.</p>
      <p>The sidebar will hide a part of the page content.</p>
  </div>

  <script>
      function w3_open() {
          document.getElementById("mySidebar").style.display = "block";
      }
      function w3_close() {
          document.getElementById("mySidebar").style.display = "none";
      }
  </script>
     
</body>
</html>

Raw

03 - Open the Sidebar Navigation Over the Content .md

(`w3-sidebar w3-bar-block` & `display:none` & `function w3_open()`)

function w3_open() {
    document.getElementById("mySidebar").style.width = "100%";
    document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}

Raw

04 - Collapsible Responsive Side Navigation.md

(`w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left` & `width:200px;` & `"w3-main" style="margin-left:200px"`)

This Sidebar is always displayed on screens wider than 992px, and hidden on small screens (replaced with a clickable menu icon (☰).

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

  <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 w3-hide-large" onclick="w3_close()">Close &times;</button>
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>

  <div class="w3-main" style="margin-left:200px">
      <div class="w3-teal">
          <button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</button>
          <div class="w3-container">
            <h1>My Page</h1>
          </div>
      </div>

      <div class="w3-container">
          <h3>Responsive Sidebar</h3>
          <p>The sidebar in this example will always be displayed on screens wider than 992px, and hidden on tablets or mobile phones (screens less than 993px wide).</p>
          <p>On tablets and mobile phones the sidebar is replaced with a menu icon to open the sidebar.</p>
          <p>The sidebar will overlay of the page content.</p>
          <p><b>Resize the browser window to see how it works.</b></p>
      </div>

  </div>

  <script>
      function w3_open() {
          document.getElementById("mySidebar").style.display = "block";
      }
      function w3_close() {
          document.getElementById("mySidebar").style.display = "none";
      }
  </script>
     
</body>
</html>

Raw

05 - Sidebar with Accordion.md

<div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
  <a href="#" class="w3-bar-item w3-button">Link 1</a> 
  <button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button>
  <div id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
    <a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#" class="w3-bar-item w3-button">Link</a>
  </div>
  <div class="w3-dropdown-click">
    <button class="w3-button" onclick="myDropFunc()">Dropdown</button>
    <div id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
  </div>
  <a href="#" class="w3-bar-item w3-button">Link 2</a> 
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

Example :

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:160px;">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">
  Accordion <i class="fa fa-caret-down"></i>
  </button>
  <div id="demoAcc" class="w3-hide w3-white w3-card">
    <a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#" class="w3-bar-item w3-button">Link</a>
  </div>

  <div class="w3-dropdown-click">
    <button class="w3-button" onclick="myDropFunc()">
      Dropdown <i class="fa fa-caret-down"></i>
    </button>
    <div id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card">
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
  </div>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div class="w3-container" style="margin-left:160px">
<h2>Sidebar Accordion</h2>
<p>In this example, we have added an accordion and a dropdown menu inside the side navigation.</p>
<p>Click on both to understand how they differ from each other. The accordion will push down the content, while the dropdown lays over the content.</p>
</div>

<script>
function myAccFunc() {
    var x = document.getElementById("demoAcc");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className += " w3-green";
    } else { 
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace(" w3-green", "");
    }
}

function myDropFunc() {
    var x = document.getElementById("demoDrop");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className += " w3-green";
    } else { 
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace(" w3-green", "");
    }
}
</script>

</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment