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 1 of 1
  1. #1
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts

    Flyout Menu Drop Down

    Hey guys,

    I'm learning about flyout tabs right now. As of now, I know how to make material come out with mouse hover through a code I got from online. I was fiddling around with it, and just have a few questions.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    	<head>
    	<title>Flyout Tab Test</title>
    	<link rel="stylesheet" type="text/css" href="style/flyout_test.css"/>
    	<!--[if IE]>
          <style type="text/css">
          
            body {behavior: url(csshover.htc);}
            
            ul a, ul, li {height: 1%;} /* Holly hack fix for IE bugs */
            		
            li {
            	margin-left: -16px;
            	mar\gin-left: 0;
            } /* special rules to correct older IE/win bullet zone problems */
          
          </style>
    
          <noscript>
            <style type="text/css">
          
    	 		ul ul {position: static;}
          
            </style>
          </noscript>
    	<![endif]-->
    	</head>
    	<body> 
    			<div>
    				<ul>
    					<li style="z-index: 10;"><a href="#">Home</a>
    					</li>
    					<li style="z-index: 9;"><a href="#">Games</a>
    						<ul>
    							<li><a href="#">Categories</a></li>
    							<li><a href="#">Search</a></li>
    						</ul>
    					</li>
    					<li style="z-index: 8;"><a href="#">Reviews</a>
    						<ul>
    							<li><a href="#">Blah</a></li>
    							<li><a href="#">Blah</a></li>
    						</ul>
    					</li>
    					<li style="z-index: 7;"><a href="#">Tools</a>
    						<ul>
    							<li><a href="#">Account Settings</a></li>
    							<li><a href="#">Extra</a></li>
    						</ul>
    					</li>
    				</ul>
    			</div> 
    	</body>
    </html>
    css

    Code:
    html, body, ul, li {margin: 0; padding: 0; border: 0;}
    
    body { behavior: url(csshover.htc);
    }
    tabs {
    	display: inline; /* doubled margin bug fix for IE/win */
    }
    
    /* vital */
    ul {
      	width: 8em;
    	border-top: 1px solid #000; /* Makes top border on flyouts */
    	background: #edc;
    }
    
    /* vital */
    li {
    	list-style: none; 
    	position: relative; /* vital */
    	border-left: 1px solid; 
    	border-right: 1px solid;
    	border-bottom: 1px solid;
    	vertical-align: bottom; /* IE */
    }
    
    ul a {
    	display: block;
    	padding: 5px 10px;
    	vertical-align: bottom; /* IE */
    }
    
    ul ul { 
    	position: absolute;  
    	left: -3000px;
    	background: #fed; 
    	}	/* need background - IE */
    		
    li:hover {background: #ddf;}
    	
    ul li:hover ul {
    	left: 7.9em;
    	top: -.2em;
    }	
    /* \*/ /*/ 
    ul li ul {position: static;}
    /* */
    </style>
    htc
    Code:
    <attach event="ondocumentready" handler="parseStylesheets" />
    <script language="JScript">
    
    var currentSheet, doc = window.document;
    var activators = {
    	onhover:{on:'onmouseover', off:'onmouseout'},
    	onactive:{on:'onmousedown', off:'onmouseup'}
    }
    
    function parseStylesheets() {
    	var sheets = doc.styleSheets, l = sheets.length;
    	for(var i=0; i<l; i++) 
    		parseStylesheet(sheets[i]);
    }
    	function parseStylesheet(sheet) {
    		var l, rules, imports;
    		if(sheet.imports) {
    			imports = sheet.imports, l = imports.length;
    			for(var i=0; i<l; i++) 
    				parseStylesheet(sheet.imports[i]);
    		}
    
    		rules = (currentSheet = sheet).rules, l = rules.length;
    		for(var j=0; j<l; j++) parseCSSRule(rules[j]);
    	}
    
    	function parseCSSRule(rule) {
    		var select = rule.selectorText, style = rule.style.cssText;
    		if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
    		
    		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
    		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
    		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
    		var affected = select.replace(/:hover.*$/, '');
    		var elements = getElementsBySelect(affected);
    
    		currentSheet.addRule(newSelect, style);
    		for(var i=0; i<elements.length; i++)
    			new HoverElement(elements[i], className, activators[pseudo]);
    	}
    
    function HoverElement(node, className, events) {
    	if(!node.hovers) node.hovers = {};
    	if(node.hovers[className]) return;
    	node.hovers[className] = true;
    	node.attachEvent(events.on,
    		function() { node.className += ' ' + className; });
    	node.attachEvent(events.off,
    		function() { node.className = 
    			node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
    }
    
    function getElementsBySelect(rule) {
    	var parts, nodes = [doc];
    	parts = rule.split(' ');
    	for(var i=0; i<parts.length; i++) {
    		nodes = getSelectedNodes(parts[i], nodes);
    	}	return nodes;
    }
    	function getSelectedNodes(select, elements) {
    		var result, node, nodes = [];
    		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
    		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
    		var tagName = (/^[a-z0-9]+/i).exec(select.toUpperCase()) || '*';
    		for(var i=0; i<elements.length; i++) {
    			result = elements[i].getElementsByTagName(tagName);
    			for(var j=0; j<result.length; j++) {
    				node = result[j];
    				if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
    					classname[1] + '\\b').exec(node.className)))) continue;
    				nodes[nodes.length] = node;
    			}
    		}	return nodes;
    	}
    </script>
    1. when html opened in ie, flyouts overlap
    2. how could i change the script so that the tabs are next to each other (flyout going downward)

    -Thanks
    Last edited by Aurora.Light; 04-03-2011 at 12:38 AM.


 

Posting Permissions

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