Wait, don't hit submit just yet

I could fill up this section with a whole bunch of empty promises about what I can do for you, but let's be honest it's all about the work.

Please be sure to navigate through my latest projects to see what I am capable of producing. I have a passion for the web and I am constantly learning new technologies to stay on the cutting edge. If that sounds like something you'd like for your project then let's talk.

MegaDrop - Mega Drop-down Menu CSS Framework

MegaDrop is a mega drop-down CSS framework that helps developers speed up the menu development process.  After building a few mega drop-downs I decided to build something that I could reuse that would also be available to other front-end developers.  Instead of using nested lists to create a multi-level drop-down I built it using Div's and percentages to achieve columns.

Usage

First include the megadrop.css file in your document HEAD

<link href="megadrop.css" />
<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
       <div class="container-4">
           <div class="col2">
            <p>This is the left column</p>
          </div>
          <div class="col2">
            <p>This is the right column</p>
          </div>
       </div>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

The code above shows the structure of the HTML.  It starts with a containing div that sets the width of the drop-down.  In this case I used the class .container-4 which sets the container plenty wide enough to allow for four columns.  If this width is to small you can increase by overriding the width in your own CSS file.  

You should also notice that there are two divs inside of the .container-4 div that have the class of .col2.  The number at the end of col sets the width of each column.  For example, 2 is half of four which means it will create a two column layout that stretches the full width.  So if you wanted to have 4 colums all the way across you would use .col1 on each div. 

Column CSS

.col1, .col2, .col3, .col4, .col5, .col6 { margin: 10px 0; padding: 0 10px; float: left; }

/* 1 Column */
.container-1 { width: 170px; }
.container-1 .col1 { width: 100%; }

/* 2 Columns */
.container-2 { width: 270px; }
.container-2 .col1 { width: 50%; }
.container-2 .col2 { width: 100%; }

/* 3 Columns */
.container-3 { width: 400px; }
.container-3 .col1 { width: 33.33%; }
.container-3 .col2 { width: 66.66%; }
.container-3 .col3 { width: 100%; }

/* 4 Columns */
.container-4 { width: 500px; }
.container-4 .col1 { width: 25%; }
.container-4 .col2 { width: 50%; }
.container-4 .col3 { width: 75%; }
.container-4 .col4 { width: 100%; }

/* 5 Column */
.container-5 { width: 600px; }
.container-5 .col1 { width: 20%; }
.container-5 .col2 { width: 40% }
.container-5 .col3 { width: 60% }
.container-5 .col4 { width: 80% }
.container-5 .col5 { width: 100% }

These are the classes you will use to setup the columns within the drop-down. All you have to do is import this CSS file in to your main CSS file and you'll be off and running.

Drop-down placement

You can also add the class .right to the main container to have the drop-down drop out to the left instead of the right.

Animating with jQuery

I've included a basic scripts.js file that looks for the .animated class on the .nav. It's a simple jQuery slideUp/slideDown animation that you can customize to your liking. However you will have to remove the display: block on the .nav > li:hover > div in order for the animation to work. Here is the code that is in the scripts.js file.

$(function(){
  $('.animated > li').hover(function(){
    $(this).find('div[class^="container-"]').stop().slideDown('fast');
  },
  function(){
    $(this).find('div[class^="container-"]').stop().slideUp('slow');
  });
});