Create beautiful top responsive navigation menu in your pages
Download View project on GithubTop 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>
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 |
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) |
Name | Description |
---|---|
layout() | Start the toggle menu layout |
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.lessJS
jQuery.js Stashy.Toggle.js