Addy Osmani has made a nice video presentation about jQuery performance improvement.
jQuery Performance Tips And Tricks 2011 – Addy Osmani from Addy Osmani on Vimeo.
How to build a “visible on hover” action menu with jQuery ?
update 29/11/2010 : please notice that the same functionality could be achieved using css only
Here is a quick way to use jQuery library to create a “visible on hover” action menu.
I’ll explain step by step how to do that.
1.) Create an html page with actions in a container
<html> <head> <title>Sam Beauvois | jQuery usage demo 1</title> </head> <body> <h2>Visible on hover with jQuery demo.<h2> <h3>Please put you mouse hover the following texts</h3> <div> Demo 1 <div> <a href="#">action 1</a> | <a href="#">action 2</a> | <a href="#">action 3</a> </div> </div> </body> </html>
Result is
simple page
2.) Link the jquery library (here from google code, but you can download the library at jquery.com) and add a css class to the container div and one other to the action div
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script> </head>
<body> <div> Demo 1 <div> <a href="#">action 1</a> | <a href="#">action 2</a> | <a href="#">action 3</a> </div> </div> </body>
3.) Add a function :
<script type="text/javascript">
$(document).ready(function()
{
ShowActionOnOver();
$(".hidden_action",this).hide(); // hide all
});
function ShowActionOnOver()
{
$(".hidden_action_container").hover(
function()
{
$(".hidden_action",this).show();
},
function()
{
$(".hidden_action",this).hide();
}
);
}
</script>
Now it’s functionnal, hover the zone to check :
4.) Now, add some css to make it nicer :
.hidden_action_container
{
padding : 15px 15px 15px 15px;
background-color: #DDDDDD;
border-style:solid;
border-color:#EEEEEE;
height:50px;
}
.hidden_action a
{
color:#999999;
font-size: 20px;
font-weight:bolder;
}
<head> <link href="demo.css" type="text/css" rel="stylesheet" /> </head>
And the final result looks like
You can see the online demo here.
http://www.sambeauvois.be/blog/2010/02/how-to-build-a-visible-on-hover-action-menu-with-css/
