I am trying to reproduce to the best I can the Lock button and menu that you see on facebook, they show it everytime you edit a profile setting or post a comment, album, music, link pretty much anything you post on facebook shows this lock. I have the photo of it below in all states of the mouse, on hover, on click.

On hover the locks background changes and also shows a tooltip above it.

On click, the background of the lock changes again and another div is shown with a list of options.

Once the menu div is showing from a previous click, you can move the mouse anywhere on the screen and the menu div will still be showing on screen, when you hover over a menu item it will change the background of the item.

When you click a menu item it sends the value to a backend script with ajax/jquery but also closes the menu div and restores the lock to appear how it did at the very start.

alt text

Can anyone help with this, or give me advice, I think I can do most of the jquery part and I can do the backend but css and divs I am not so good with, can someone please hep with the css? Any advice appreciated.

2 answers

Mottie 1134
2
points
This was chosen as the best answer

Making this takes a bit of CSS and some scripting (with jQuery). I posted a demo here. It uses a single image sprite as well - hopefully tinypic.com doesn't lag too much for you.

CSS

.share {
 width: 50px;
 background: #fff url(http://i49.tinypic.com/b3vnmr.png) 25px 0 no-repeat;
 cursor: pointer;
}
.share ul {
 height: 25px;
 border: transparent 1px solid;
 background: transparent url(http://i49.tinypic.com/b3vnmr.png) 5px bottom no-repeat;
}
.share li {
 display: none;
 list-style: none;
 text-align: left;
 margin-left: 10px;
 padding-left: 20px;
 width: 150px;
 background-color: #ccc;
 color: #000;
}
div.hover {
 background-color: #ccc;
}
div.hover ul {
 border: #777 1px solid;
}
li.hover {
 background-color: #333;
 color: #ddd;
}
div.active {
 background: #555 url(http://i49.tinypic.com/b3vnmr.png) 25px -25px no-repeat;
}
div.active ul {
 background: transparent url(http://i49.tinypic.com/b3vnmr.png) 5px -102px no-repeat;
}

HTML

<div class="share">
 <ul>
  <li>Everyone</li>
  <li>Friends of Friends</li>
  <li>Only Friends</li>
  <li>Customize</li>
 </ul>
</div>

Script (using jQuery)

$(document).ready(function(){
 // Hide list if you click anywhere on the page
 $(document).click(function(e){
  // ignore if list is already hidden
  if ( $('div.share li').is(':hidden') ) return;
  // target is the UL, then find the parent and see if it is the list
  if ( $(e.target).parent().is('.share') ) return;
  $('.share').removeClass('active').find('li').hide();
 })
 // Add button and list functions
 $('.share')
 // Add button functions
  .hover(function(){
   $(this).addClass('hover');
  },function(){
   $(this).removeClass('hover');
   if ($(this).is(':not(".active")')) $(this).find('li').hide();
  })
  .click(function(){
   $(this).toggleClass('active').find('li').toggle();
  })
  // Add list functions
  .find('li').hover(function(){
   $(this).addClass('hover');
  },function(){
   $(this).removeClass('hover');
  })
  .click(function(){
   var indx = $('.share li').index(this);
   alert('You selected choice #' + (indx + 1) + ' (' + $(this).html() + ')' );
  })
})
Answered almost 7 years ago by Mottie
  • thank you sooo much that is a great start! Jason almost 7 years ago
  • A quick question, the UL list, would I need to put it inside another DIV to align it under the lock button instead of on the side? Jason almost 7 years ago
  • Dang! For sheer quantity: +1 Abinadi Ayerdis almost 7 years ago
  • Hi Jason, yes you will need to wrap the list in a div to reposition it. I've added another demo to help you out ;) (http://pastebin.me/8ab0389dc87c9b0a0b733ff1d9c508e2) Mottie almost 7 years ago
1
point

A good way for the buttons is using a CSS sprite: all the 3 state images in one image. With some little CSS and jQuery you can easy make the hover and click effect. Maybe is these post helpfull.

Answered almost 7 years ago by Mailman