Ruby Mega Menu

Documentation

You will find the main menu structure and the usage of features here. If you have any other question, don't hesitate to contact:

Contact Us

Files and Folders

  • index.html (Theme in the Demo Showcase) - This file is not supported by us.
  • css/

    • Ruby Menu Styles are here

    • ruby-demo.css (optional) This is for demo showcase only. Will not be supported by us!
    • ruby-main.css (must)
    • ruby-responsive.css (must)
    • ruby-transitions.css (optional) - if you want CSS transitions effect, then -> must
    • ruby-vertical.css (optional) - if you want to use vertical menu, then -> must
    • ruby-theme-1.css (optional) Default Theme
    • ruby-theme-2.css (optional) Theme: Black/Blue
    • ruby-theme-3.css (optional) Theme: Black/Violet
    • ruby-theme-4.css (optional) Theme: Black/Orange
    • ruby-theme-5.css (optional) Theme: Black/Pistachio
    • ruby-theme-6.css (optional) Theme: Black/Pink
    • ruby-theme-7.css (optional) Theme: Black/Yellow
    • ruby-theme-8.css (optional) Theme: Black/Gray
    • ruby-theme-9.css (optional) Theme: Black
    • ruby-theme-10.css (optional) Theme: Blue
    • ruby-theme-11.css (optional) Theme: Gray/Red
    • ruby-theme-12.css (optional) Theme: Light Purple
    • ruby-theme-13.css (optional) Theme: White
    • bootstrap.min.css (optional)
    • font-awesome.min (must) For FontAwesome and Icons
    • ie10-viewport-bug-workaround.css (optional) Bug Fix
    • normalize.css (optional) but, if you don't use any CSS framework or any Reset.css, highly advised
  • img/

    • Ruby Menu Images are here

    Note: Images shown in demo are not included in the package

  • js/

    • Ruby Menu Javascript

    • ruby-main.js (must) Main Javascript
    • jquery-3.1.0.min.js (must) Main Javascript
    • ruby-demo.js (optional) Demo Showcase Javascript - This file is not supported by us!
    • ie10-viewport-bug-workaround.js (optional) Bug fix
  • fonts/

    • FontAwesome

  • Documentation/

    • Usage Instructions

Main File Structure in your HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="title" content="Ruby Mega Menu">
    <meta name="description" content="A mega menu built with CSS and Javascript">
    <meta name="author" content="brienlabs">
    <link rel="icon" href="../../favicon.ico">

    <title>Ruby Mega Menu

    <!-- NORMALIZE.CSS -->
    <link href="css/normalize.css" rel="stylesheet">
    <!-- FontAwesome CSS -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- IF YOU WANT TO USE BOOTSTRAP, BOOTSTRAP STYLES LINK POSITION MUST BE HERE BELOW -->
    <!-- link href="css/bootstrap.min.css" rel="stylesheet" -->

    <!-- ruby Main -->
    <link href="css/ruby-main.css" rel="stylesheet">
    <!-- ruby Vertical -->
    <link href="css/ruby-vertical.css" rel="stylesheet">
    <!-- ruby Vertical -->
    <link href="css/ruby-transitions.css" rel="stylesheet" id="ruby-transitions">
    <!-- ruby Responsive -->
    <link href="css/ruby-responsive.css" rel="stylesheet">
    <!-- font Open-Sans -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,700' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
    <![endif]-->
  </head>

  <body>
    <div class="ruby-wrapper">
      ...
    </div>

    <!-- JQUERY -->
    <script src="js/jquery-3.1.0.min.js">

    <!-- RUBY MAIN JAVASCRIPT -->
    <script src="js/ruby-main.js">

  </body>
</html>

Main Menu Structure

You have to use div.ruby-wrapper and ul.ruby-menu in order to get the styles work. Example menu structure:

<div class="ruby-wrapper">
  <button class="c-hamburger c-hamburger--htx visible-xs">
    <span>toggle menu</span>
  </button>
  <ul class="ruby-menu">
    <li class="ruby-active-menu-item"><a href="#">Home</a></li>
    <li><a href="#">Classic</a>
      <ul>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        ...
      </ul>
    </li>

    <li class="ruby-menu-mega"><a href="#">Mega</a>
      <div>
        Your Content Goes Here
      </div>
    </li>

    <li class="ruby-menu-mega-blog"><a href="#">Blog</a>
      <div>
        <ul class="ruby-menu-mega-blog-nav">

          <li class="ruby-active-menu-item"><a href="#">Blog-4-Column</a>
            <div>
              Your Blog Content Goes Here
            </div>
          </li>

          <li><a href="#">Blog-3-Column</a>
            <div>
              Your Blog Content Goes Here
            </div>
          </li>

          <li><a href="#">Blog-2-Column</a>
            <div>
              Your Blog Content Goes Here
            </div>
          </li>

        </ul>
      </div>
    </li>

    <li class="ruby-menu-mega-shop"><a href="#">Shop</a>
      <div>
        <ul>
          <li class="ruby-active-menu-item"><a href="#">Clothing</a>
            <div>
              Your Shop Content Goes Here
            </div>
          </li>
          <li><a href="#">Outerwear</a>
            <div>
              Your Shop Content Goes Here
            </div>
          </li>
          <li><a href="#">Bags & Shoes</a>
            <div>
              Your Shop Content Goes Here
            </div>
          </li>
          <li><a href="#">Accessories</a>
            <div>
              Your Shop Content Goes Here
            </div>
          </li>
          <li><a href="#">Collections</a>
            <div>
              Your Shop Content Goes Here
            </div>
          </li>
        </ul>
      </div>
    </li>

    <li class="ruby-menu-right"><a href="#">Right</a>
      <ul>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        ...
      </ul>
    </li>

    <li class="ruby-menu-right ruby-menu-social"><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i><span>@rubymenu</span></a></li>
    <li class="ruby-menu-right ruby-menu-social"><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i><span>/rubymenu</span></a></li>
    <li class="ruby-menu-right ruby-menu-social ruby-menu-search"><a href="#"><i class="fa fa-search" aria-hidden="true"></i><span><input type="text" name="search" placeholder="Search.."></span></a></li>

  </ul>
</div>

Mega Menu

Here is the classic mega menu usage. Just call class="ruby-menu-mega"

<li class="ruby-menu-mega"><a href="#">Mega</a>
  <div>
    Your Content Goes Here
  </div>
</li>

Mega Blog Menu

Here is the blog style mega menu usage. Use the classes like below:

<li class="ruby-menu-mega-blog"><a href="#">Blog</a>
  <div>
    <ul class="ruby-menu-mega-blog-nav">

      <li class="ruby-active-menu-item"><a href="#">Blog-4-Column</a>
        <div>
          Your Blog Content Goes Here
        </div>
      </li>

      <li><a href="#">Blog-3-Column</a>
        <div>
          Your Blog Content Goes Here
        </div>
      </li>

      <li><a href="#">Blog-2-Column</a>
        <div>
          Your Blog Content Goes Here
        </div>
      </li>

    </ul>
  </div>
</li>

Mega Shop Menu

Here is the shop style mega menu usage. Use the classes like below:

<li class="ruby-menu-mega-shop"><a href="#">Shop</a>
  <div>
    <ul>
      <li class="ruby-active-menu-item"><a href="#">Clothing</a>
        <div>
          Your Shop Content Goes Here
        </div>
      </li>
      <li><a href="#">Outerwear</a>
        <div>
          Your Shop Content Goes Here
        </div>
      </li>
      <li><a href="#">Bags & Shoes</a>
        <div>
          Your Shop Content Goes Here
        </div>
      </li>
      <li><a href="#">Accessories</a>
        <div>
          Your Shop Content Goes Here
        </div>
      </li>
      <li><a href="#">Collections</a>
        <div>
          Your Shop Content Goes Here
        </div>
      </li>
    </ul>
  </div>
</li>

Right Aligned 1st Level

If you want to align a 1st level menu item to the right, use <li class="ruby-menu-right"

<li class="ruby-menu-right"><a href="#">Right</a>

3rd & 4th Levels Opens to Left

Default classic navigation 3rd & 4th levels opens to right. If you want to make a sublevel opens to the opposite direction (left), use <li class="ruby-open-to-left"

<ul class="ruby-menu">

  ...

  <li><a href="#">Classic</a>
    <ul>
      <li><a href="#">2nd Level #1</a></li>
      <li><a href="#">2nd Level #2</a></li>
      <li class="ruby-open-to-left"><a href="#">2nd Level #4</a>
        <ul>
          <li><a href="#">3rd Level #1</a></li>
          <li><a href="#">3rd Level #2</a></li>
          <li><a href="#">3rd Level #3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  ...

</ul>

Disabling Transitions

Just remove the following line in your page:

<link href="css/ruby-transitions.css" rel="stylesheet" id="ruby-transitions">

Enabling Dividers

Add .ruby-menu-dividers class to your main level:

<ul class="ruby-menu ruby-menu-dividers">

  ...

<ul>

Enabling Transparent Menu

Add .ruby-menu-transparent class to ruby wrapper:

<div class="ruby-wrapper ruby-menu-transparent">

  ...

<div>

Enabling Full Width

Add .ruby-menu-full-width class to ruby wrapper:

<div class="ruby-wrapper ruby-menu-full-width">

  ...

<div>

Using a Different Theme

Add theme css. Example (Blue):

<link href="css/ruby-theme-10.css" rel="stylesheet">

Important Note: Call theme file after ruby-responsive.css

Using Icons

FontAwesome icons have been used in this menu.

Just open FontAwesome icon list, and click on an icon to see its embed code. For example:

<i class="fa fa-bath" aria-hidden="true"></i>

Question?

Contact me via ismailonur@gmail.com