...

View Full Version : Drop Down Menus?



l Squid l
07-03-2007, 06:50 PM
If you look here (http://www.xbox.com/en-US/) and move your cursor over one of the nav button a drop down menu comes, which is also transparent. I looked at the code, I didn't how to find the nav drop down menu. How would I recreate this effect? With transparency and all, I can supply another example if need.

samuri_tux
07-03-2007, 09:13 PM
I'm uncertain as to how to make it transparent (if your backgrounds a solid colour though you could just make your drop down background colour a couple shades lighter.

:) throw this between your <head></head> tags, its the javascript that does the appearing disappearing trick:

<script language="javascript">
function showMe(tehid){
document.getElementById(tehid).style.visibility="visible";
}

function hideMe(tehid){
document.getElementById(tehid).style.visibility="hidden";
}
</script>

:) throw this also between the <head> tags, it's the part that positions your drop down menu and formats it: (between ** fill in urself)

<style type=text/css>
div.menu1{background-color:*bgcolor*;position:relative;left:*how many pix from left*;top:*how many pix from top*;visibility:hidden;}
</style>

:) throw this in your body, this is the text you hold your mouse over so that the menu pops down:

<a href="" onMouseOver="showMe('m1');" onMouseOut="hideMe('m1');">Option Title</A>

:) throw this afterwards, this is the drop down menu part:

<div class="menu1" id="m1">
option1<BR>
option2<BR>
option3...<BR>
</div>

Now, the only problem with this is that the menu only shows when your mouse is over the link at the top of the text that makes the menu go down. So when you move your curser down to choose something from the list, it disappears. funny but not very usefull. It's a bug i'm currently ironing out. Perhaps somebody else could contribute?

Thanks, and hope that was slightly helpful,
Arthan Khwelnul

koyama
07-03-2007, 11:29 PM
As for the transparency: On that page they are using semi-transparent PNG background images in the menu. However, notice that the semi-transparency is not working in IE6.

l Squid l
07-04-2007, 12:05 AM
Thanks, I am going take a deeper look into the code, see what I can mange to help myself, and you out.

Mwnciau
07-04-2007, 12:10 AM
if you want to fix the transparency of PNGs put this code inside the head tags:


<script type="text/javascript">// The background PNG fix, courtesy of Youngpup (http://www.youngpup.net) and Drew McLellan (http://www.allinthehead.com)

var bgsleight = function() {
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
fnFixPng(obj);
obj.attachEvent("onpropertychange", fnPropertyChanged);
}
}
}
function fnPropertyChanged() {
if (window.event.propertyName == "style.backgroundImage") {
var el = window.event.srcElement;
if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
var bg = el.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
el.filters.item(0).src = src;
el.style.backgroundImage = "url(x.gif)";
}
}
}
function fnFixPng(obj) {
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
obj.style.backgroundImage = "url(x.gif)";
}
return {
init: function() {
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
addLoadEvent(fnLoadPngs);
}
}
}
}();
bgsleight.init();

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum