Skip to content
Create a Full Page, Fully CSS3 Animated Menu for your Navigation with Full Page Menu
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Initial release May 8, 2014
LICENSE Initial commit May 8, 2014
README.md Update README.md May 22, 2014
fullpage-menu.css Initial release May 8, 2014
jquery.fullpage-menu.js Initial release May 8, 2014
jquery.fullpage-menu.min.js Initial release May 8, 2014

README.md

#Full Page Menu by Pete R. A jQuery plugin that let you Create a full page, Fully Animated Menu with CSS3 for your Navigation Created by Pete R., Founder of Travelistly and BucketListly

Note: The plugin is inspired by Handsome.is

License: Attribution-ShareAlike 4.0 International

Full Page Menu

Demo

View demo

Compatibility

Modern browsers such as Chrome, Firefox, and Safari on both desktop and mobile have been tested.

Basic Usage

To use this plugin, simply include the latest jQuery library (preferably version 2.0.0 or higher) together with jquery.fullpage-menu.js and fullpage-menu.css into your document's <head> follow by an HTML markup as follows:

<body>
  ..
  <div class="sidemenu">
    <ul class="fm-first-level">
      <li><a href="#menu1">..</a></li>
      ..
    </ul>
    <nav id="menu1" class="active">
      <a target="_blank" href="#">
        <span class="subtitle">...</span>
        Link Title
      </a>
      ..
    </nav>
  ..
</body>

The first section of the markup is used to create a tab functionality allowing you to have multiple levels navigation inside your menu. Elements under fm-first-level are buttons that will be used to activate the tab. The href attribute of these elements should reflect the ID attribute of the tab content itself.

For example, from above, the <nav> (the tab content) element has menu1 as an ID. The first button inside fm-first-level with href that matches the ID will trigger that tab.

Links inside the <nav> tag will be used as the target area for users to click on. The span with "subtitle" as a class name will let you add a little description of the link which will be shown together with the link title.

Once you got your menu setup, call the function as follows:

 $(".sidemenu").fullpageMenu({
   openButton: "Menu",        // This option allows you to define the content of the open menu button. The default value is "Menu"
   closeButton: "Close X",    // This option allows you to define the content of the close menu button. The default value is "Close X"
   animationSpeed: 100,       // This option lets you control the speed of the animation of each navigation items. The option accepts milliseconds. The default value is 100.
   autoNumber: true,          // This option lets you enable/disable to automatic numbering on menu items. The default value is true.
   animation: "fadeInLeft"    // This option lets you define what type of animation you want. Available options are "fadeInLeft", "fadeInRight", "fadeInUp" and "fadeInDown". 
 });

Note: For animation option, this plugin also supports Animate.css animation framework by Daniel Eden. Simply put his animation class name there and the plugin should animate the way it should.

Public Method

$.fn.openMenu()

With this method, you can open the menu programmatically by calling the openMenu() function like this:

$(".sidemenu").openMenu();

$.fn.closeMenu()

Same goes for this method. You can close the menu programmatically by calling the closeMenu() function like this:

$(".sidemenu").closeMenu();

That's all for this plugin. If you like it, don't forget to share this with your friends.

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

Other Resources

You can’t perform that action at this time.