Verion – Widget Accordion SideBar CSS

Verion – Widget Accordion SideBar CSS is a small CSS plugin that is used to create the vertical sidebar to contain web widgets like: accordion menu, login form, small photo, buttons, recent/feature posts, social sharing icons, etc.

 


 

 

Verion CSS Features:

  • Support Many Sidebars in One Page.
  • Accordion Menus with unlimited levels.
  • Include Font Awesome.
  • Click Controller.
  • CSS animation effects.

 

Change Logs:

+ July 2013: First version.

 

Credits:

Third party plugins is used in this product:

 

Table of Contents:

  1. Installing Verion CSS.
  2. Verion HTML Structure.

 

 

 

Section 1: Installing Verion 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:

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

<!-- Verion CSS Pack -->
<link rel="stylesheet" href="css/verion.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/verion-css-ie8.css" type="text/css" />
<![endif]-->

 

That’s it. Verion CSS plugin is now ready to use.

 

Section 2: Verion HTML Structure.

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

A simple Verion HTML Structure:

<!-- START VERION -->
<div class="verion">

  <!-- Start Control Bar -->
  <div class="bar-ctrl">

    <!-- Start Left SideBar Control Button -->
    <label for="bar-left" class="bar-left-ctrl">
      <i class="icon-reorder"></i>
    </label>
    <!-- End Left SideBar Control Button -->

    <!-- Start Right SideBar Control Button -->
    <label for="bar-right" class="bar-right-ctrl">
      <i class="icon-reorder"></i>
    </label>
    <!-- End Right SideBar Control Button -->

  </div>
  <!-- End Control Bar -->

  <!-- Start Left SideBar -->
  <input type="radio" id="bar-left" name="verion" class="verion-bar">
  <div class="bar-mainbody bar-pos-left">

    <!-- Start Background -->
    <div class="bar-bg solid-black"></div>
    <!-- End Background -->

    <!-- Start Close Button -->
    <div class="bar-closebt>
      <label for="bar-closebt">
        <i class="icon-reorder"></i>
      </label>
    </div>
    <!-- End Close Button -->

    <!-- Start Widgets -->
      // Add widgets you want here
    <!-- End Widgets -->

  </div>
  <!-- End Left SideBar -->

  <!-- Start Right SideBar -->
  <input type="radio" id="bar-right" name="verion" class="verion-bar">
  <div class="bar-mainbody bar-pos-right">

    <!-- Start Background -->
    <div class="bar-bg solid-black"></div>
    <!-- End Background -->

    <!-- Start Close Button -->
    <div class="bar-closebt">
      <label for="bar-closebt">
        <i class="icon-reorder"></i>
      </label>
    </div>
    <!-- End Close Button -->

    <!-- Start Widgets -->
      // Add widgets you want here
    <!-- End Widgets -->

  </div>
  <!-- End Right SideBar -->

</div>
<!-- END VERION -->

The above code is just a simple structure of Verion, the detail of widget code you can check in demo file. In real use you can add more background and text color classes to decorate the sidebar.

 

 

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