CSS Sliding menu with scroll, no JS were used
Forked from Eduard L.'s Pen Side Sliding Menu CSS.
<!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="css/menu.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> | |
<a class="logo" href="http://startific.com"> | |
</a> | |
</div> | |
<div class="settings"></div> | |
<div class="scrollbar" id="style-1"> | |
<ul> | |
<li> | |
<a href="http://startific.com"> | |
<i class="fa fa-home fa-lg"></i> | |
<span class="nav-text">Home</span> | |
</a> | |
</li> | |
<li> | |
<a href="http://startific.com"> | |
<i class="fa fa-user fa-lg"></i> | |
<span class="nav-text">Login</span> | |
</a> | |
</li> | |
<li> | |
<a href="http://startific.com"> | |
<i class="fa fa-envelope-o fa-lg"></i> | |
<span class="nav-text">Contact</span> | |
</a> | |
</li> | |
<li> | |
<a href="http://startific.com"> | |
<i class="fa fa-heart-o fa-lg"></i> | |
<span class="share"> | |
<div class="addthis_default_style addthis_32x32_style"> | |
<div style="position:absolute; | |
margin-left: 56px;top:3px;"> | |
<a href="http://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" width="30px" height="30px"></a> | |
<a href="http://twitter.com/share" target="_blank" class="share-popup"><img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png" width="30px" height="30px"></a> | |
<a href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_&title=_TITLE_ | |
" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png" width="30px" height="30px"></a> | |
</div> | |
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> | |
<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> | |
</li> | |
</li> | |
<li class="darkerlishadow"> | |
<a href="http://startific.com"> | |
<i class="fa fa-clock-o fa-lg"></i> | |
<span class="nav-text">News</span> | |
</a> | |
</li> | |
<li class="darkerli"> | |
<a href="http://startific.com"> | |
<i class="fa fa-desktop fa-lg"></i> | |
<span class="nav-text">Technology</span> | |
</a> | |
</li> | |
<li class="darkerli"> | |
<a href="http://startific.com"> | |
<i class="fa fa-plane fa-lg"></i> | |
<span class="nav-text">Travel</span> | |
</a> | |
</li> | |
<li class="darkerli"> | |
<a href="http://startific.com"> | |
<i class="fa fa-shopping-cart"></i> | |
<span class="nav-text">Shopping</span> | |
</a> | |
</li> | |
<li class="darkerli"> | |
<a href="http://startific.com"> | |
<i class="fa fa-microphone fa-lg"></i> | |
<span class="nav-text">Film & Music</span> | |
</a> | |
</li> | |
<li class="darkerli"> | |
<a href="http://startific.com"> | |
<i class="fa fa-flask fa-lg"></i> | |
<span class="nav-text">Web Tools</span> | |
</a> | |
</li> | |
<li class="darkerli"> | |
<a href="http://startific.com"> | |
<i class="fa fa-picture-o fa-lg"></i> | |
<span class="nav-text">Art & Design</span> | |
</a> | |
</li> | |
<li class="darkerli"> | |
<a href="http://startific.com"> | |
<i class="fa fa-align-left fa-lg"></i> | |
<span class="nav-text">Magazines | |
</span> | |
</a> | |
</li> | |
<li class="darkerli"> | |
<a href="http://startific.com"> | |
<i class="fa fa-gamepad fa-lg"></i> | |
<span class="nav-text">Games</span> | |
</a> | |
</li> | |
<li class="darkerli"> | |
<a href="http://startific.com"> | |
<i class="fa fa-glass fa-lg"></i> | |
<span class="nav-text">Life & Style | |
</span> | |
</a> | |
</li> | |
<li class="darkerlishadowdown"> | |
<a href="http://startific.com"> | |
<i class="fa fa-rocket fa-lg"></i> | |
<span class="nav-text">Fun</span> | |
</a> | |
</li> | |
</ul> | |
<li> | |
<a href="http://startific.com"> | |
<i class="fa fa-question-circle fa-lg"></i> | |
<span class="nav-text">Help</span> | |
</a> | |
</li> | |
<ul class="logout"> | |
<li> | |
<a href="http://startific.com"> | |
<i class="fa fa-lightbulb-o fa-lg"></i> | |
<span class="nav-text"> | |
BLOG | |
</span> | |
</a> | |
</li> | |
</ul> | |
</nav> | |
</body> | |
</html> |
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: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; | |
} | |
/* ScrolBar */ | |
.scrollbar | |
{ | |
height: 90%; | |
width: 100%; | |
overflow-y: hidden; | |
overflow-x: hidden; | |
} | |
.scrollbar:hover | |
{ | |
height: 90%; | |
width: 100%; | |
overflow-y: scroll; | |
overflow-x: hidden; | |
} | |
/* Scrollbar Style */ | |
#style-1::-webkit-scrollbar-track | |
{ | |
border-radius: 2px; | |
} | |
#style-1::-webkit-scrollbar | |
{ | |
width: 5px; | |
background-color: #F7F7F7; | |
} | |
#style-1::-webkit-scrollbar-thumb | |
{ | |
border-radius: 10px; | |
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); | |
background-color: #BFBFBF; | |
} | |
/* Scrollbar End */ | |
.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; | |
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:#8a8a8a; | |
font-size: 13px; | |
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 #f2f2f2; | |
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; | |
} | |
/* Logo Hover Property */ | |
.settings:hover, settings:focus { | |
background:url( http://s17.postimg.org/74cl7s05b/logo_hover.jpg); | |
-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; | |
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; | |
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; | |
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; | |
} | |
.settings:active, settings:focus { | |
background:url( http://s3.postimg.org/bqfooag4z/startific.jpg); | |
-webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; | |
-moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; | |
-o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; | |
transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; | |
} | |
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; | |
text-transform: uppercase; | |
} | |
/* Darker element side menu Start*/ | |
.darkerli | |
{ | |
background-color:#ededed; | |
text-transform:capitalize; | |
} | |
.darkerlishadow | |
{ | |
background-color:#ededed; | |
text-transform:capitalize; | |
-webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55); | |
-moz-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55); | |
box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55); | |
} | |
.darkerlishadowdown | |
{ | |
background-color:#ededed; | |
text-transform:capitalize; | |
-webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55); | |
-moz-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55); | |
box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55); | |
} | |
/* Darker element side menu End*/ | |
.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'); | |
} |