Create a side hover menu for your site with pure CSS

Create a nice and attractive side hover menu for your website with pure CSS. It will let you store menu items in it and only show when user move the mouse towards any edge of the screen. Here I am creating a left-sided menu.

Lets first prepare a HTML page with menu,


Now lets start playing with css styling, in style.css


position :fixed; /*this will make menu non movable */
left:-170px; /*this will make menu fit in left*/
top:0; /*to make menu touch top edge*/
width:200px; /*width of the menu bar*/
overflow:hidden; /*to hide overflow*/
height:100%;/*100% height */
background-color:#eee; /*background color */
box-shadow:0 0 12px #333; /*for shadow effect */

left:0; /*on mouse over the menu will be visible*/

#hovermenu li{
margin-right:30px;/*to keep items invisible when menu not hovered*/
list-style:none; /*to remove bulletin icon*/
text-align:center; /*to make text align center*/
width:auto; /*take the width auto*/
this css code will make menu float left, expand its height according to screen, hide menu until mouse is moved over it, and show menu only when mouse is on it.