Skip to content

An hamburger-like menu, when you click over it the menu appears in fullwindow. Not needs javascript libraries. Written in SASS.

Notifications You must be signed in to change notification settings

NeckersBOX/hamfull-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

hamfull


An hamburger-like menu, when you click over it the menu appears in fullwindow. No javascript libraries requested. Written in SASS.

Closed Preview

Opened Preview

Demo & Examples

You can found a demo page in this repository.

To get it locally:

git clone https://github.com/NeckersBOX/hamfull-menu

than open demo.html in your browser.

Installation

There are three ways to get hamfull:

  1. Clone this git repository and copy the minified css hamfull.min.css inside your project.
  2. Configure the options inside _config.scss than do gulp sass.
  3. With npm npm install --save hamfull-menu.

Usage

First step, link to the css file.

<link rel="stylesheet" href="/path/to/hamfull.min.css" />

Next step, build your menu:

<input type="checkbox" id="hamfull-expand" />
<label class="hamfull" for="hamfull-expand">
  <i class="material-icons">menu</i>
  <ul>
    <li><a href="#">page..</a></li>
    <li><a href="#">page..</a></li>
    ...
  </ul>
</label>

The first input and the label tags were here for this reason. Instead of material-icons you can use every library you want, the only important thing is to use always the <i></i> tag.

Notes

To configure the style (color, animations duration, ...) see the sass/_config.scss file.

About

An hamburger-like menu, when you click over it the menu appears in fullwindow. Not needs javascript libraries. Written in SASS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published