Important Notice:

Course Content
CSS Framework (Chapter- 5) M2-R5.1
About Lesson

Always Display the 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>

 

Right-sided Side Navigation

<div class=”w3-sidebar w3-bar-block w3-card” style=”width:25%;right:0;”>

  <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>

 

Sidebar with Dropdown

<div class=”w3-sidebar w3-bar-block”>
  <a href=”#” class=”w3-bar-item w3-button”>Link 1</a>
  <a href=”#” class=”w3-bar-item w3-button”>Link 2</a>
  <div class=”w3-dropdown-hover”>
    <button class=”w3-button”>Dropdown <i class=”fa fa-caret-down”></i></button>
    <div class=”w3-dropdown-content w3-bar-block”>
      <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 3</a>
</div>

 

error: Content is protected !!