Foundation tab
If you have a lot of content pages, you need to use the paging function.
To create a basic paging feature requires <ul>
on the element plus .pagination
categories:
Examples
<Li> <a href = " #"> 1 </ a> </ li>
<Li> <a href = " #"> 2 </ a> </ li>
<Li> <a href = " #"> 3 </ a> </ li>
<Li> <a href = " #"> 4 </ a> </ li>
<Li> <a href = " #"> 5 </ a> </ li>
</ Ul>
The current page
You can <li>
added .current
class to mark the current page:
Examples
<Li class = "current"> <a href = "#"> 1 </ a> </ li>
<Li> <a href = " #"> 2 </ a> </ li>
<Li> <a href = " #"> 3 </ a> </ li>
<Li> <a href = " #"> 4 </ a> </ li>
<Li> <a href = " #"> 5 </ a> </ li>
</ Ul>
Disable tab
If you need to set up a tab you not clickable need .unavailable
categories:
Examples
<Li> <a href = " #"> 1 </ a> </ li>
<Li> <a href = " #"> 2 </ a> </ li>
<Li class = "unavailable"> <a href = "#"> 3 </ a> </ li>
<Li> <a href = " #"> 4 </ a> </ li>
<Li> <a href = " #"> 5 </ a> </ li>
</ Ul>
Paging direction
In the first and last code> <li> Add the element .arrow
class insert HTML entities Symbol «
and »
to create a paging direction symbol:
Examples
<Li class = "arrow"> <a href = "#"> & laquo; </ a> </ li>
<Li> <a href = " #"> 1 </ a> </ li>
<Li> <a href = " #"> 2 </ a> </ li>
<Li> <a href = " #"> 3 </ a> </ li>
<Li> <a href = " #"> 4 </ a> </ li>
<Li> <a href = " #"> 5 </ a> </ li>
<Li class = "arrow"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
Paging centered
We can add the <ul> outer <div>
element and <div>
Add on .pagination-centered
classes to implement paging centered:
Examples
<Ul class = "pagination">
<Li class = "arrow"> <a href = "#"> & laquo; </ a> </ li>
<Li class = "current"> <a href = "#"> 1 </ a> </ li>
<Li> <a href = " #"> 2 </ a> </ li>
<Li> <a href = " #"> 3 </ a> </ li>
<Li> <a href = " #"> 4 </ a> </ li>
<Li> <a href = " #"> 5 </ a> </ li>
<Li class = "arrow"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
</ Div>
Breadcrumbs
Breadcrumbs navigation structure used to display the current page.
In the <ul>
on the element added .breadcrumbs
class to implement breadcrumbs. You can add <li> on .current
or .unavailable
class set the current page and not clickable effect:
Examples
<Li> <a href = " #"> Home </ a> </ li>
<Li> <a href = " #"> Private </ a> </ li>
<Li class = "unavailable"> <a href = "#"> Pictures </ a> </ li>
<Li class = "current"> Vacation </ li>
</ Ul>
Sub navigation
Switching on the page, the sub-navigation is very useful.
In the <dl>
the element is added .sub-nav
class to create a sub-navigation. In the <dt>
on the element to add a title for the selected option <dd>
Add .active
categories:
Examples
<Dt> Filter: </ dt >
<Dd class = "active"> <a href = "#"> All </ a> </ dd>
<Dd> <a href = " #"> Active </ a> </ dd>
<Dd> <a href = " #"> Pending </ a> </ dd>
<Dd> <a href = " #"> Suspended </ a> </ dd>
</ Ul>