Dashboard Menu

by JamesKyle

HTML

<link rel="stylesheet" href="http://cdn.thejameskyle.com/bootstrap.css">
<link rel="stylesheet" href="http://cdn.thejameskyle.com/bootstrap-responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div class="sidebar">
    <a href="#"><h1 class="logo">Coach<strong>Up</strong></h1></a>
    <nav>
        <h4>Coach</h4>
        <ul>
            <li><a href="#" class="selected">Profile</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Availability</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Sessions</a></li>
            <li><a href="#">Income</a></li>
            <li><a href="#">Account</a></li>
        </ul>
        <h4>Athlete</h4>
        <ul>
            <li><a>Profile</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Availability</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Sessions</a></li>
            <li><a href="#">Income</a></li>
            <li><a>Account</a></li>
        </ul>
    </nav>
</div>

SCSS

html {
  font-size: 87.5%;
}
body {
  padding: 0;
  margin: 0;
  font-size: 1em;
  line-height: 1.5em;
  font-family: "Proxima-Nova-Regular", "ProximaNova-Regular", "Proxima Nova Regular", "ProximaNova Regular", "Proxima Nova", "proxima-nova", "Proxima Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-rendering: optimizeLegibility;
  font-smoothing: subpixel-antialiased;
  opacity: 0.999999;
}
.font-face.wf-proximanova-i7-active.wf-proximanova-i4-active.wf-proximanova-n4-active.wf-proximanova-n7-active.wf-proximanova-n1-active.wf-proximanova-n3-active.wf-proximanova-n9-active body {
  font-family: "proxima-nova";
}
.logo {
  color: transparent;
  background: no-repeat url("http://cdn.thejameskyle.com/coachup-logo.png");
  font-family: inherit;
  font-weight: 400;
  letter-spacing: -0.055em;
  text-transform: lowercase;
  text-decoration: none;
}
.logo strong {
  margin-left: -0.03em;
  font-weight: 900;
  letter-spacing: -0.074em;
}
.fontface.wf-mavenpro-n4-active.wf-mavenpro-n9-active .logo {
  font-family: "Maven-Pro-Regular", "MavenPro-Regular", "Maven Pro Regular", "MavenPro Regular", "Maven Pro";
  background: transparent;
  color: inherit;
}
div.sidebar {
  position: relative;
  top: 0;
  bottom: 0;
  min-height: 100%;
  left: 0;
  right: 0;
  min-width: 10em;
  margin: 0;
  padding: 0 1.5em 1.5em;
  overflow: hidden;
  background: #262626;
  color: #fff;
}
div.sidebar h1 {
  font-size: 3em;
  line-height: 1.5em;
  margin: 0;
  padding: 0 0 0.1666666em;
}
div.sidebar nav h4 {
  font-size: 1em;
  line-height: 2em;
  margin: 0 -9999px;
  padding: 0 9999px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.20);
}
div.sidebar nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 1.5em;
}
div.sidebar nav ul li {
  font-size: 1.5em;
  line-height: 1.6666666667em;
}
div.sidebar nav ul li a::after {
  content: "☰";
  display: block;
  float: right;
  width: 0;
 ...

JavaScript

function async(src) {
  var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  o.src = '//' + src;
  s.parentNode.insertBefore(o, s);
}

WebFontConfig = {
     google: { families: ['Maven Pro:400,900'] },
    typekit: { id: 'aqc6qet' }
};

async('ajax.googleapis.com/ajax/libs/webfont/1/webfont.js');
async('cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js');

$(function() {
    $("nav ul").sortable({
        containment: "parent",
        scrollSensitivity: 40,
        scrollSpeed: 5,
        tolerance: "pointer"
    });
});