Printable View
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,
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
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?
Thanks, bit of a thicky when it comes to this... Although my day job is being a pilot, bit strange :PCode:<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,
Zane
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:
You will need the images:Code:<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>
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:
HTML Code:<div style="visibility:hidden;position:absolute;top:-3000px;left:-3000px;"><img src="semi_trans.png"><img src="semi_trans_y.png"></div>
Thanks for that your very helpful!, it's much easier now. :cool:
I still have slight problems with it though, the dropdown back ground is now grey for some reason. :confused:
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
John, won't that make the images be completely invisible, not even semi-transparent?Quote:
<div style="visibility:hidden;position:absolute;top:-3000px;left:-3000px;"><img src="semi_trans.png"><img src="semi_trans_y.png"></div>
If the images are truly transparent, they should come out transparent, no need for using any css properties.
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.Quote:
Originally Posted by ZaneSaxton
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.Quote:
Originally Posted by 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.
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 :confused:Quote:
Originally Posted by jscheuer1
I will upload the site so you can see what is going on, standby for a link...
Wow. EI7, must be the new browser that's out :p
Anyways... I would just use... css transparency!
Example:
Opera doesn't support opacity unfortunatelyCode: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*/
EIEIO - the newest browser on the farm, yes. Kidding aside, Opera does support opacity, starting with Opera 9.0. Opacity isn't a really good solution here because it also makes the menu text translucent. Some folks wouldn't mind that but, generally you want the text nice and crisp and legible.Quote:
Originally Posted by mburt
Again, right. I forgot about that. But you could position the text within another div (position:absolute), and assigning left and top to the menu's offsetLeft and offsetTop.
That starts to get messy, I would rather resort to the IE 6 alpha image loader, even though it is really tricky because, there is less chance of an undesirable offset arising in some browser. Fortunately, with the eventual virtual demise of IE 6 and the fact that even without the alpha image loader, this technique degrades acceptably in IE 6, it really is quite a simple effect to achieve if you are at all familiar with css and semi transparent .png's. BTW, where you mentioned:Quote:
Originally Posted by mburt
That part isn't a script. It is just some HTML code that effectively preloads the images and, I did say:Quote:
I usual put those type of scripts at the beginning of the body though
Quote:
Originally Posted by myself