This time I will share jQuery Plugin and tutorial about jQuery Plugin To Create Fully Responsive Breadcrumbs – asBreadcrumbs, hope it will help you in programming stack.
asBreadcrumbs is a lightweight jQuery plugin that turns a list of text links into a fully responsive breadcrumb navigation for better readability on small screens.
How to use it:
1. Load jQuery library and the jQuery asBreadcrumbs plugin in the document.
1 |
< script src = "//code.jquery.com/jquery-1.11.1.min.js" ></ script > |
2 |
< script src = "src/jquery-asBreadcrumbs.js" ></ script > |
2. Create a breadcrumb navigation using Html ordered list.
01 |
< ol class = "breadcrumb" > |
02 |
< li >< a href = "#" >Home</ a ></ li > |
03 |
< li >< a href = "#" >Getting Started</ a ></ li > |
04 |
< li >< a href = "#" >Library</ a ></ li > |
05 |
< li >< a href = "#" >Document</ a ></ li > |
06 |
< li >< a href = "#" >Components</ a ></ li > |
07 |
< li >< a href = "#" >JavaScript</ a ></ li > |
08 |
< li >< a href = "#" >Customize</ a ></ li > |
09 |
< li class = "active" >Data</ li > |
3. Initialize the plugin with default settings.
1 |
$( '.breadcrumb' ).asBreadcrumbs({ |
2 |
namespace: 'breadcrumb' |
4. The sample CSS to style the breadcrumb navigation.
05 |
background-color : #f3f4f5 ; |
09 |
.breadcrumb > li { display : inline- block ; } |
11 |
.breadcrumb > li + li:before { |