Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Translucent Dropdowns

DZone's Guide to

Translucent Dropdowns

·
Free Resource
// 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




// the CSS bit

.up {
}

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

#translucentBack {
  background: #333;
  width: 220px;
  height: 100px;
  position: absolute;
  filter:alpha(opacity=10);
  -moz-opacity:0.1;
  opacity: 0.1;  
}

#opaqueFore {
  width: 220px;
  height: 100px;
  z-index: 1;
  filter:alpha(opacity=100);
  -moz-opacity:1;
  opacity: 1;  
  font-size: 80%;
}



Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}