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.