...

View Full Version : Flyout Menu Drop Down



Aurora.Light
04-03-2011, 01:22 AM
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.



<!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



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


<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum