This time I will share jQuery Plugin and tutorial about Create A Simple Nav Bar with jQuery and CSS – OA Navbar, hope it will help you in programming stack.
OA Navbar is a simplest jQuery plugin that lets you create a nice clean horizontal navigation bar using JavaScript, scss and sass.
How to use it:
1. Load the jQuery OA Navbar plugin’s stylesheet in the header and the oa-navbar.js script in the footer after jQuery library.
1 |
<link href="css/oa-navbar.css" rel="stylesheet"> |
2 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
3 |
<script src="res/oa-navbar.js"></script> |
2. Markup html structure.
2 |
<div class="item">Home</div> |
3 |
<div class="item active">Plugins</div> |
4 |
<div class="item">Services</div> |
5 |
<div class="item">Blog</div> |
6 |
<div class="item">Contact</div> |
7 |
<div class="item">About</div> |
3. Initialize the nav bar plugin.
1 |
$('.navbar').OAnavbar (); |
4. Customize the plugin in oa-navbar.scss.
05 |
$mainBackground: rgba(233, 234, 237, 1); |
10 |
$navbarBackgroundColor: rgba(233, 234, 237, 1); |
19 |
$navMarginBottom: 10px; |
24 |
$navbarItemMarginTop: 8px; |
27 |
$navbarItemMarginRight: 2px; |
30 |
$navbarItemMarginBottom: 5px; |
33 |
$navbarItemMarginLeft: 2px; |
36 |
$lineColor: rgba(162, 162, 162, 1); |
Change log:
2016-11-07
2016-06-14
This awesome jQuery plugin is developed by comdan66. For more Advanced Usages, please check the demo page or visit the official website.
