translucent dropdown?

[ZaneSaxton]

1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem: Not sure weather this is in the correct place but, I would like to have Translucent backgrounds for the drop down menus. Just wondering weather anyone could help me with this please?

Kind Regards,

[jscheuer1]

In IE 7 and all other modern browsers, you can simply use a semitransparent .png as the background image with no background color set. However, in IE 6 you need to use the alpha-image filter and its syntax is somewhat complex and other browsers must usually be shielded from it. The good news is that in IE 6, even without the alpha-image filter, you will simply get a solid background but, the bad news is that its color may be unexpected.

Demo:

http://home.comcast.net/~jscheuer1/side/any_link.htm

[ZaneSaxton]

Hi There,

Thanks for the come back. - I looked at the demo and nicked the code for which I think does the trick. When I put it in my site it changed the text colour for the whole site, and didnt work, just got a complete transparent background.

Not sure weather that was there for me to *use* but Im bit of a novice when it comes to complex scripting.

Would someone be able to edit the following so I can basically copy and paste back into my site please?

<style type="text/css">

#dropmenudiv{
position:absolute;
border:0px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: normal;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #E7EFF7;
}

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="being_pilot.htm">Being A Pilot</a>'
menu1[1]='<a href="http://www.freewarejava.com">Being A Controller</a>'
menu1[2]='<a href="http://codingforums.com">Advertise Here</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="help_me/g_started.htm">Getting Started</a>'
menu2[1]='<a href="help_me/server_ad.htm">Server Address</a>'
menu2[2]='<a href="help_me/server_stat.htm">Server Status</a>'
menu2[3]='<a href="advertise.htm">Advertise Here</a>'

var menu3=new Array()
menu3[0]='<a href="http://cnn.com">Management Staff</a>'
menu3[1]='<a href="http://msnbc.com">Controller Staff</a>'
menu3[2]='<a href="http://news.bbc.co.uk">Job Vacancies</a>'
menu3[3]='<a href="http://news.bbc.co.uk">Advertise Here</a>'

var menu4=new Array()
menu4[0]='<a href="http://cnn.com">...Lets Go!</a>'
menu4[1]='<a href="http://msnbc.com">World Map</a>'
menu4[2]='<a href="http://news.bbc.co.uk">Advertise Here</a>'

		
var menuwidth='165px' //default menu width
var menubgcolor='white'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

Thanks, bit of a thicky when it comes to this... Although my day job is being a pilot, bit strange :P

Thanks,

Zane

[jscheuer1]

The style is all you need to change, sorry I didn't realize the level of your expertise, that demo was modified earlier for other purposes as well and wasn't meant to be a drop in replacement. Here I will modify the style from your post:

<style type="text/css">

#dropmenudiv{
position:absolute;
border:0px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: normal;
background-image:url('semi_trans.png');
}

#dropmenudiv a:hover{ /*hover background color*/
background-image:url('semi_trans_y.png');
}

</style>

You will need the images:

http://home.comcast.net/~jscheuer1/side/semi_trans.png

and:

http://home.comcast.net/~jscheuer1/s...mi_trans_y.png

These images are very small and therefore invisible to the naked eye (my naked eye, at least). Just right click on the links and save them to the same directory as the page that will use them. You may want to preload the images for best effect. A real easy way to do that is to add this just after your body tag:

<div style="visibility:hidden;position:absolute;top:-3000px;left:-3000px;"><img src="semi_trans.png"><img src="semi_trans_y.png"></div>

[ZaneSaxton]

Thanks for that your very helpful!, it's much easier now.

I still have slight problems with it though, the dropdown back ground is now grey for some reason.

I have a screenshot, just trying to find out how to attach it.

I will keep playing with it and see what happens, but if you know what the problem is, please advise!

Thanks again,

Zane

[mburt]

<div style="visibility:hidden;position:absolute;top:-3000px;left:-3000px;"><img src="semi_trans.png"><img src="semi_trans_y.png"></div>

John, won't that make the images be completely invisible, not even semi-transparent?
If the images are truly transparent, they should come out transparent, no need for using any css properties.

[jscheuer1]

Thanks for that your very helpful!, it's much easier now.

I still have slight problems with it though, the dropdown back ground is now grey for some reason.

I have a screenshot, just trying to find out how to attach it.

I will keep playing with it and see what happens, but if you know what the problem is, please advise!

Thanks again,

Zane

Gray is the color of the 'resting state' semi_trans.png, if you want a different color, you will need make or find another image to use. It does allow you to see what is beneath. When you hover, you get the yellowish one - semi_trans_y.png - this one can also be changed to suit. And, as I said - in IE 6 they will both appear solid. If you are still having problems, it might be due to differences in the script but, I tried it with your version from your post and it worked out fine. For more troubleshooting, please provide a link to your page.

John, won't that make the images be completely invisible, not even semi-transparent?
If the images are truly transparent, they should come out transparent, no need for using any css properties.

That is just a bit of quick and dirty 'preload code'. It loads the images into a division that no one will ever see as, it is positioned off of the page and takes up no layout space as, its position property is absolute. That way, there is no lag when it comes time for the menu to use the images. They are already cached.

[mburt]

Ah, I see. I usual put those type of scripts at the beginning of the body though, so it comes first in the loading cache. Sorry about the misunderstanding.

[ZaneSaxton]

Gray is the color of the 'resting state' semi_trans.png, if you want a different color, you will need make or find another image to use. It does allow you to see what is beneath. When you hover, you get the yellowish one - semi_trans_y.png - this one can also be changed to suit. And, as I said - in IE 6 they will both appear solid. If you are still having problems, it might be due to differences in the script but, I tried it with your version from your post and it worked out fine. For more troubleshooting, please provide a link to your page.



That is just a bit of quick and dirty 'preload code'. It loads the images into a division that no one will ever see as, it is positioned off of the page and takes up no layout space as, its position property is absolute. That way, there is no lag when it comes time for the menu to use the images. They are already cached.

I'm using EI7, but its showing solid - I guess this is the same problem as EI6? - Although I did see your demo, with this browser

I will upload the site so you can see what is going on, standby for a link...

[mburt]

Wow. EI7, must be the new browser that's out
Anyways... I would just use... css transparency!
Example:

filter:alpha(Opacity=50); /*IE 6+*/
opacity:0.5; /*FF 1.5+/*
-moz-opaciyu:0.6 /*older versions of FF*/
-khtml-opacity:0.5; /*konqueror*/

Opera doesn't support opacity unfortunately