Foundation 5.5.0 Login Dropdown

by Charles Butler

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/vendor/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

<a data-dropdown="autoCloseExample" aria-controls="autoCloseExample" aria-expanded="false"><i class="fa fa-fw fa-2x fa-user"></i></a> 
<div id="autoCloseExample" class="f-dropdown small" data-dropdown-content tabindex="-1" aria-hidden="true" aria-autoclose="false" tabindex="-1">
    <div class="row">
<div class="small-12 columns">
   <h5 class="title">Sign into Devware</h5>
   <!-- start email -->
   <div class="row collapse">
      <div class="small-10 columns">
         <input type="text" placeholder="Email Address" />
      </div>
      <div class="small-2 columns"> <span class="postfix"><i class="fa fa-envelope"></i></span>
      </div>
   </div>
   <!-- start password -->
   <div class="row collapse">
      <div class="small-10 columns">
         <input type="text" placeholder="Password" />
      </div>
      <div class="small-2 columns"> <span class="postfix"><i class="fa fa-lock"></i></span>
       </div>
   </div>
   <!-- end password -->
       <div class="row collapse">
      <div class="small-6 columns">
    <div class="switch tiny round">
        <input id="exampleCheckboxSwitch" type="checkbox" checked />
  <label for="exampleCheckboxSwitch"></label>
</div> 

           </div>   
              <div class="small-6 columns">
    <a class="button expand">LOGIN</a>
           </div>
    </div>
        </div>
    </div>
    <div class="social-drop"><a>Forgot your password?</a></div>
</div>

CSS

button, .button {
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    line-height: normal;
    margin: 0 0 1.25rem;
    position: relative;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    display: inline-block;
    padding-top: 0.65rem;
    padding-right: 2rem;
    padding-bottom: 0.725rem;
    padding-left: 2rem;
    font-size: 0.9rem;
    background-color: #3498DB;
    border-color: #217bb8;
    color: #FFFFFF;
    transition: background-color 300ms ease-out;
}
.title {
    font-size: 1.2rem;
    line-height: 2.6rem;
    margin:0;
}
.f-dropdown:before, .f-dropdown:after {
    border:none;
    box-shadow: none;
}
.switch {
    margin-bottom: 0;
}
.switch:before {
content: "Remember Me";
    font-size: 0.75rem;
    color: #999;
    margin:0;
    padding:0;
    line-height: 20px;
    display: block;
}
  .switch.tiny label {
    width:2rem;
    height: 1rem; }
  .switch.tiny label:after {
    width: 0.5rem;
    height: 0.5rem; }
  .switch.tiny input:checked + label:after {
    left: 1.25rem; }
.social-drop {
    text-align: center;
    line-height:35px;
    background: #F2F2F2;
    border-top: 1px solid #ccc;
    padding-left:7px;
    font-size: 0.78rem;
}

JavaScript

$(document).foundation();