SideNav.css

How To Use

Include SideNav.css and font awesome inside head tag Or directly use Minified CSS

<link rel="stylesheet" href="css/SideNav.css"/>
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css"/>

For HTML use this example

<div id='snav' class='en'>
  <ul>
    <li>
      <a href='#'>
        <i class="fa fa-home"></i>
        <span>Home</span>
      </a>
    </li>
  </ul>
</div>

Customize

- Use en class for LTR or ar class for RTL for #snav div

- Repeat li tag and it's content for more items

- include your URL inside href attribute

- use Font Awesome icons with i tag

- inside span tag you can title your menu item