Max Mustermane person

menu

Hello this is demo page for the left sidebar.

Resize the page and test the behavior.

<div class="ric-layout__large-content--with-sidebar">

  <nav class="ric-sidebar">
    <ul class="ric-sidebar__list">
      <li><h4 class="ric-sidebar__menu_heading">Menu heading 1</h4>
        <ul class="ric-sidebar__list">
          <li>Menu item 1</li>
          <li>Menu item 2</li>
        </ul>
      </li>
    </ul>
  </nav>

  <main class="ric-layout__main ric-layout__content-margin">
    ...
  </main>
</div>

The left sidebar can becomes hidden when the screen is smaller than 960px. To activate this behavior you need to add .ric-sidebar--responsive class on the body.

Then to open the sidebar you need to toggle the .ric-sidebar--opened class on the body.

Any element with the .ric-sidebar__opener class will do that automatically for you. E.g.: menu

Fake content to enable scrolling

Maecenas blandit mauris sit amet velit hendrerit porta. Aenean id turpis condimentum, scelerisque sapien vel, convallis orci. Sed malesuada iaculis facilisis. Quisque sit amet pharetra urna. Vestibulum aliquam ligula ex. In interdum purus ac facilisis pulvinar.

Nulla non lorem nec mauris ornare pellentesque. Maecenas molestie ornare sapien, ac tristique orci pulvinar in. Suspendisse vel faucibus nibh, vel luctus lectus. Curabitur non turpis quis quam tincidunt malesuada. Aenean rutrum arcu sed arcu vestibulum

sit amet imperdiet mi molestie. Vestibulum fermentum, dui placerat sodales vestibulum, sapien ex tincidunt ipsum, vel volutpat ante dui iaculis diam. Nullam sit amet metus et velit hendrerit aliquam in condimentum risus. Nullam id lacus maximus, suscipit sapien quis, sollicitudin quam. Vestibulum imperdiet lacus a fringilla dapibus.

Nulla non lorem nec mauris ornare pellentesque. Maecenas molestie ornare sapien, ac tristique orci pulvinar in. Suspendisse vel faucibus nibh, vel luctus lectus. Curabitur non turpis quis quam tincidunt malesuada. Aenean rutrum arcu sed arcu vestibulum

sit amet imperdiet mi molestie. Vestibulum fermentum, dui placerat sodales vestibulum, sapien ex tincidunt ipsum, vel volutpat ante dui iaculis diam. Nullam sit amet metus et velit hendrerit aliquam in condimentum risus. Nullam id lacus maximus, suscipit sapien quis, sollicitudin quam. Vestibulum imperdiet lacus a fringilla dapibus.