Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Drop Down Menus?

    If you look here 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.

  • #2
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Thanks, I am going take a deeper look into the code, see what I can mange to help myself, and you out.

  • #5
    Regular Coder
    Join Date
    May 2006
    Location
    Wales
    Posts
    820
    Thanks
    1
    Thanked 82 Times in 79 Posts
    if you want to fix the transparency of PNGs put this code inside the head tags:

    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •