CodeCanyon Sismo Navigation 10985032

CodeCanyon Sismo Navigation 10985032

CodeCanyon Sismo Navigation 10985032
JavaScript \ Navigation
Mobile \ Layout \ Jquery \ Navigation \ Widget \ Canvas \ Icons \ Html \ Component



JavaScript - Sismo Navigation 10985032 by eloy342 @ CodeCanyon

JavaScript \ Navigation

Last Update: 19 April 15; High Resolution: Yes; Compatible Browsers: IE10, IE11, Firefox, Safari, Opera, Chrome; Files Included: JavaScript JS, HTML, CSS; Software Version: jQuery.

Sismo Navigation v 1.0 – documentation
Sismo Navigation is a plugin that adds more functionality to bootstrap.
Sismo Navigation allows you to create 6 different types of navigation for web applications html5 desktop or mobile.
With just changing a line of code.

Samples and Docs

Navigation types

- Grid Navigation.

- List Navigation

- List 2 Navigation

- Icon Navigation

- Bottom Navigation

- Off Canvas Navigation

Files Structure

- – /assets

- - bg.jpg

-

- – /docs

- - references.pdf

- - tutorials.pdf

-

- – /js

- - sismo.js

-

- – /resources

- - bootstrap

- - font-awesome

- - jquery

-

- – /style

- - sismo.navigation.css

-

- – index.html

Installation
This navigation can be integrated into any HTML or PHP page.

BACKUP BACKUP BACKUP It is important to keep a fresh copy of the files in this plugin, like your website to try to change.

Unzip the files, be sure to check it’s contents against the above file list

Getting Started

In the header of your website be sure to include, CSS Style and Javascript files. Copy the code below between your <head> and </head> tags either in your ‘header’ file or the top of the document.

<link href="http://codecanyon.net/item/sismo-navigation/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://codecanyon.net/item/sismo-navigation/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="http://codecanyon.net/item/sismo-navigation/style/sismo.navigation.css" rel="stylesheet">
<script src="http://codecanyon.net/item/sismo-navigation/resources/jquery/jquery-1.10.2.min.js"></script>
<script src="http://codecanyon.net/item/sismo-navigation/js/sismo.js"></script>

Next, indicates the type of navigation you want to use.

<script>
Sismo.ready(function(){
Sismo.create("Navigation",{
id:"navigation",
typeNavigation:"navigation-grid" //Here you can change the type of navigation
});
});
</script>

You can change the type of navigation you want to use for any of the following.

- .- navigation-grid

- .- navigation-bottom

- .- navigation-list

- .- navigation-list-2

- .- navigation-icon

- .- navigation-off-canvas

Next, Copy and paste the following code between the <body></body>

<div id="navigation">
<ul>
<li class="box-nav-item">
<a class="box-nav-link" href="http://codecanyon.net/item/sismo-navigation/#!">
<span class="fa icon fa-star"></span>
<span class="tag-nav-menu">Menu 1</span>
</a>
</li>
<li class="box-nav-item">
<a class="box-nav-link" href="http://codecanyon.net/item/sismo-navigation/#!">
<span class="fa icon fa-star"></span>
<span class="tag-nav-menu">Menu 2</span>
</a>
</li>
<li class="box-nav-item">
<a class="box-nav-link" href="http://codecanyon.net/item/sismo-navigation/#!">
<span class="fa icon fa-star"></span>
<span class="tag-nav-menu">Menu 3</span>
</a>
</li>
<li class="box-nav-item">
<a class="box-nav-link" href="http://codecanyon.net/item/sismo-navigation/#!">
<span class="fa icon fa-star"></span>
<span class="tag-nav-menu">Menu 4</span>
</a>
</li>
</ul>
</div>

Last, test in your web browser

The final code should look like this.

<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://codecanyon.net/item/sismo-navigation/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://codecanyon.net/item/sismo-navigation/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="http://codecanyon.net/item/sismo-navigation/style/sismo.navigation.css" rel="stylesheet">
<script src="http://codecanyon.net/item/sismo-navigation/resources/jquery/jquery-1.10.2.min.js"></script>
<script src="http://codecanyon.net/item/sismo-navigation/js/sismo.js"></script>
<script>
Sismo.ready(function(){
Sismo.create("Navigation",{
id:"navigation",
typeNavigation:"navigation-grid" //Here you can change the type of navigation
});
});
</script>
</head>
<body>
<div id="navigation">
<ul>
<li class="box-nav-item">
<a class="box-nav-link" href="http://codecanyon.net/item/sismo-navigation/#!">
<span class="fa icon fa-star"></span>
<span class="tag-nav-menu">Menu 1</span>
</a>
</li>
<li class="box-nav-item">
<a class="box-nav-link" href="http://codecanyon.net/item/sismo-navigation/#!">
<span class="fa icon fa-star"></span>
<span class="tag-nav-menu">Menu 2</span>
</a>
</li>
<li class="box-nav-item">
<a class="box-nav-link" href="http://codecanyon.net/item/sismo-navigation/#!">
<span class="fa icon fa-star"></span>
<span class="tag-nav-menu">Menu 3</span>
</a>
</li>
<li class="box-nav-item">
<a class="box-nav-link" href="http://codecanyon.net/item/sismo-navigation/#!">
<span class="fa icon fa-star"></span>
<span class="tag-nav-menu">Menu 4</span>
</a>
</li>
</ul>
</div>
</body>
</html>

Finished, how easy was that?!

Usage Examples
You can view some examples created with Sismo Navigations at the following URL: http://sismo.sistev.com.ve/navigations/index.html

Credits

- Bootstrap

- jQuery

- FontAwesome

FAQ
- For other functions sismo.js see reference file (references.pdf) found in the docs folder.

- For tutorials on how to use the plugin you can see the tutorials.pdf file in the docs folder.

- If you want, download the examples you can send an email to the following address: [email protected]

Keywords: bootstrap, bottom, component, css, font-awesome, grid, html5, icons, jquery, layout, mobile, navigation, off-canvas, widget.



Tags: Navigation, Layout, Jquery, Icons, Mobile, Widget

Premium CodeCanyon Sismo Navigation 10985032 WordPress Themes, Website Templates, Mobile Themes, Flash Templates & Scripts from creative professional designers. Full details of CodeCanyon Sismo Navigation 10985032 for digital design and education. CodeCanyon Sismo Navigation 10985032 desigen style information or anything related.

Comments:

Name:*
E-Mail:*
Add Comments:
Enter Code: *