Toggle

Create beautiful top responsive navigation menu in your pages

  Download   View project on Github

Top responsive menus are very used in web development. With this component you can create one of them.

When you resize your browser, the navigation options will be hide and a link will be showed instead. Clicking that link the menu will slide down.

<div class="st-toggle">
    <div class="st-toggle-brand">
        <a href="#">Brand</a>  
    </div>
    <a href="#" class="st-toggle-menu-link"></a>	
    <nav class="st-toggle-navigation">
        <ul>
            ...
            <li><a></a></li>
            <li><a></a></li>
            ...
        </ul>        
    </nav>
</div>

Constructor

Stashy.Toggle(selector, options)
Parameter Type Default Description
selector string .st-toggle CSS selector for your toggle menu
options object See options You can pass the options to the offcanvas instance

Options

Option Type Default Description
closeOnClickOutside bool true Close Toggle on click outside the element area
closeOnClick bool true Close Toggle when click on any link inside the element area
fixed bool false You can make the toggle fixed top by setting this option to true. Remember to add some paddding (>=50px) to your main container if you don“t want the toggle to hide your upmost content. Toggle component is going to stick fixed at top only on desktop measures (>= 768px)

Methods

Name Description
layout() Start the toggle menu layout

Sample

var toggle = new Stashy.Toggle().layout();

less

For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:

Stashy.Variables.less Stashy.Mixins.less Stashy.Toggle.less

JS

jQuery.js Stashy.Toggle.js