Sam Beauvois » jQuery http://www.sambeauvois.be/blog general dev, .net and other stuff Tue, 27 Jul 2010 07:23:57 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 How to build a “visible on hover” action menu with jQuery ? http://www.sambeauvois.be/blog/2010/02/how-to-build-a-visible-on-hover-action-menu-with-jquery/ http://www.sambeauvois.be/blog/2010/02/how-to-build-a-visible-on-hover-action-menu-with-jquery/#comments Fri, 05 Feb 2010 16:43:35 +0000 Sam Beauvois http://www.sambeauvois.be/blog/?p=178 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

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 :

jquery.visible.on.hover.demo2

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

jquery.visible.on.hover.demo3

You can see the online demo here.

]]> http://www.sambeauvois.be/blog/2010/02/how-to-build-a-visible-on-hover-action-menu-with-jquery/feed/ 0