Last active
August 29, 2015 14:13
-
-
Save alvarouribe/fbce5790619494a300a4 to your computer and use it in GitHub Desktop.
Side Sliding Menu
This file contains 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 class="menu"> | |
<html> | |
<head> | |
<meta charset="utf-8"/> | |
<meta http-equiv="X-UA-Compatible" content=="IE=edge"/> | |
<meta name="google" value="notranslate"/> | |
<title>Side Menu</title> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> | |
</head> | |
<body> | |
</div><nav class="main-menu"> | |
<div class="logo"></div> | |
<div class="settings"></div> | |
<ul> | |
<li> | |
<a href="http://startific.com"> | |
<i class="fa fa-home fa-lg"></i> | |
<span class="nav-text">Home</span> | |
</a> | |
<span class="share"> | |
<div style="position:absolute; | |
margin-left: 56px;top:3px;"> | |
<a class="addthis_button_facebook"></a> | |
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a"></script> | |
</span> | |
<span class="twitter"></span> | |
<span class="google"></span> | |
<span class="fb-like"> | |
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fstartific&width&layout=button&action=like&show_faces=false&share=false&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe> | |
</span> | |
<span class="nav-text"> | |
</span> | |
</a> | |
<span class="nav-text"> | |
News | |
</li> | |
<li> | |
<a href="#"> | |
<i class="fa fa-shopping-cart"></i> | |
<span class="nav-text"> | |
Shopping | |
</span> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<i class="fa fa-microphone fa-lg"></i> | |
<span class="nav-text"> | |
Film & Music | |
</span> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<i class="fa fa-flask fa-lg"></i> | |
<span class="nav-text"> | |
Web Tools | |
</span> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<i class="fa fa-picture-o fa-lg"></i> | |
<span class="nav-text"> | |
Art & Design | |
</span> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<i class="fa fa-align-left fa-lg"></i> | |
<span class="nav-text"> | |
Magazines | |
</span> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<i class="fa fa-gamepad fa-lg"></i> | |
<span class="nav-text"> | |
Games | |
</span> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<i class="fa fa-glass fa-lg"></i> | |
<span class="nav-text"> | |
Life & Style | |
</span> | |
</a> | |
</li> | |
<li class="has-subnav"> | |
<a href="#"> | |
<i class="fa fa-rocket fa-lg"></i> | |
<span class="nav-text"> | |
Fun | |
</span> | |
</a> | |
</li> | |
</ul> | |
<ul class="logout"> | |
<li> | |
<a href="#"> | |
<i class="fa fa-lightbulb-o fa-lg"></i> | |
<span class="nav-text"> | |
BLOG | |
</span> | |
</a> | |
</li> | |
</ul> | |
</nav> | |
</body> | |
</html> |
This file contains 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
body | |
{ | |
margin:0px; | |
padding:0px; | |
font-family: "Open Sans", arial; | |
background:url('http://static.tumblr.com/94eb957a00fd03c0c2f7d26decd71578/u1rhacw/osAmyyh1q/tumblr_static_tumblr_static_gaussian_blur_gradient_desktop_1680x943_wallpaper-393751.jpg'); | |
color:#fff; | |
font-weight:300; | |
} | |
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); | |
} | |
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300); | |
.logo{ | |
} | |
.settings { | |
height:73px; | |
float:left; | |
background-image:url(http://s3.postimg.org/bqfooag4z/startific.jpg); | |
background-repeat:no-repeat; | |
width:250px; | |
margin:0px; | |
text-align: center; | |
font-size:20px; | |
font-family: 'Strait', sans-serif; | |
} | |
.hover { | |
height:73px; | |
float:left; | |
background-image:url(http://s27.postimg.org/4hhl2szcf/startific_small.jpg); | |
background-repeat:no-repeat; | |
width:255px; | |
margin:0px; | |
} | |
.fa-lg { | |
font-size: 1em; | |
} | |
.fa { | |
position: relative; | |
display: table-cell; | |
width: 55px; | |
height: 36px; | |
text-align: center; | |
top:12px; | |
font-size:20px; | |
} | |
.main-menu:hover, nav.main-menu.expanded { | |
width:250px; | |
overflow:hidden; | |
opacity:1; | |
} | |
.main-menu { | |
background:#F7F7F7; | |
border-right:1px solid #e5e5e5; | |
position:absolute; | |
top:0; | |
bottom:0; | |
height:100%; | |
left:0; | |
width:55px; | |
overflow:hidden; | |
-webkit-transition:width .2s linear; | |
transition:width .2s linear; | |
-webkit-transform:translateZ(0) scale(1,1); | |
box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07); | |
opacity:1; | |
} | |
.main-menu>ul { | |
margin:7px 0; | |
} | |
.main-menu li { | |
position:relative; | |
display:block; | |
width:250px; | |
} | |
.main-menu li>a { | |
position:relative; | |
width:255px; | |
display:table; | |
border-collapse:collapse; | |
border-spacing:0; | |
color:#959595; | |
font-size: 14px; | |
text-decoration:none; | |
-webkit-transform:translateZ(0) scale(1,1); | |
-webkit-transition:all .14s linear; | |
transition:all .14s linear; | |
font-family: 'Strait', sans-serif; | |
border-top:1px solid #F0F0F0; | |
box-shadow:inset 0 1px 1px #FAFAFA; | |
text-shadow: 1px 1px 1px #fff; | |
} | |
.main-menu .nav-icon { | |
position:relative; | |
display:table-cell; | |
width:55px; | |
height:36px; | |
text-align:center; | |
vertical-align:middle; | |
font-size:18px; | |
} | |
.main-menu .nav-text { | |
position:relative; | |
display:table-cell; | |
vertical-align:middle; | |
width:190px; | |
font-family: 'Titillium Web', sans-serif; | |
} | |
.main-menu .share { | |
} | |
.main-menu .fb-like { | |
left: 180px; | |
position:absolute; | |
top: 15px; | |
} | |
.main-menu>ul.logout { | |
position:absolute; | |
left:0; | |
bottom:0; | |
} | |
.no-touch .scrollable.hover { | |
overflow-y:hidden; | |
} | |
.no-touch .scrollable.hover:hover { | |
overflow-y:auto; | |
overflow:visible; | |
} | |
.settings:hover, settings:focus { | |
background:url( http://s3.postimg.org/bqfooag4z/startific.jpg); | |
} | |
a:hover,a:focus { | |
text-decoration:none; | |
border-left:0px solid #F7F7F7; | |
} | |
nav { | |
-webkit-user-select:none; | |
-moz-user-select:none; | |
-ms-user-select:none; | |
-o-user-select:none; | |
user-select:none; | |
} | |
nav ul,nav li { | |
outline:0; | |
margin:0; | |
padding:0; | |
} | |
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a { | |
color:#fff; | |
background-color:#00bbbb; | |
text-shadow: 0px 0px 0px; | |
} | |
.area { | |
float: left; | |
background: #e2e2e2; | |
width: 100%; | |
height: 100%; | |
} | |
@font-face { | |
font-family: 'Titillium Web'; | |
font-style: normal; | |
font-weight: 300; | |
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff'); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment