Installation et utilisation

Documents / /
Omega est une jolie sidebar responsive en pure javascript.

Omega Sidebar Responsive Navigation

Demonstration

Démonstration

Use

Omega Sidebar is very easy to use. Start by loading the CSS and Javascript files.

CSS

<link rel="stylesheet" href="path/to/omega.css">

JS

<script src="path/to/omega.js"></script>

HTML code

Then copy the HTML code from the menu and the sidebar. (of course, to modify according to your project). HTML

<div id="omega">
<a href="#" id="logo">Sitename</a>
<div id="omega-content">

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<div class="omega-links">
<a href="#" class="button">Link</a>
<a href="#" class="button button-outline ">Link 2</a>
</div>
</div>

<button id="omega-button">☰</button>
<div id="omega-sidebar">
<div id="omega-sidebar-header"></div>
<div id="omega-sidebar-body"></div>
</div>
<div id="omega-overlay"></div>

</div>

The animation of the sidebar is in the omega-sidebar ID of the omega.css file. You can change it as you see fit.

#omega-sidebar{
...
transition: transform .2s ease-in-out;
}

The sidebar menu icons use the FontAwasome library with their associated Unicodes

#omega-sidebar-body nav ul li:first-child:before {
    content: "\f015";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

Each icon uses the selector: nth-child according to the order of appearance of the links of the menu.

#omega-sidebar-body nav ul li:nth-child(2):before {
    content: "\f15c";
}

Updates

1.0

  • N/C