CodeCanyon
CodeCanyon
Code
Code
Code
Code
Code
Code

Sismo Navigation

Sismo Navigation

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="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="style/sismo.navigation.css" rel="stylesheet">
<script src="resources/jquery/jquery-1.10.2.min.js"></script>
<script src="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="#!">        
    <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="#!">        
    <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="#!">        
    <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="#!">        
    <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="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="style/sismo.navigation.css" rel="stylesheet">
    <script src="resources/jquery/jquery-1.10.2.min.js"></script>
    <script src="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="#!">        
                    <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="#!">        
                    <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="#!">        
                    <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="#!">        
                    <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

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: sistev.contacto@gmail.com

by
by
by
by
by
by