Introduction

First of all, let me say thanks you for choosing my product! Feel free to ask any question you might have regarding Rain.

Rain is Fully Responsive Off-Canvas Menu with powerful features. It comes with 20 navigation animations, and 17 submenu transition animations. There are 28 color variations to chose from.

Rain also has 3 layouts - one with the top navigation, the second - without top bar, and third one - minimal.

To modify any option that comes with Rain, no javascript knowledge is required! You can style everything, even editing initializations options through html5 data attributes.

You can add dropdowns and animatable submenus. You can set custom animation for every submenu, or use default one for all of them.

There are also a clickable breadcrumbs so users can navigate through unlimited depth of animated submenus with ease!

  • Demo folder: Contains the main files of the rain, along with example implementations of the many rain features. Every example is toroughly comented in the file.
    • HTML files: Contain example implementations of the rain with different elements and options. By viewing the source of these files you can see the code implementations together with basic instructions.
    • assets folder: Contains all of the assets files used by the rain such as the JavaScript files, the main CSS files, and the skins files.
  • Skins folder: Contains the available color skins.
  • Source folder: Contains only the main plugin files. - and rain.css.
    • js folder: Contains the main javascript files: rain.js, rain.min.js
    • css folder: Contains the main css of the plugin.
  • Documentation folder: Contains the documentation you are currently reading.
  • Readme.txt file: Contains quick instructions and general information for faster and easier access.

Rain v1.0 is fully compatible with Chrome, Safari, Firefox, IE10+ and iOS latest versions..

Dependencies

CSS

You need to include main stylesheet and font-awesome icons, and Merriweather Sans font from google fonts:


<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/rain.css" />
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
        

To apply additional theme, include it after the plugin main stylesheet

    <-- Main stylesheet -->
<link rel="stylesheet" type="text/css" href="css/rain.css" />
    <-- Selected theme stylesheet -->
<link rel="stylesheet" type="text/css" href="css/skins/chosen-skin.css" />
        

javascript

Javascript dependecies are following:


<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/velocity.js"></script>
<script type="text/javascript" src="js/rain.min.js"></script> 
        

HTML Markup

Basic Guidliness

To create Rain navigation you need to do two things:
To create Rain navigation just set up this basic html markup:

<nav id="rn-navbar">

      <div class="rain-top">
         <a id="rn-open-button">
            <span class="rn-line"></span>
            <span class="rn-line"></span>
            <span class="rn-line"></span>
         </a>
         <a class="rn-logo" href="#"><img src="assets/images/logo.png" alt="logo"/></a>
     </div>

    <div id="rn-inner">

        <div id="inner-top">
           <div class="search-box">
               <input type="text" placeholder="Find Stuff">
               <a href="#" class="search-button"><i class="fa fa-search fa-2x"></i></a>
           </div>
        </div>

        <!-- Add menu elements here -->
        <ul class="rn-navigation">
          <li><a href="#">Navigation Element</a></li>
          <li><a href="#">Navigation Element</a></li>
          <li><a href="#">Navigation Element</a></li>
        </ul>
        <!-- menu elements end; -->

        <!-- Add custom elements here (like social links, text, etc.) -->
        <ul id="social-list">
          --links--
        </ul>
        <p> Some text </p>
        <!-- custom elements end; -->

   </div> <!-- #rn-inner -->

</nav> 
          

#rn-body section is depricated as of version 1.2 - there is no need for this additional section any more.

2) Wrap your main code inside the body with the section - <section id="rn-body"></section>

So basiclly your code inside the body should look like this:

<body>

  <nav id="rn-navbar">

    <!-- rain navigation -->

  </nav>

  <section id="rn-body">

     <!-- You main code wrapped with the #rn-body section -->

  </section>

</body>         
          

Search Box

You can place Search box to the top, or bottom of menu. To put it to the top, just leave default markup intact (inside #inner-top container).


    ...

 <div id="inner-top">

         <!-- Search Box Markup -->
         <div class="search-box">
             <input type="text" placeholder="Find Stuff">
             <a href="#" class="search-button"><i class="fa fa-search fa-2x"></i></a>
         </div>
         <!-- Search Box Markup End -->

 </div>
    
    ...  
   

If you want to place search box to the bottom, just place search box markup after the menu elements (.rn-navigation):


    ...

      <!-- Add menu elements here -->
      <ul class="rn-navigation">
        <li><a href="#">Navigation Element</a></li>
        <li><a href="#">Navigation Element</a></li>
        <li><a href="#">Navigation Element</a></li>
      </ul>
      <!-- menu elements end; -->

      <!-- Add custom elements here (like social links, text, etc.) -->

       <!-- Search Box Markup -->
       <div class="search-box">
           <input type="text" placeholder="Find Stuff">
           <a href="#" class="search-button"><i class="fa fa-search fa-2x"></i></a>
       </div>
        <!-- Search Box Markup End -->

        <ul id="social-list">
          --links--
        </ul>
        <p> Some text </p>
        <!-- custom elements end; -->
        
        ...  
   

If you decide to place search box to the bottom, do not remove #inner-top container, where search box is located by default. Leave it empty <div id="inner-top"></div> instead, because beside of holding search box in the top position, this container also stores some other vital elements that are added dinamicly from plugin, and if removed it will break some of the functions.


Dropdowns

To add dropdowns you need to assign <ul> (unordered list) inside the selected navigation element. That's it! Expected more code?


Here is the whole code with implemented dropdown:


<nav id="rn-navbar">
    <div class="rain-top">
       <a id="rn-open-button">
            <span class="rn-line"></span>
            <span class="rn-line"></span>
            <span class="rn-line"></span>
         </a>
       <a class="rn-logo" href="#"><i class="fa fa-home"></i> Project name</a>
     </div>
     <div id="rn-inner">
      <div id="inner-top">
         <div class="search-box">
              <input type="text" placeholder="Find Stuff">
              <a href="#" class="search-button"><i class="fa fa-search fa-2x"></i></a>
          </div>
      </div>
      -----------------------------------
  <ul class="rn-navigation">
    <li><a href="#">Navigation Element</a></li>
    <li>
      <a href="#">Navigation Element</a>
      <!-- include the second level navigation inside -->
      <ul>
        <li><a href="#">2nd Level Element</a></li>
        <li><a href="#">2nd Level Element</a></li>
        <li><a href="#">2nd Level Element</a></li>
      </ul>
      <!-- second level navigation end -->
    </li>
    <li><a href="#">Navigation Element</a></li>
  </ul>
  ---------------------------------------
   </div>
</nav>
  

Submenus

Dropdowns are default state of Rain Navigation submenus. In order to create more appealing menu, and some transition animations while traveling you submenus, you need to include rn-slide class to the navigation element that holds the submenu.


Example:


<ul class="rn-navigation">
  <li><a href="#">Navigation Element</a></li>
  <li class="rn-slide"> <!-- added .rn-slide -->
    <a href="#">Navigation Element</a>
    <!-- include the second level navigation inside -->
    <ul>
      <li><a href="#">2nd Level Element</a></li>
      <li><a href="#">2nd Level Element</a></li>
      <li><a href="#">2nd Level Element</a></li>
    </ul>
    <!-- second level navigation end -->
  </li>
  <li><a href="#">Navigation Element</a></li>
</ul>
  


rn-slide submenu accepts 2 parameters via HTML data attribute:

  • data-animation - animation property name that will be applied to this submenu on transition (For complete list of available animations see table bellow))
  • data-duration - duration of the animation that will be applied to this submenu on transition
By default animation passed to the rain - elAnimation will apply to all submenus, unless you specify custom animation for specific submenu by passing above mentioned data attribute. So, if you want to apply default animation for most of the submenus, leave them as they are, but for every submenu that you want to include specific animation add data-animation and it will override default elAnimation set when initialing Rain.

This way, every submenu can have different animation, or all of them can have the same one.

Title Divider

To create custom title divider add regular <li> element with the rn-divider class.


Example: <li class="rn-divider">Title Divider</li>

Initializing

Rain has it's own auto-initializing function - meaning that all you need to do is to set up basic html markup and include main javascript rain.js and it will work! But if you want to customize some of the available options you can do that in two ways:

  • by passing data-rain attribute to the #rn-navbar

    Example:

    <nav id="rn-navbar" data-rain="navAnimation: expand, navDuration: 500">

    You need to pass comma separated property: value pairs to data attribute. Please, make sure that you do not use any additional ", or ' around those property: value pairs. You can find full lsit of availabe options bellow under "options" section

  • or by passing arguments to the plugin init function if you have basic understanding of jquery.

    Example:

    
            $('#rn-navbar').rain({
               navAnimation : 'expand',
               navDuration : 500
            });
          

For a full list of available options that you can pass throught data-rain attribute or jquery plugin initialization - go to options section of the documentation

Options

Option Default Description
rainWidth 270 Max Width of the Rain navigation
direction "left" Direction/Position of the navigation. Available options: "left" and "right"
slideOpen true slideOpen option lets navigation to open when you move your mouse near the left edge of the screen. Available values: true, or false. To disable this feature, set this option to false
openDelay 0 Delay the opening of the Rain menu after the page is loaded. This option requires defaultOpen to be set to true. Value is in ms (miliseconds). For example 500 will mean that Rain should open 500ms after page is loaded.
defaultOpen false If set to true - this option will open Rain by default when webpage is loaded.
navAnimation "push" Animation that will apply to the main navigation holder. For full list of available animations check navAnimation & megaNavigation list bellow.
navDuration 600 Duration of the Entrance animation of the main navigation holder.
elAnimation "expand" Transition animation that will be applied to the submenus, to those that have no data-animation assigned. For full list of available animation see elAnimations list bellow.
elDuration 300 Duration of the transition animation for the submenus.

Animations

Rain comes with full-pack of animations for navigation and submenu elements.

Navigation animation is applied through navAnimation property. You can pass it via data-rain attribute or as an argument passed with jquery - both explained under section "initialization".

  • push
  • slideLeft
  • slideRight
  • slideUp
  • slideDown
  • flipX
  • flipY
  • bounceDown
  • bounceLeft
  • bounceRight
  • swoop
  • expand
  • shrink
  • dropUp
  • dropDown
  • dropLeft
  • dropRight
  • flipYBounce
  • flipXBounce
  • whirl
  • bounce

Submenu Animations List

Submenu animation is applied through elAnimation property. (you can pass it via data-rain attribute or as an argument passed with jquery - both explained under section "initialization" ). Submenu animation can be also applied to every submenu element differently, as explained at "submenus" part of the "HTML Markup" section

  • slide
  • fadingSlide
  • flipX
  • flipY
  • flipYBounce
  • flipXBounce
  • expand
  • swoop
  • whirl
  • shrink
  • bounceIn
  • verticalBounce
  • horizontalBounce
  • dropDown
  • dropUp
  • dropLeft
  • dropRight

Layouts

You can choose between two layouts:

  • Top Bar

    top bar

    To implement it, add rn-top-bar class to the <nav id="rn-navbar">
    Example: <nav id="rn-navbar" class="rn-top-bar">

  • Without Top

    without top

    This is default layout, you do not need to add anything to aplly it.

  • Minimal

    minimal

    To implement it, add rn-minimal class to the <nav id="rn-navbar">
    Example: <nav id="rn-navbar" class="rn-minimal">


To add background image, or pattern to Rain menu, add next line of CSS to your main Stylesheet:

#rn-navbar:not(.rn-top-bar), 
#rn-navbar.rn-top-bar #rn-inner{background: url("path-to-image/image.png");}


If you select Without Top layout there are two layouts for the navigation open button:

  • Square

    btn1

    This is default layout, you do not need to add anything to aplly it.

  • Text

    btn2

    To implement it, add style2 class to the <a id="rn-open-button">
    Example: <a id="rn-open-button" class"style2">

For default layout, you do not need to add any class, just leave it as it is.

Customizing

Here you can find some quick tips for changing some basic values for megamenu like font-size, font-family, some colors, etc.


/* * * * * * * * * * * * * * * * * * * * * *
 *                                         * 
 *  As of Rain 1.3 new styles added.        *
 *  To better adapt Rain to your project   *
 *  Change those values if you like        *
 *                                         *
 * * * * * * * * * * * * * * * * * * * * * */

/* 
 * set font-family, font-size and line height to 
 * menu elements in Rain
 */
#rn-navbar #rn-inner .rn-navigation li > a, 
#rn-navbar #rn-inner a, 
#rn-navbar #rn-inner p, 
#rn-bck, #nv-txt{ font-family:"Merriweather Sans"; font-size:13.5px; line-height:14px; }
/* 
 * set font-family for heading elements in Rain
 */
#rn-navbar, 
#rn-navbar h2,
#rn-navbar h3,
#rn-navbar h4,
#rn-navbar h5{font-family:"Merriweather Sans"}
/* 
 * Set main padding for menu elements and heading elements
 */
#rn-navbar .rn-navigation li > a > span,
#rn-navbar h3,
#rn-navbar h4,
#rn-navbar h5,
#rn-navbar .rn-divider{padding: 7px 7px}
/* 
 * Set main padding, line-height, border-top, and margin
 * for heading elements
 */
#rn-navbar .rn-divider,
 #rn-navbar h3, 
 #rn-navbar h2,
 #rn-navbar h4,
 #rn-navbar h5,
 .rn-divider{
    font-size:14px;
    line-height:15px;
    border-top: 1px solid;
    margin-top: 10px;
    padding-top: 14px;
    padding-bottom: 10px;
    padding-left: 4px
}
/* 
 * a back button and current element links in the top
 * Use left margin for the back link and right margin
 * fo current menu element #nv-txt to adjust with the 
 * menu elements padding
 */
#rn-navbar #rn-bck{margin-left: 7px;}
#rn-navbar #nv-txt{margin-right: 22px;}
/* 
 * change color for the menu elements when they are
 * hovered with the mouse
 */
.rn-navigation li > a:hover > span:first-child, 
.rn-navigation li.has-dropdown:hover > a > span:first-child,
.rn-navigation li:first-child > a:hover > span:first-child, 
#rn-navbar #rn-inner .widget ul li a:hover{color: lightyellow}
/* 
 * set line height of dropdown arrow to match your menu elements
 * line-height for optimal alignment
 */
.rn-navigation li.has-dropdown:not(.rn-slide) > a .rn-point .fa-angle-down{line-height: 14px}
/* 
 * set line height of pointer that appears when menu element is 
 * hovered to match your mene elemnts line-height fot optimal 
 * alignment, and also add top property to match to the menu
 * element top padding and place it to the left for the value of
 * main menu elements left padding
 */
.rn-navigation li > a > span:before{ line-height: 14px; top: 7px; left: 7px }
/* 
 * set line height of dropdown and submenu arrow to match your menu elemnts
 * and place it to the right for the value of menu element right padding
 */
.rn-navigation li > a .rn-point{line-height: 14px;right:7px}
/* 
 * set top position of dropdown and submenu arrow to match your menu elements
 * top padding for optimal alignment
 */
.rn-point .fa-angle-down::before{top: 7px;}
/* 
 * set top position of submenu arrow to match your menu elements
 * top padding - 2px for optimal alignment, and you can 
 * additionaly change it's width
 */
.rn-slide .rn-point .fa-angle-down::before{width: 11px;top: 5px;}
/* 
 * Button lines - change width and height of each line in navigation button
 */
#rn-open-button .rn-line{width:22px; height:2px}
/* 
 * Button width in first layout with background
 */
#rn-open-button.btn-fly{ width:42px;}
/* 
 * Change text, and its position for the menu button layout 2
 */
#rn-open-button.style2:after{content: "Menu"; right: -33px}
/* 
 * Change text, and its position for the menu button layout 2
 * when position of the menu is placed on Right end of the screen
 */
#rn-open-button.btn-fly.rght:after,
#rn-open-button.btn-fly.right:after{left: -33px; right: auto}
/* 
 * Change logo container max-width and margin
 */
#rn-navbar:not(.rn-top-bar) .rain-top .rn-logo{margin-top: 60px;margin-bottom: 30px;max-width: 130px}
/* 
 * Edit logo image max-width and height
 */
#rn-navbar:not(.rn-top-bar) .rain-top .rn-logo img{max-width: 130px;max-height:80px}
/* 
 * Change menu element left padding that will be applied once it is
 * hovered with mouse. Menu element will be pushed (using padding)
 * to the left and small arrow will appear
 */
#rn-navbar:not(.rn-minimal) .rn-navigation li > a:hover > span, 
.rn-navigation li.has-dropdown:hover > a > span, 
.rn-navigation li.actv > a > span, 
#rn-navbar:not(.rn-minimal) .rn-navigation li.actv > a > span{padding-left: 14px}
/* 
 * Edit padding for the first level dropdown children elements
 */
#rn-navbar #rn-inner .rn-navigation .has-dropdown ul li a{padding-left: 24px;padding-right: 24px}
/* 
 * Edit padding for every next level dropdown children elements
 */
#rn-navbar #rn-inner .rn-navigation .has-dropdown ul .has-dropdown ul a{padding-left: 38px;padding-right: 38px;}
/* 
 * EMinimal layout margin for the logo container
 */
#rn-navbar.rn-minimal .rain-top .rn-logo{
  position: relative;
  margin-top: 65px;
  margin-bottom: 8em;
}
/* 
 * Minimal layout margin for the social list
 */
#rn-navbar.rn-minimal #social-list{margin-top: 4em;}
  

This is also used in demo.css file that can be located in demo/assets/css/demo.css where you can test live example.

Changelog

Changelog

Version 1.2

  • Added rainWidth option
  • Added openDelay option
  • Done re-write of some styles, Rain now uses better hover effect for menu elements
  • Included commented section for eaier way to edit fonts, font-size and padding.
  • Fixed data-rain initialization bug that occured in previous release
  • Improved mobile display
  • Depricated the use of rn-body content wrapper.

Version 1.1.1

  • Added one more layout
  • Styled title divider
  • Added defaultOpen option
  • Depricated news ticker

Version 1.1

  • expanded slideOpen area to 150px
  • Added defaultOpen option - to open Rain menu by default when page loads
  • Added menu element active class
  • Added 1 more example with new features implemented (explanation included)

Version 1

Initial release

Credits

List of the resources used with Rain

Background pattern used in demos is from subtlepatterns.com