www.webdeveloper.com
Results 1 to 3 of 3

Thread: Drop menu: doesnt drop with ie6

  1. #1
    Join Date
    Oct 2008
    Posts
    9

    Drop menu: doesnt drop with ie6

    Hi everyone,
    In order to get a 2 itmes menu + drop menu when first menu item is hovered, I supplied the following code:
    Code:
    <style type="text/css" media="all">
      body { behavior:url(csshover.htc);}
      div#wrapper * {margin:0; padding:0;behavior:url(csshover.htc);}
      #wrapper {border:1px solid #686;float:left;font-family:lucida, arial, sans-serif;}
      #wrapper ul {float:left;border:2px solid red;}
      #wrapper li {border:2px solid blue; list-style-type:none; float:left;}
      #wrapper a 
       {
    	background-color:#DDD; 
    	padding: .3em 6px; 
    	display:block;
       }
      #wrapper a:hover {color:#ccc; background-color:#666;}
      #wrapper li ul {position:absolute; width:7em;display:none;}
      #wrapper li ul li {width:100%;}
      #wrapper li:hover ul {position:absolute; width:7em;display:block;}
    </style>
    </head>
    <body>
    <div id="wrapper">
      <ul>
        <li><a href="#">Item 1</a>
          <ul>
            <li><a href="#">Item 1a</a></li>
            <li><a href="#">Item 1b</a></li>
          </ul>
        </li>
        <li><a href="#">Item 2</a></li>
      </ul>
    </div>
    </body>
    </html>
    With "Google chrome" it worked fine, with ie6 id did not. I was advised to add a style:
    Code:
    body { behavior:url(csshover.htc);}
    and so i did but the drop menu still doesn't show up with ie6. Can i get help with this ?
    Thanks

  2. #2
    Join Date
    Jan 2010
    Location
    Marietta, Ohio
    Posts
    2
    The behavior url you apply to the body is referring to a file called csshover.htc

    save the following code in a file with the above file name, and upload to your server in the same directory. Note that this is considered a "hack" to make IE comply, but it does work.

    The code was written by Peter Nederlof and has floated around the internet a while.

    Code:
    <attach event="ondocumentready" handler="parseStylesheets" />
    <script language="JScript">
    /**
     *	HOVER - V1.00.031224 - whatever:hover in IE
     *	---------------------------------------------
     *	Peterned - http://www.xs4all.nl/~peterned/
     *	(c) 2003 - Peter Nederlof
     *
     *	howto: body { behavior:url("csshover.htc"); }
     *	---------------------------------------------
     */
    
    var CSSBuffer, doc = window.document;
    
    function parseStylesheets() {
    	var rules, sheet, sheets = doc.styleSheets;
    	var bufferIndex = sheets.length;	
    	var head = doc.getElementsByTagName('head')[0];
    	var buffer = doc.createElement('style');
    
    	buffer.setAttribute('media', 'screen');
    	buffer.setAttribute('type', 'text/css');
    	head.appendChild(buffer);
    	CSSBuffer = sheets[bufferIndex];
    
    	for(var i=0; i<sheets.length -1; i++) {
    		sheet = sheets[i];
    		if(!sheet.media || sheet.media == 'screen') {
    			rules = sheet.rules;
    			for(var j=0; j<rules.length; j++) {
    				parseCSSRule(rules[j]);
    			}
    		}
    	}
    }
    	function parseCSSRule(rule) {
    		var select = rule.selectorText, style = rule.style.cssText;
    		if(!select || !style || select.indexOf(':hover') < 0) return;
    		var newSelect = select.replace(/\:hover/g, '.onHover');
    		CSSBuffer.addRule(newSelect, style);
    		
    		var affected = select.replace(/\:hover.*$/g, '');
    		var elements = getElementsBySelect(affected);
    		for(var i=0; i<elements.length; i++) {
    			if(elements[i].nodeName == 'A') continue;
    			new HoverElement(elements[i]);
    		}
    	}
    
    /**
     *	HoverElement
     *	-------------------------
     *	applies the hover
     */
    
    function HoverElement(element) {
    	if(element.isHoverElement) return;
    	element.isHoverElement = true;
    	element.attachEvent('onmouseover', 
    		function() { element.className += ' onHover'; });
    
    	element.attachEvent('onmouseout', 
    		function() { element.className = element.className.replace(/onHover/g, ''); });
    }
    
    /**
     *	domFinder
     *	-----------------------------------
     *	returns list of elements based on css selector
     */
    
    function getElementsBySelect(rule) {
    	var nodeList = [doc], sets = rule.split(' ');
    	for(var i=0; i<sets.length; i++) {
    		nodeList = domFinder.filterNodes(sets[i], nodeList);
    	}	return nodeList;
    }
    
    var domFinder = {
    	findNodes:function(tag, docs) {
    		var res, nodes = [];
    		for(var i=0; i<docs.length; i++) {
    			res = docs[i].getElementsByTagName(tag);
    			for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
    		}	return nodes;
    	},
    
    	filterNodes:function(select, docs) {
    		var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
    		if(!s) return this.findNodes(select, docs);
    		nodes = this.findNodes((rule = select.split(s))[0], docs);
    		atr = (s == '#')? 'id':'className';
    		for(var i=0; i<nodes.length; i++) {
    			if(new RegExp('(^|\\s)' +  rule[1] + '(\\s|$)').exec(nodes[i][atr]))
    				filtered[filtered.length] = nodes[i];
    		}	return filtered;
    	}
    }
    </script>

  3. #3
    Join Date
    Oct 2008
    Posts
    9

    Thanks a lot!

    Thank you very much.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles