"Pin Menu" using JQuery

Answer 1

Hi Robert, conceptually, here's what you need to do:

Create a hidden div (with 'display:none;') and position it where you want to become visible later. Create a mouse-over handler for the respective button, like so:

$('#button').mouseover(function(){
    $('#menu').css({ 'display': 'block' }); // this will make the hidden menu become visible
});

then create a mouse leave handler:

$('#menu').mouseleave(function(){
     $('#menu').fadeOut() // this will hide the menu again
});

To keep the menu open when the user want to, unbind the mouseleave even event again, like so:

$('#pin').click(function(){
   $('#menu').unbind();
});

hope this helps,

martin

Answer 2

Heres an example using jquery.

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<a class="menuItem" href="#" >Click me</a>
<div style="display:none;" class="panel">
    <div class="pin">
        Free
    </div>
    <p> 
        Contents here
    </p>
</div>
<script type="text/javascript">

    var locked = false;
    $("div.pin").click(function() {
        locked = !locked
        $(this).text((locked) ? "Pinned" : "Free");
    });

    $("a.menuItem").mouseenter(function() {
        $("div.panel").show('fast');
    });

    $("div.panel").mouseout(function() {
        if (locked == false) {
            $("div.panel").hide("fast");
        }
    });

</script>

Answer 3

I like Ori's answer, but screw it, I already wrote this. Either way, you want to stay away from the 'locked' global, and you want to wrap all this up into a plugin (are you sure one doesn't exist already?).

Style:

#pincontent {
  display: none;
  border: 1px solid black;
}

#pin, #close {
  cursor: pointer;
}

Code:

$(document).ready(function() {
  $('#pinmenu').data('pinned', 0);

  $('#pintrigger').mouseover(function() {
    $('#pincontent').show();
  });

  $('#pinmenu').mouseleave(function(evt) {
    if ($('#pinmenu').data('pinned') !== 1) {
      $('#pincontent').hide();
    }          
  });      

  $('#pin').click(function() {
    var pinned = $('#pinmenu').data('pinned');
    if (pinned === 0) {
      $('#pin').css('color', 'red');
      $('#pinmenu').data('pinned', 1);        
    } else {
      $('#pin').css('color', 'black');
      $('#pinmenu').data('pinned', 0);        
    }
  });

  $('#close').click(function() {
    $('#pincontent').hide();
    $('#pin').css('color', 'black');
    $('#pinmenu').data('pinned', 0);                
  });
});

HTML:

<div id='pinmenu'>
  <div id='pintrigger'>My Trigger</div>
  <div id='pincontent'>
    <div><span id='pin'>Pin</span> <span id='close'>Close</span></div>
    <div>Some text lalal</div>
  </div>
</div>  
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>