на одном форуме нашел статью про такое меню... привожу код:
файл menu.htm
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
@import "style3.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">ПУНКТ 1</a></li>
<li><a href="#">ПУНКТ 2</a>
<ul>
<li><a href="#">ПУНКТ 2.1</a></li>
<li><a href="#">ПУНКТ 2.2</a></li>
<li><a href="#">ПУНКТ 2.3</a></li>
</ul>
</li>
<li><a href="#">ПУНКТ 3</a>
<ul>
<li><a href="#">ПУНКТ 3.1</a></li>
<li><a href="#">ПУНКТ 3.2</a></li>
<li><a href="#">ПУНКТ 3.3</a>
<ul>
<li><a href="#">ПУНКТ 3.3.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
</code>
далее файл style3.css
<code>
body{font: normal 11px verdana; behavior:url("csshover.htc");}
ul{margin:0;padding:0;list-style:none;width: 150px;border-bottom: 1px solid #ccc;}
ul li{position: relative;}
li ul {position: absolute;left: 149px;top: 0;display: none;}
ul li a {display: block;text-decoration: none;color: #777;background: #fff;padding: 5px;border: 1px solid #ccc;border-bottom: 0;}
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; }
li:hover ul ul, li.over ul ul {display: none;}
ul ul li:hover ul, ul ul li.over ul {display: block;}
</code>
и наконец третий файл csshover.htc
<code>
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* HOVER - V1.11.040203 - whatever:hover in IE
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* © 2004 - Peter Nederlof
*
* Credits - Arnoud Berendsen
* for finding some really -sick- bugs
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/
var currentSheet, doc = window.document;
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/i).test(select)) return;
var newSelect = select.replace(/(\.([a-z0-9_-]+):hover)|(:hover)/g, '.$2onHover');
var hasClass = (/(\.([a-z0-9_-]+):hover)/g).exec(select);
var className = (hasClass? hasClass[2]:'') + 'onHover';
var affected = select.replace(/:hover.*$/g, '');
var elements = getElementsBySelect(affected);
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className);
}
function HoverElement(node, className) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
node.attachEvent('onmouseover',
function() { node.className += ' ' + className; });
node.attachEvent('onmouseout',
function() { node.className =
node.className.replace((new RegExp('\\s+'+className)),''); });
}
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>
</code>
Вопрос такой... Как это меню сделать в asp? СПАСИБО!!!
Добавлено @ 12:03
<code> и </code> в этих файлах не нужны!!! |
