Nuxion jQuery – Responsive UX Navigation Menu Bar is a small jQuery plugin that is used to create modern navigation bars that support unlimited menus, flexible layouts. You can easily customize the style of the navigation with CSS, place it at anywhere in your site like: the top of the page, the middle of the content or left/right side bars. You can check our basic demos for more details.

 

 

Nuxion Responsive UX Navigation Menu Bar

 

Nuxion jQuery Features:

  • Support Responsive Design.
  • Support Unlimited Menus.
  • Flexible Layouts: Fixed width, Full width, Sidebar blocks…
  • Easily customize CSS style.
  • Support Font Awesome and Image Icons.

 

Demos:

 

Change Logs:

06 March 2014: Update version 1.1:

  • Fix minor bugs.

January 2014: First Version.

 

Credits:

  • jQuery Library.

 

Table of Contents:

  1. Installing Nuxion jQuery Plugin.
  2. Nuxion jQuery HTML Structure.
  3. Call Nuxion jQuery Plugin.
  4. Parameters.

 

 

Section 1: Installing Nuxion jQuery Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html>. Include the following code into HEAD section of the page.

Includes required CSS files:

<!-- SONHLAB Style -->
<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />

<!-- Fix IE 8 -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/sonhlab-fix-ie8.css" type="text/css" />
<![endif]-->

<!-- Nav CSS Pack -->
<link rel="stylesheet" href="css/nuxion-js.css" type="text/css" />

<!-- Nav SubMenu Style -->
<link rel="stylesheet" href="css/nav-substyle.css" type="text/css" />

 

Include required Javascript files:

<!-- Start jQuery Library -->
<!--[if !IE]> -->
<script type="text/javascript" src="js/jquery/jquery.min.2.0.3.js"></script>
<!-- <![endif]-->

<!--[if gte IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.2.0.3.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.1.10.2.js"></script>
<![endif]-->
<!-- End jQuery Library -->

<!-- Nuxion jQuery Plugin -->
<script type="text/javascript" src="js/nuxion.dev.js"></script>

Done. Nuxion jQuery plugin is now ready to use.

 

Section 2: Nuxion jQuery HTML Structure.

This section should be read along with the example files also contained in the download package.

The Nuxion structure has two main parts: The Main Item Bar and The SubMenu Station.

<!-- START NUXION -->
<div class="nuxion">

  <!-- Start Main Item Bar -->
  <div class="nav-mainmenu">
    // Add Main Item Here
  </div><div class="clearspace"></div>
  <!-- End Main Item Bar -->

  <!-- Start SubMenu Station -->
  <div class="nav-substation">
    // Add SubMenu Content Here
  </div>
  <!-- End SubMenu Station -->

</div>
<!-- END NUXION -->

 

Add a main item and a submenu content:

<!-- START NUXION -->
<div class="nuxion">

  <!-- Start Main Item Bar -->
  <div class="nav-mainmenu">

    <!-- Start Main Item - Demo -->
    <a class="nav-mainitem floatleft" data-navid="demo-navid">
      <span class="nav-icon"><i class="fa fa-home"></i></span>
      <span class="nav-title">Some Text</span>
    </a>
    <!-- End Main Item - Demo -->

  </div><div class="clearspace"></div>
  <!-- End Main Item Bar -->

  <!-- Start SubMenu Station -->
  <div class="nav-substation">

    <!-- Start Sample SubMenu -->
    <div class="nav-submenu" data-navid="demo-navid">
      <div class="nav-sub-container">
        <div class="nav-submenu-content">
          // Add Content Here
        </div>
      </div>
    </div>
    <!-- End Sample SubMenu -->

  </div>
  <!-- End SubMenu Station -->

</div>
<!-- END NUXION -->

In the above code when a main item has data-navid=”demo-navid” is clicked a submenu content has the same data-navid (demo-navid) will be displayed.

 

Section 3: Call Nuxion jQuery Plugin.

To call Nuxion jQuery plugin you just add this sample code below into the Head section:

<!-- Call Nuxion jQuery Plugin -->
<script type="text/javascript">
$(window).load(function() {
  $('.nuxion').nuxionjs({
    moremenuBg: 'solid-blue-2',
    returnIcon: '<img src="images/icons/prev-black.png" alt="return" />',
    moremenuHover: 'nav-hover-bluelight',
    responsive: true
  });
})
</script>

 

Section 4: Parameters.

HTML Parameters:

Parameters Positions Description
data-navid nav-mainitem
nav-submenu
This param is used to set ID for Main Items and SubMenus.

 

Javascript Parameter:

Parameters Properties Description
responsive boolean This param is used to enable or disable Responsive feature for Nuxion.
Value: true | false
returnIcon string This param is used to set Return Icon for Nuxion.
activeClass string This param is used to set Active state for Main Item.
moremenuBg string This param is used to set background class for More Menu Container.
moremenuHover string This param is used to set Hover state for the More Menu Item.

 

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to open tickets in Nuxion Support Zone. No guarantees, but I’ll do my best to assist you. Thanks so much!

 

 

LEAVE A COMMENT
Set your Twitter account name in your settings to use the TwitterBar Section.