Flyout Sidebar Menu CSS

Edit CSS

/* @IMPORT RULES
==============================*/
@import url("/vineyard:css/code/1");
 
/* CONTAINERS
==============================*/
#container {
    opacity: 1;
}
 
/* CONTENT
==============================*/
 
#page-title {
  animation-duration: 3s;
  animation-name: slidein;
}
 
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
 
  to {
    margin-left: 0%;
    width: 100%;
  }
}
 
/* NEW PAGES BOX
==============================*/
.new-page-box {
    margin:0 !important;
}
 
/* FLYOUT SIDE MENU
==============================*/
 
#side-bar { 
    margin-top: 100px;
    padding-bottom: 10px;
}
 
#side-bar ul { 
    list-style-type: none;
    padding: 0;
    position: relative; 
    width: 200px; 
    z-index: 500; 
}
 
#side-bar li a{ 
    background: url("vertical-list/arrow-black.gif") no-repeat scroll 160px center #EEF0F0;
    border-bottom: 1px solid #888;
    color: #000000;
    display: block;
    font-size: 11px;
    height: 22px;
    line-height: 22px;
    padding-left: 10px;
    text-decoration: none;
    width: 163px;
}
 
#side-bar a, #side-bar a:visited { 
    color: #000000; 
    display: block; 
    height: 25px; 
    line-height: 2em; 
    padding-left: 5px; 
    text-decoration: none; 
    width: 163px; 
}
 
#side-bar li ul {
    background-color: #fff;
    border: 1px solid #888;
    left: 100px;
    margin-top: -20px;
    position: absolute;
    visibility: hidden;
    width: 140px;
    animation-duration: 3s;
    animation-name: slideout;
}
 
@keyframes slideiout {
  from {
    margin-left: 0;
    width: 0;
  }
 
  to {
    margin-left: 200px;
    width: 163px;
  }
}
 
#side-bar li ul li a {
    width:128px;
}
 
#side-bar li:hover > ul, #side-bar ul a:hover ul, #side-bar ul a:hover ul a:hover ul, #side-bar ul a:hover ul a:hover ul a:hover ul, #side-bar ul a:hover ul a:hover ul a:hover ul a:hover ul { 
    visibility: visible;
}
 
#side-bar ul a:hover ul ul, #side-bar ul a:hover ul a:hover ul ul, #side-bar ul a:hover ul a:hover ul a:hover ul ul { 
    visibility: visible; 
}
Site Design, Syntax and Examples by Rob Elliott 2008-2016