.cbp-spmenu { background:#000 url('../images/05.jpg'); position: fixed; font-family: 'Hammersmith One', sans-serif; box-shadow:0 0 7px 4px rgba(0,0,0,0.5); border-left:2px solid #333; } .cbp-spmenu a { display: block; color: #fff; font-size: 1.0em; font-weight: 800; } .cbp-spmenu a:hover { /*background: #FF9900;*/ background: -moz-linear-gradient(top, rgba(242,145,48,0) 0%, rgba(237,116,47,0.71) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,145,48,0)), color-stop(100%,rgba(237,116,47,0.71))); background: -webkit-linear-gradient(top, rgba(242,145,48,0) 0%,rgba(237,116,47,0.71) 100%); background: -o-linear-gradient(top, rgba(242,145,48,0) 0%,rgba(237,116,47,0.71) 100%); background: -ms-linear-gradient(top, rgba(242,145,48,0) 0%,rgba(237,116,47,0.71) 100%); background: linear-gradient(to bottom, rgba(242,145,48,0) 0%,rgba(237,116,47,0.71) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f29130', endColorstr='#b5ed742f',GradientType=0 ); } #hideRight{ background: rgba(0,0,0,0.5); } .cbp-spmenu .active{ background-coler:rgba(241,225,142,0.5); } /* Orientation-dependent styles for the content of the menu */ .cbp-spmenu-vertical { width: 240px; height: 100%; top: 0; z-index: 1000; } .cbp-spmenu-vertical a { border-bottom: 1px solid #666; padding: 0.5em; text-decoration:none; } .cbp-spmenu-horizontal { width: 100%; height: 150px; left: 0; z-index: 1000; overflow: hidden; } .cbp-spmenu-horizontal a { float: left; width: 20%; padding: 0.8em; border-left: 1px solid #258ecd; } /* Vertical menu that slides from the left or right */ .cbp-spmenu-left { left: -240px; } .cbp-spmenu-right { right: -240px; } .cbp-spmenu-left.cbp-spmenu-open { left: 0px; } .cbp-spmenu-right.cbp-spmenu-open { right: 0px; } /* Horizontal menu that slides from the top or bottom */ .cbp-spmenu-top { top: -150px; } .cbp-spmenu-bottom { bottom: -150px; } .cbp-spmenu-top.cbp-spmenu-open { top: 0px; } .cbp-spmenu-bottom.cbp-spmenu-open { bottom: 0px; } /* Push classes applied to the body */ .cbp-spmenu-push { overflow-x: hidden; position: relative; left: 0; } .cbp-spmenu-push-toright { left: 240px; } .cbp-spmenu-push-toleft { left: -240px; } /* Transitions */ .cbp-spmenu, .cbp-spmenu-push { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } /* Example media queries */ @media screen and (max-width: 55.1875em){ .cbp-spmenu-horizontal { font-size: 75%; height: 110px; } .cbp-spmenu-top { top: -110px; } .cbp-spmenu-bottom { bottom: -110px; } } @media screen and (max-height: 26.375em){ .cbp-spmenu-vertical { font-size: 90%; width: 190px; } .cbp-spmenu-left, .cbp-spmenu-push-toleft { left: -190px; } .cbp-spmenu-right { right: -190px; } .cbp-spmenu-push-toright { left: 190px; } }