Zrobiłem menu rozwijane:
Plik css
Kod
body {
font-family: Verdana;
behavior: url(csshover.htc);
}
div#nav {
position: absolute;
top: 182px;
left: 0px;
height: 20px;
width: 998px;
margin-left: auto;
margin-right: auto;
background-color: #B51032;
border: 2px solid #34537D;
padding: 0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
div#nav ul {margin: 0;
padding: 0;
background: #B51032;
border: 1px solid #CCC;
border-width: 0 1px;
}
div#nav li {position: relative;
list-style: none;
margin: 0;
float: left;
width: 7em;
line-height: 1em;
}
div#nav li:hover {background: #EBB;
}
div#nav li.submenu:hover {background-color: #711515;
}
div#nav li a{
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 6.5em;;
color: #FFFFFF;
border: 0px solid #34537D;
}
div#nav>ul a {width: auto;
}
div#nav ul ul {position: absolute;
width: 7em;
display: none;
}
div#nav ul ul li {border-bottom: 1px solid #34537D;
}
div#nav li.submenu li.submenu {background: url(submenu.gif) 95% 50% no-repeat;
}
div#nav li.submenu li.submenu:hover {background-color: #711515;
}
div#nav li.submenu li.submenu:hover {background-color: #711515;
}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;
}
div#nav ul.level2 {top: 1.5em;
left: -1px;
}
div#nav ul.level3 {top: -1px;
left: 7em;
border-top: 1px solid #34537D;
}
Plik csshover.htc
Kod
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
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>
Menu:
Kod
<div id='nav'>
<ul class='level1'>
<li><a href='/'>Home</a></li>
<li class='submenu'><a href='/services/'>Services</a>
<ul class='level2'>
<li><a href='/services/strategy/'>Strategy</a></li>
<li><a href='/services/optimize/'>Optimization</a></li>
<li><a href='/services/guidance/'>Guidance</a></li>
<li><a href='/services/training/'>Training</a></li>
</ul>
</li>
<li><a href='/events/'>Events</a></li>
<li class='submenu'><a href='/pubs/'>Publications</a>
<ul class='level2'>
<li><a href='/pubs/articles/'>Articles</a></li>
<li class='submenu'><a href='/pubs/tuts/'>Tutorials</a>
<ul class='level3'>
<li><a href='/pubs/tuts/html/'>HTML</a></li>
<li><a href='/pubs/tuts/css/'>CSS</a></li>
<li><a href='/pubs/tuts/svg/'>SVG</a></li>
<li><a href='/pubs/tuts/xml/'>XML</a></li>
</ul>
</li>
<li><a href='/pubs/wpapers/'>White Papers</a></li>
<li><a href='/pubs/comment/'>Commentary</a></li>
</ul>
</li>
<li><a href='contact'>Contact</a></li>
</ul>
</div>
W pliku z rozszerzeniem .html działa bez zarzutu, natomiast w pliku .php juz nie. Proszę o pomoc
Czy ktoś wie dlaczego mi to nie działa?
Piszę tylko do siebie?! ?!
Chyba na to wychodzi! Czy ktoś wie w ogóle dlaczego to nie działa jak powinno