A Pen by Colin.

index.html

<div class="wrap">
  <header></header>
  
  <main>
    
    <section id="vert-nav">
      <h3>Vertical Menu</h3>
       <nav role='navigation'>
        <ul class="topmenu">
          <li><a href="#0"><i class="entypo-home"></i> Home</a></li>
          <li><a href="#0"><i class="entypo-user"></i> About</a>
          <ul class="submenu">
            <li> <a href="#0">Our Story</a></li>
             <li> <a href="#0">The Team</a></li>
            <li> <a href="#0">Core Values</a></li>
          </ul>
          </li>
          <li><a href="#0"><i class="entypo-brush"></i> Projects</a>
            <ul class="submenu">
            <li> <a href="#0">Wordpress</a></li>
             <li> <a href="#0">Case Studies</a></li>
              <li> <a href="#0">Products</a></li>
          </ul>
          </li>
          <li><a href="#0"><i class="entypo-vcard"></i> Contact Us</a></li>
        </ul>
      </nav>  
    </section>
    
     <!-- Form -->
    <section id="form">
      <h3>Form</h3>
      <form>
        
        <div class="field">
        <label for="name"><i class="entypo-user"></i>   </label>
        <input type="text" id="name" />
        </div>
        
         <div class="field">
         <label for="name"><i class="entypo-mail"></i> </label>
        <input type="email" id="email" />
        </div>
         
        <div class="field">
          <label for="msg"><i class="entypo-comment"></i> </label>
          <textarea name="" id="msg" cols="30" rows="5"></textarea>
        </div>
          <input type="submit" id="submit" />
        
      </form>
    </section>
    
    <!-- Buttons -->
    <section>
      <h3 id>Buttons</h3>
       <a class="btn green" href="#0">Learn More</a>
        <a class="btn orange" href="#0">Contact Us</a>
    </section>
    
  </main>
  
</div>

script.js

$(".submenu").parent().prepend('<i class="entypo-down-open-big sf"></i>');


$("#vert-nav .topmenu a").click( function() {
  var $t = $(this);
  var $menu = $t.next(".submenu");
  $menu.slideToggle('slow');
  $menu.parent().toggleClass('openmenu');
});


$("input,textarea").focus( function() {
  $(this).prev("label").addClass('focused');
}); 
 $("input,textarea").blur( function() {
  $(this).prev("label").removeClass('focused');
});

style.scss

@import "compass";
@import url("http://weloveiconfonts.com/api/?family=entypo");

$green: #3D9970;
$orange:  #FF851B;
$white:  #fff;
$gray:   #aaa;

$f: "PT Sans";

*, *:after, *:before {
@include box-sizing(border-box);}

%smooth { -webkit-font-smoothing: antialiased; -moz-macosx-text-rendering: grayscale;}
%clearfix {
  &:after {clear:both;content:"";display:table;}
  &:before { content:"";display:table;} }

@mixin btn($bg-color: $green, $text-color: $white, $padding: 1em 2em, $display: inline-block, $font-size: 1em ) {
  background: $bg-color;
  display: $display;
  color: $text-color;
  padding: $padding;
  font-size: $font-size;
  border-bottom: .2em solid shade($bg-color, 7%);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  @extend %smooth;
  &:hover {
    color: $text-color;
    background: tint($bg-color, 10%);
  }
  &:active {
    border-bottom: none;
    margin-top: .2em;
  }
} 
//end btn mixin


[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  font-style: normal;
  @extend %smooth;
}

body {
  color: $gray;
  font-family: $f;
  letter-spacing: .05em;
  background: url("http://subtlepatterns.com/patterns/sos.png");}
    a {color: $green;text-decoration:none;margin-bottom:1em;
    &:hover {color: $orange;}
    i {margin-right: 7px;}}

.wrap {
  width: 1020px;
  margin: 0 auto;
  @extend %clearfix;
  padding: 2em 0;
}

section {
  background: $white;
  border: 1px solid shade($white, 12%);
  width: 31.333333333%;
  float: left;
  margin-right: 2%;
  padding: 0 3% 1em;
}

//== Vertical Menu ==//

#vert-nav {
  //top level items
  ul {list-style: none;padding:0;}
  .topmenu {
  li.openmenu > a {background: tint($green,10%);}
    li.openmenu .sf {-webkit-transform: rotate(180deg);}
  li { position: relative;
    .sf {position: absolute;z-index:9;top: 1em;
      right: 1em;color: shade($green, 10%);
      @include transition(all .3s ease);
      -webkit-backface-visibility: hidden;}
     &:last-child a {
        border-bottom: .2em solid shade($green, 7%); }
    a {
      margin: 0;
      padding: 1em;
      display: block;
      width: 100%;
      background: $green;
      color: $white;
      border-bottom: .1em solid shade($green, 7%);
      &:hover {
        background: tint($green, 10%);
      }
    }
  }
}// end topmenu
  
  //sub menus
  .submenu {
    display: none;
    li {
      &:last-child a {
        border-width: .1em;
      }
      a {
        padding-left:2.6em;
        background: shade($green, 3%);
        @include transition(all .3s ease);
        &:hover {
          background: shade($green,1%);
        }
      }
    }
  }

}// end sidebar


//== Form ==//
#form {
  input, textarea {width:100%;outline:none;
    border:.1em solid shade($white, 8%);border-bottom:none;
    color: $gray; padding: .65em .65em .65em 2.2em;
    &:focus {
      background: shade($white, 1%);
    }
  }
  
  .field {
    padding: 0;
    position: relative;
  }
  
  label {
    position: absolute;
    text-transform: uppercase;
    color: shade($white, 10%);
    top: .5em;
    left: .5em;
    font-size: 1.2em;
  }
  
  label.focused {color: $green;}
  
  #rangeval {
    float: right;
  }
  
  #submit {
    outline: none;
    border: none;
    @include btn($green,$white,.75em,block,1em);
  }
}

//== Buttons ==//
.green {
  @include btn();
}

.orange {
  @include btn($orange);
}


  

UI-Elements.markdown

UI Elements

Some basic website elements - vertical nav with dropdowns, a form, and a couple buttons.

A Pen by Colin on CodePen.

License.