Forked from Hugo Darby-Brown's Pen Fixed side naviagtion.
A Pen by Secret Sam on CodePen.
Created
August 15, 2014 03:46
-
-
Save deadflowers/2f9dbcca4bb6e4c9c6dd to your computer and use it in GitHub Desktop.
A Pen by Captain Anonymous.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"> | |
| <title>Client Windows - Personal Development Resources</title> | |
| <!-- CDN Pulled Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <!-- CDN pulled Theme --> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> | |
| <!-- Local Theme --> | |
| <!-- <link href="sleeve.css" rel="stylesheet"> --> | |
| <link href="starter-template.css" rel="stylesheet"> | |
| <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> | |
| <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> | |
| <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| <!-- Fonts and Favicons --> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" type="text/css" rel="stylesheet"> | |
| <link href="http://fonts.googleapis.com/css?family=Roboto:400,700|Roboto+Slab:400,700" rel="stylesheet" type="text/css"> | |
| <link href="http://fonts.googleapis.com/css?family=Open+Sans:200,300" rel="stylesheet" type="text/css"> | |
| <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"> | |
| <link rel="icon" href="/favicon.ico"> | |
| <link href="https://rawgithub.com/hayageek/jquery-upload-file/master/css/uploadfile.css" rel="stylesheet"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script src="https://rawgithub.com/hayageek/jquery-upload-file/master/js/jquery.uploadfile.min.js"></script> | |
| <style> | |
| $primary: #00E0FC; // Blue | |
| //$primary: #39FF14; // Green | |
| //$primary: #FC812A; // Orange | |
| body { | |
| background: #333; | |
| } | |
| [data-icon]:before { | |
| content: attr(data-icon); | |
| display: block; | |
| font-family: 'Typicons', sans-serif; | |
| } | |
| .nav { | |
| background: #222; | |
| box-shadow: 1px 0 2px rgba(black,0.6); | |
| height: 100%; | |
| left: 0; | |
| position: fixed; | |
| width: 7em; | |
| } | |
| .nav__list { | |
| border-bottom: 1px solid rgba(black,0.8); | |
| border-top: 1px solid rgba(#ccc,0.2); | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| .nav__item a { | |
| border-bottom: 1px solid rgba(#ccc,0.2); | |
| border-top: 1px solid rgba(black,0.8); | |
| display: block; | |
| color: #f1f1f1; | |
| padding: 1.5em 0; | |
| position: relative; | |
| text-decoration: none; | |
| text-shadow: 1px 1px 1px rgba(black,0.6); | |
| transition: 0.3s; | |
| &:after { | |
| background: $primary; | |
| content: ''; | |
| height: 100%; | |
| left: -0.4em; | |
| position: absolute; | |
| top: 0; | |
| transition: 0.3s; | |
| width: 0.4em; | |
| } | |
| &:before { | |
| background: -webkit-linear-gradient(white, #C0C0C0); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-size: 2.5em; | |
| text-shadow: none; | |
| transition: 0.3s; | |
| } | |
| } | |
| .nav__item a:hover { | |
| background: #101010; | |
| box-shadow: inset 0 0 1em rgba(black, 0.7); | |
| transition: 0.15s; | |
| &:after { | |
| box-shadow: 0 0 1.5em $primary; | |
| transform: translateX(0.4em); | |
| transition: 0.15s; | |
| } | |
| &:before { | |
| color: $primary; | |
| -webkit-text-fill-color: $primary; | |
| text-shadow: 0 0 1em rgba($primary, 0.7); | |
| transition: 0.15s; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="nav" role='navigation'> | |
| <ul class="nav__list"> | |
| <li class="nav__item"><a href="#" data-icon="C">Home</a></li> | |
| <li class="nav__item"><a href="#" data-icon="X">Account</a></li> | |
| <li class="nav__item"><a href="#" data-icon=";">Favourites</a></li> | |
| <li class="nav__item"><a href="#" data-icon="\">Messages</a></li> | |
| <li class="nav__item"><a href="#" data-icon="O">Settings</a></li> | |
| </ul> | |
| </nav> | |
| <p><br><center><h3>File Uploader</h3></center> | |
| <div id="fileuploader">Upload</div> | |
| <script> | |
| $(document).ready(function() | |
| { | |
| $("#fileuploader").uploadFile({ | |
| url:"upload.php", | |
| fileName:"myfile" | |
| }); | |
| }); | |
| </script> <!-- jQuery 1.11.0 --> | |
| <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="//cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> | |
| <!-- compiled plugins and individual files as needed --> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></body></html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass/css3"; | |
| $primary: #00E0FC; // Blue | |
| //$primary: #39FF14; // Green | |
| //$primary: #FC812A; // Orange | |
| body { | |
| background: #333; | |
| } | |
| [data-icon]:before { | |
| content: attr(data-icon); | |
| display: block; | |
| font-family: 'Typicons', sans-serif; | |
| } | |
| .nav { | |
| background: #222; | |
| box-shadow: 1px 0 2px rgba(black,0.6); | |
| height: 100%; | |
| left: 0; | |
| position: fixed; | |
| width: 7em; | |
| } | |
| .nav__list { | |
| border-bottom: 1px solid rgba(black,0.8); | |
| border-top: 1px solid rgba(#ccc,0.2); | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| .nav__item a { | |
| border-bottom: 1px solid rgba(#ccc,0.2); | |
| border-top: 1px solid rgba(black,0.8); | |
| display: block; | |
| color: #f1f1f1; | |
| padding: 1.5em 0; | |
| position: relative; | |
| text-decoration: none; | |
| text-shadow: 1px 1px 1px rgba(black,0.6); | |
| transition: 0.3s; | |
| &:after { | |
| background: $primary; | |
| content: ''; | |
| height: 100%; | |
| left: -0.4em; | |
| position: absolute; | |
| top: 0; | |
| transition: 0.3s; | |
| width: 0.4em; | |
| } | |
| &:before { | |
| background: -webkit-linear-gradient(white, #C0C0C0); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-size: 2.5em; | |
| text-shadow: none; | |
| transition: 0.3s; | |
| } | |
| } | |
| .nav__item a:hover { | |
| background: #101010; | |
| box-shadow: inset 0 0 1em rgba(black, 0.7); | |
| transition: 0.15s; | |
| &:after { | |
| box-shadow: 0 0 1.5em $primary; | |
| transform: translateX(0.4em); | |
| transition: 0.15s; | |
| } | |
| &:before { | |
| color: $primary; | |
| -webkit-text-fill-color: $primary; | |
| text-shadow: 0 0 1em rgba($primary, 0.7); | |
| transition: 0.15s; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment