top_menu

Monday, 13 August 2012

Facebook Like Image Hover Menu using CSS

.

I thought it would be a great idea to make a tutorial on how to create facebook like image hover menu using simple CSS.


This simple css technique will increase the user interactivity of your web project.



     

The HTML


<div id="nav_menu"> <h1>Facebook Image Hover Menu using CSS</h1> <div id="edit_image"> <div href="index.php" class="drop"><img src='images/hannah-montana.jpg' alt='Profile Image' width='200px' height='200px'/></div> <div class="dropdown_2columns"> <div class="col_2"> <a href="#"><div class="img" id="prof_img"></div> Change Photo</a> </div> </div> </div> </div>

The CSS

#nav_menu{ width:900px; margin:0 auto; } .drop{ width:200px;height:200px;background: #f22fff;display:box;cursor:pointer;float:left; } #nav_menu #edit_image { position:relative; width:220px; margin:0 auto; } #nav_menu #edit_image:hover { background: #ffffff; } .dropdown_2columns { position:absolute; display:none; /* Hides the drop down */ cursor:pointer; background:#ffffff; } #nav_menu #edit_image:hover .dropdown_2columns{ left:90px; float:right; display:inline; top:5px; } .img{ background:transparent url('images/penciledit.gif') no-repeat scroll right top; height:18px;width:18px; float:left; }

Features

  • The menu is placed over an image. So no extra space is required.
  • It uses a small edit image using image sprite technique.
  • The look and feel stays exactly like facebook.
  • It uses only CSS making it much more faster.
  • It works on almost all browsers without any design issue.
  • The code is clean, short and easy to understand.