Js Plugins: Nuxion – Responsive UX Navigation Menu Bar

Download Demo

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.

# THIS IS NOT A WORDPRESS PLUGIN #

Features:

Responsive Design.

Unlimited Menu Items.

Flexible Layouts: Fixed Width, Full Width, Blocks.

Multi Nav in the same page.

Easy Customization.

Documentation

If you like to see the plugin documentation you can check it here: Nuxion jQuery Documentation

Support

If you have any question or feature request or bug report please email me. After purchase please rate and leave me some feedback to improve this item. Thank you!

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>

Nuxion – Responsive UX Navigation Menu Bar

Ads

Monday 21 July 2014