CSS Plugins Plugins 

Navion – Metro Navigation Menu Accordion Switcher CSS

SONHLAB , , , , ,

Navion – Metro Navigation Menu Accordion Switcher CSS is a small CSS plugin that is used to create navigation menu for modern sites with Responsive Design feature. With this plugin users can interact with it by clicking behavior. Navion CSS can be customized easily because it is only HTML and CSS code.

 

Buy Now

 

 

Demos:

Naion Metro Navigation Menu Accordion Switcher CSS Demo

 

Navion CSS Features:

  • Responsive Design.
  • Three Main Navigation Menu Sizes.
  • Control by Click Behavior.
  • Sub Menu with Dropdown and Metro Style.
  • Tab in Sub Menu.
  • CSS3 Animation Effects.
  • Support Icon Images and Font Awesome.

 

 

Change Logs:

+ 07 Jul 2013: Version 1.1:

  • Optimize CSS code.
  • Add one more demo.

+ Jun 2013: First Version.

 

Credits:

Third party plugins is used in this product:

 

Table of Contents:

  1. Installing Navion CSS.
  2. Navion HTML Structures.
  3. CSS3 Animation Effects and Icon Font.

 

[ga_res]

 

Section 1: Installing Navion CSS.

First of all, to ensure everything works correctly, please use <!DOCTYPE html>.

Include the following code into HEAD section of the page.

Include required CSS file:

<!-- Navion CSS Pack -->
<link rel="stylesheet" href="css/navion-css.css" type="text/css" />

Include CSS file for Internet Explorer 8:

<!-- IE 8 works with Hover only -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/navion-css-ie8.css" type="text/css" />
<![endif]-->

If you want to make auto fit for small screen, you need to include:

<!-- Navion Responsive CSS -->
<link rel="stylesheet" href="css/navion-responsive.css" type="text/css" />

If you want to use CSS3 Animation Effects:

<!-- CSS3 Animation -->
<link rel="stylesheet" href="css/animate-custom.css" type="text/css" />

If you want to use Font Awesome you need to include:

<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />

That’s it. Navion CSS is now ready to use.

 

Section 2: Navion HTML Structure.

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

First, if you want to use responsive feature you need to add a responsive menu to control Navion first:

<!-- Start Responsive Menu -->
<label for="responsive-navion" class="navion-reponsive-item solid-black">
  <span>
    <img src="images/demo/icon.png" alt="responsive navion" />
  </span>
</label>
<!-- End Responsive Menu -->

Now, you can start to create Navion structure.

Create a simple Navion with Dropdown Menu:

<!-- START NAVION -->
<input type="checkbox" id="responsive-navion" class="responsive-navion" />
<ul class="navion">

  <!-- Start Main Item - DropDown Style -->
  <li class="nav-dropdown">

    <!-- Start Main Item -->
    <label for="submenu-lvl1" class="nav-mainitem">
      <span class="nav-title">Dropdown</span>
      <span class="nav-icon"><i class="icon-caret-down"></i></span>
    </label>
    <!-- End Main Item -->

    <!-- Start Sub Menu - DropDown List - Level 1 -->
    <input type="radio" name="navion" id="submenu-lvl1" class="nav-subctrl">
    <div class="nav-submenu">

      <ul class="sub-list-standard">

        <li>
          <a href="#">
            <span>Lvl 1 - Item 1</span>
          </a>
        </li>

        <li>

          <label for="navion-lvl2" class="nav-lvl-item">
            <span>Lvl 1 - Item 2</span>
            <span><i class="icon-caret-down"></i></span>
          </label>

          <!-- Start Dropdown List - Level 2 -->
          <input type="checkbox" id="navion-lvl2" class="nav-dropdown-lvl" />

          <ul>

            <li>
              <a>
                <span>Lvl 2 - Item 1</span>
              </a>
            </li>

            <li>
              <a>
                <span>Lvl 2 - Item 1</span>
              </a>
            </li>

          </ul>
          <!-- End Dropdown List - Level 2 -->

        </li>

      </ul>

    </div>
    <!-- End Sub Menu - Dropdown List - Level 1 -->

  </li>
  <!-- End Main Item -- DropDown Style -->

</ul>
<!-- END NAVION -->

 

Create a simple Navion with Metro Menu:

<!-- START NAVION -->
<input type="checkbox" id="responsive-navion" class="responsive-navion" />
<ul class="navion">

  <!-- Start Main Item - Metro Style -->
  <li class="nav-metro">

    <!-- Start Main Item -->
    <label for="submenu-metro" class="nav-mainitem">
      <span class="nav-icon"><i class="icon-cloud"></i></span>
      <span class="nav-title">Metro Menu</span>
    </label>
    <!-- End Main Item -->

    <!-- Start Sub Menu -->
    <input type="radio" name="navion" id="submenu-metro" class="nav-subctrl">
    <div class="nav-submenu sub-leftpos">

    <!-- Start Sub Tab Content -->
    <div class="nav-sub-container">

      <!-- Start Content Zone -->
      <div class="nav-submenu-content">

        // Add Content Here

      </div>
      <!-- End Content Zone -->

    </div>
    <!-- End Sub Tab Content -->

    </div>
    <!-- End Sub Menu -->

  </li>
  <!-- End Main Item -- Metro Style -->

</ul>
<!-- END NAVION -->

 

Create a SubMenu with a simple Tab:

<!-- START NAVION -->
<input type="checkbox" id="responsive-navion" class="responsive-navion" />
<ul class="navion">

  <!-- Start Main Item - Metro Style -->
  <li class="nav-metro">

    <!-- Start Main Item -->
    <label for="submenu-metro" class="nav-mainitem">
      <span class="nav-icon"><i class="icon-cloud"></i></span>
      <span class="nav-title">Metro Menu</span>
    </label>
    <!-- End Main Item -->

    <!-- Start Sub Menu -->
    <input type="radio" name="navion" id="submenu-metro" class="nav-subctrl">
    <div class="nav-submenu sub-leftpos">

      <!-- Start Tab Button -->
      <label for="nav-subtab-1" class="nav-subtab">
        <span>Tab Button</span>
      </label>
      <!-- End Tab Button -->

      <!-- Start Sub Tab Content -->
      <input type="radio" id="nav-subtab-1" name="navion-subtab" class="nav-subtab-ctrl" />
      <div class="nav-sub-container nav-subtab-content">

        <!-- Start Active Line -->
        <div class="nav-subtab-active"></div>
        <!-- End Active Line -->

        <!-- Start Content Zone -->
        <div class="nav-submenu-content">

          // Add Tab Content Here

        </div>
        <!-- Start Content Zone -->

      </div>
      <!-- End Sub Tab Content -->

    </div>
    <!-- End Sub Menu -->

  </li>
  <!-- End Main Item -- Metro Style -->

</ul>
<!-- END NAVION -->

If you want to make a tab content auto show at initial load you just add a “checked” into the radio button that is used to control the tab content.

 

Finally, create a close function to close Navion menu by adding the following code right below the opening <body> tag:

<!-- Close Submenu -->
<label for="submenu-close-navion" class="navion-close"></label>
<input type="radio" name="navion" id="submenu-close-navion" class="nav-subctrl">

 

Important Note: After you added the “Close Function” for Navion, if you see an element can not play its function by clicking you can add “position:relative” for that element to fix the issue.

 

Section 3: CSS3 Animation Effects and Icon Font.

 

CSS3 Animation Classes:

nav-flip | nav-flipInX | nav-flipInY | nav-fadeIn | nav-fadeInUp | nav-fadeInDown | nav-fadeInLeft | nav-fadeInRight | nav-fadeInUpBig | nav-fadeInDownBig | nav-fadeInLeftBig | nav-fadeInRightBig | nav-bounceIn | nav-bounceInUp | nav-bounceInDown | nav-bounceInLeft | nav-bounceInRight | nav-rotateIn | nav-rotateInUpLeft | nav-rotateInDownLeft | nav-rotateInUpRight | nav-rotateInDownRight | nav-lightSpeedIn | nav-rollIn.

To use CSS3 Animation Classes you just add “animated” class and an animation class above into Tab Content div tag. Please see demo files for more detail.

 

Text Icon Classes:

Find icon classes you like at 360+ Icons Font Awesome.

 

[endedwords product=””]http://talk.sonhlab.com/room/navion-css-plugin[/endedwords]