DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Translucent Dropdowns

  • submit to reddit
        // description of your code here

// the javascript Bit

    '#contactUs': function(e) {
      e.onclick = function() {
          if(Element.hasClassName('container-popdown', 'up')) {
          new Effect.BlindDown('container-popdown', {queue: 'end', duration: .3})
          Element.removeClassName('container-popdown', 'up')
        } else {
          new Effect.BlindUp('container-popdown', {queue: 'end', duration: .3})
          Element.addClassName('container-popdown', 'up')

// the HTML Bit

<span id='container-popdown' class='up' style='display:none'>
  <span id='translucentBack'></span>
  <span id='opaqueFore'>
    <b> </b><br><br>		
    <a href=''>Nikhil</a> - <br>
    <a href=''>ROhan</a> - <br>

// the CSS bit

.up {

#container-popdown {
  position: absolute;
  left: 1050px;
  top: 30px;

#translucentBack {
  background: #333;
  width: 220px;
  height: 100px;
  position: absolute;
  opacity: 0.1;  

#opaqueFore {
  width: 220px;
  height: 100px;
  z-index: 1;
  opacity: 1;  
  font-size: 80%;



Snippets Manager replied on Fri, 2006/04/28 - 12:31am

I think you missed to explain that scriptaculous.js is needed. But still then I didn't succeed making your code working... The '#contactUs' function seems to be never called... Thanks after all becaue I understand the purpose of your code. Ciao.