Navigation - Foundation Framework Elements
Navigation in Foundation Framework includes pagination, Side nav, Sub nav, Top bar and Breadcrumbs.
1. Off-canvas
Off canvas menu is placed outside of the viewport and its slide will be displayed when activate it.
- Off-canvas-wrap - contains entire off-canvas layout and it hides overflows.
- Inner-wrap - page content placed inside inner-wrap.
- Off-canvas-menu - It is slide panel that can be placed either left side or right side of the view port.
- Left-off-canvas-toggle - targets left side menu.
- Right-off-canvas-toggle - targets right side menu.
- Exit-off-canvas - deactivates off-canvas menu.
- Tab-bar - It is simple navigation pattern.
2. Icon Bar
Icon bar offers a menu to quickly navigate a page through icons. It allows you to create horizontal and vertical menu.
3. Side Nav
Side nav, like you will see on our main site, is useful for sections of either a site or a page.
4. Magellan Sticky Nav
Magellan sticky nav creates fixed position navigation which helps user to find where they are on a page without scrolling.
5. Sub Nav
Sub nav used to move between different states of pages.
6. Breadcrumbs
Breadcrumbs shows navigation trail for user clicking through site.
7. Pagination
Pagination is moving between pages with the advent of longer pages using AJAX coding. It can useful for long, repititive content.
Example for Off-canvas
<div class="off-canvas-wrap" data-offcanvas> <div class="inner-wrap"> <nav class="tab-bar"> <section class="left-small"> <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a> </section> <section class="middle tab-bar-section"> <h1 class="title">Foundation</h1> </section> <section class="right-small"> <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a> </section> </nav> <aside class="left-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>Foundation</label></li> <li><a href="#">Gird</a></li> <li><a href="#">Off-canvas</a></li> <li><a href="#">Interchange</a></li> <li><a href="#">Accordion</a></li> <li><a href="#">Orbit Slider</a></li> </ul> </aside> <aside class="right-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>Foundation</label></li> <li><a href="#">Gird</a></li> <li><a href="#">Off-canvas</a></li> <li><a href="#">Interchange</a></li> <li><a href="#">Accordion</a></li> <li><a href="#">Orbit Slider</a></li> </ul> </aside> <section class="main-section"> <h5>Grid System</h5> <p>Foundation grid increased and decreased based on the browser width. Bootstrap has set of pre-defined grid sizes for screens and main devices. It will suddenly change the grid size while you resizing the browser width. Foundation will adapt its grid to the current browser. Both grid systems have all of the advanced features such as nesting, offsets and pushing/pulling. Bootstrap grid use 12 columns making for a 940 px wide container without responsive. If responsive feature added, the grid adapts to be 724 px and 1170 px wide based on view port. The zurb foundation grid specify width each column with the small, medium and large.</p> </section> <a class="exit-off-canvas"></a> <div> <div>
Grid System
Foundation grid increased and decreased based on the browser width. Bootstrap has set of pre-defined grid sizes for screens and main devices. It will suddenly change the grid size while you resizing the browser width. Foundation will adapt its grid to the current browser. Both grid systems have all of the advanced features such as nesting, offsets and pushing/pulling. Bootstrap grid use 12 columns making for a 940 px wide container without responsive. If responsive feature added, the grid adapts to be 724 px and 1170 px wide based on view port. The zurb foundation grid specify width each column with the small, medium and large.
Orbit Slider
Orbit slider is used for creating responsive image or content slider with easy and efficient manner. By using orbit, the user can swipe on touch enabled devices. It use foundation.orbit javascript file. If you need to use orbit element to your website, you will add following codes only.