Create Pure CSS Sliding Menu On Hover With Scroll

If you want to add sliding menu feature on your website then this article for you. In this post i am going to share simple Pure CSS Sliding Menu On Hover With Scroll effect. This is a icon based sliding menu when ever you hover a mouse to these icon whole left panel will expand and you’ll able to see full menu link along with icons. This a good feature to free up some space form screen. default already expanded menu eat useless lest panel screen but if your are using expandable sliding menu in your project then you will get more space on screen which you can use to display more useful content.
  Side Sliding Menu CSS

Libraries

This script purely written in HTML5 and CSS3 and not dependent on any external third party library to work with sliding menu. just add fontawesome library to use icon with sliding menu.

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">


HTML

Create HTML nav bar with unordered list which act as sliding menu after applying css tricks.

<nav class="main-menu">
<div>
    <a class="logo" href="http://iamrohit.in">
    </a> 
  </div> 
<div class="settings"></div>
<div class="scrollbar" id="style-1">
 
<ul>
 
<li>                                   
<a href="http://iamrohit.in">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Home</span>
</a>
</li>   
 
<li>                                 
<a href="http://iamrohit.in">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">Login</span>
</a>
</li>   
 
 
<li>                                 
<a href="http://iamrohit.in">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">Contact</span>
</a>
</li>   
 
 
 
 
<li>
<a href="http://iamrohit.in">
<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="https://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="https://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&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;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://iamrohit.in">
<i class="fa fa-clock-o fa-lg"></i>
<span class="nav-text">News</span>
</a>
</li>
 
<li class="darkerli">
<a href="http://iamrohit.in">
<i class="fa fa-desktop fa-lg"></i>
<span class="nav-text">Technology</span>
</a>
</li>
 
<li class="darkerli">
<a href="http://iamrohit.in">
<i class="fa fa-plane fa-lg"></i>
<span class="nav-text">Travel</span>
</a>
</li>
 
<li class="darkerli">
<a href="http://iamrohit.in">
<i class="fa fa-shopping-cart"></i>
 <span class="nav-text">Shopping</span>
</a>
</li>
 
<li class="darkerli">
<a href="http://iamrohit.in">
<i class="fa fa-microphone fa-lg"></i>
<span class="nav-text">Film & Music</span>
</a>
</li>
 
<li class="darkerli">
<a href="http://iamrohit.in">
<i class="fa fa-flask fa-lg"></i>
<span class="nav-text">Web Tools</span>
</a>
</li>
 
<li class="darkerli">
<a href="http://iamrohit.in">
<i class="fa fa-picture-o fa-lg"></i>
<span class="nav-text">Art & Design</span>
</a>
</li>
 
<li class="darkerli">
<a href="http://iamrohit.in">
<i class="fa fa-align-left fa-lg"></i>
<span class="nav-text">Magazines
</span>
</a>
</li>
 
<li class="darkerli">
<a href="http://iamrohit.in">
<i class="fa fa-gamepad fa-lg"></i>
<span class="nav-text">Games</span>
</a>
</li>
 
<li class="darkerli">
<a href="http://iamrohit.in">
<i class="fa fa-glass fa-lg"></i>
<span class="nav-text">Life & Style
</span>
</a>
</li>
 
<li class="darkerlishadowdown">
<a href="http://iamrohit.in">
<i class="fa fa-rocket fa-lg"></i>
<span class="nav-text">Fun</span>
</a>
</li>
 
 
</ul>
 
 
<li>
 
<a href="http://iamrohit.in">
<i class="fa fa-question-circle fa-lg"></i>
<span class="nav-text">Help</span>
</a>
</li>   
 
 
<ul class="logout">
<li>
                   <a href="http://iamrohit.in">
                         <i class="fa fa-lightbulb-o fa-lg"></i>
                        <span class="nav-text">
                            BLOG 
                        </span>
 
                    </a>
</li>  
</ul>
        </nav>


CSS

Finally apply CSS on HTML menu list to make it fully functional sliding menu on mouse hover.

 body
{
  margin:0px;
  padding:0px;
    font-family: "Open Sans", arial;
    background:url('https://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(https://fonts.googleapis.com/css?family=Titillium+Web:300);
 
.logo{
 
}
 
.settings {
 
  height:73px; 
  float:left;
  background:url( https://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( https://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( https://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');
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by EduardL, Visit their official codepen repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.