网站导航---可展开的导航---这里是通过单击图片进行切换
html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example: Dynamic Linked Anchors (Panel Style)</title>
<style type="text/css">
@import 'style/sitenav.css';
</style>
<script language="javascript" type="text/javascript" src="js/DOMhelp.js"></script>
<script language="javascript" type="text/javascript" src="js/sitenav.js"></script>
</head>
<body>
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li>
<a href="products.php">Products</a>
<ul>
<li>
<a href="cms.php">CMS solution</a>
<ul>
<li><strong>Mini CMS</strong></li>
<li><a href="ncc1701d.php">Enterprise CMS</a></li>
</ul>
</li>
<li><a href="portal.php">Company Protal</a></li>
<li>
<a href="mailserver.php">eMail Solution</a>
<ul>
<li><a href="privatemail.php">Private POP3/SMTP</a></li>
<li><a href="lists.php">Listservers</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="services.php">Services</a>
<ul>
<li><a href="training.php">Employee Training</a></li>
<li><a href="audits.php">Auditing</a></li>
<li><a href="bulkmail.php">Bulk sending/email campaigns</a></li>
</ul>
</li>
<li><a href="pricing.php">Pricing</a></li>
<li>
<a href="about_ud.php">About Us</a>
<ul>
<li><a href="our_offices.php">Our offices</a></li>
<li><a href="our_people.php">Our people</a></li>
<li><a href="vacancid.php">Jobs</a></li>
<li><a href="partners.php">Industry Partners</a></li>
</ul>
</li>
<li>
<a href="contact.php">Contact Us</a>
<ul>
<li><a href="snail.php">Postal Addresses</a></li>
<li><a href="callback.php">Arrange Callback</a></li>
</ul>
</li>
</ul>
</body>
</html>
css代码
*{
margin:0;
padding:0;
list-style:none;
}
body{
font-family:arial,sans-serif;
background:#fff;
color:#333;
font-size:100.01%;
}
#nav{
font-size:.8em;
float:left;
width:14em;
padding:.5em;
background:#ddd;
}
#nav a{
text-decoration:none;
color:#000;
}
#nav ul{
margin-left:.5em;
}
#nav li{
padding:.2em 0;
}
#nav strong{
color:#696;
}
#nav.dyn li ul{
display:none;
}
#nav.dyn li ul.show{
display:block;
}
#nav.dyn li{
padding-left:15px;
}
#nav.dyn li.parent{
background:url(../Chapter7/plus.gif) 0 5px no-repeat #fff;
}
#nav.dyn li.open{
background:url(../Chapter7/minus.gif) 0 5px no-repeat #fff;
}
js代码
DOMhelp={
//动态添加和移除一个元素的类
cssjs:function(a,o,c1,c2){
switch(a){
case 'swap':
if(!DOMhelp.cssjs('check',o,c1)){
o.className = o.className.replace(c2,c1);
}else{
o.className = o.className.replace(c1,c2);
}
break;
case 'add':
if(!DOMhelp.cssjs('check',o,c1)){
o.className += o.className ? ' '+c1 : c1;
}
break;
case 'remove':
var rep = o.className.match(' '+c1) ? ' '+c1 : c1;
o.className = o.className.replace(rep,'');
break;
case 'check':
var found = false;
var temparray = o.className.split(' ');
for(var i=0;i<temparray.length;i++){
if(temparray[i]==c1){
found = true;
}
}
return found;
break;
}
},
safariClickFix:function(){
return false;
},
//Find the last sibling of the current node
lastSibling:function(node){
var tempObj = node.parentNode.lastChild;
while(tempObj.nodeType != 1 && tempObj.previousSibling != null){
tempObj = tempObj.previousSibling;
}
return (tempObj.nodeType==1) ? tempObj : false;
},
//Find the first sibling of the current node
firstSibling:function(node){
var tempObj = node.parentNode.firstChild;
while(tempObj.nodeType != 1 && tempObj.nextSibling != null){
tempObj = tempObj.nextSibling;
}
return (tempObj.nodeType==1) ? tempObj : false;
},
//Retrieve the content fo the first text node sibling of the current node
getText:function(node){
if(!node.hasChildNodes()){
return false;
}
var reg=/^\s+$/;
var tempObj = node.firstChild;
while(tempObj.nodeType != 3 && tempObj.nextSibling != null || reg.test(tempObj.nodeValue)){
tempObj = tempObj.nextSibling;
}
return (tempObj.nodeType == 3) ? tempObj.nodeValue:false;
},
//Set the content of the first text node sibling the current node
setText:function(node,txt){
if(!node.hasChildNodes()){
return false;
}
var reg = /^s+$/;
var tempObj = node.firstChild;
while(tempObj.nodeType != 3 && tempObj.nextSibling != null || reg.test(tempObj.nodeValue)){
tempObj = tempObj.nextSibling;
}
if(tempObj.nodeType == 3){
tempObj.nodeValue = txt;
}else{
return false;
}
},
//Find the text pr previous sibling that is an element
//and not a text node or line break
//
//1表示下一个兄弟节点，-1表示上一个兄弟节点
closestSibling:function(node,direction){
var tempObj;
if(direction == -1 && node.previousSibling != null){
tempObj = node.previousSibling;
while(tempObj.nodeType != 1 && tempObj.previousSibling != null){
tempObj = tempObj.previousSibling;
}
}else if(direction==1 && node.nextSibling != null){
tempObj=tempObj.nextSibling;
while(tempObj.nodeType != 1 && tempObj.textSibling != null){
tempObj = tempObj.nextSibling;
}
}
return tempObj.nodeType==1 ? tempObj : false;
},
//Create a new link containing the given text
createLink:function(to,txt){
var tempObj = document.createElement('a');
tempObj.appendChild(document.createTextNode(txt));
tempObj.setAttribute('href',to);
return tempObj;
},
//Create a new element containing the given text
createTextElem:function(elm,txt){
var tempObj = document.createElement(elm);
tempObj.appendChild(document.createTextNode(txt));
return tempObj;
},
//Simulate a debugging console to avoid the nees for alerts
initDebug:function(){
if(DOMhelp.debug){
DOMhelp.stopDebug();
}
DOMhelp.debug = document.createElement('div');
DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);
document.body.insertBefore(DOMhelp.debug,document.body.firstChild);
},
setDebug:function(bug){
if(!DOMhelp.debug){
DOMhelp.initDebug();
}
DOMhelp.debug.innerHTML += bug+'\n';
},
stopDebug:function(){
if(DOMhelp.debug){
DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);
DOMhelp.debug = null;
}
},
//Cross-browser event handing for IE5+ ,NS6+ and Mozilla/Gecko
//By Scott Andrew
addEvent:function(elm,evType,fn,useCapture){
if(elm.addEventListener){
elm.addEventListener(evType,fn,useCapture);
return true;
}else if(elm.attachEvent){
var r = elm.attatchEvent('on' + evType,fn);
return r;
}else{
elm['on' + evType] = fn;
}
},
//为了适应在ie下target被srcElement取代
//button返回值的不同
getTarget:function(e){
var target;
if(window.event){
target = window.event.srcElement;
}else if(e){
target = e.target;
}else{
target = null;
}
if(target.nodeName.toLowerCase() != 'a'){
target = target.parentNode;
}
return target;
},
//由于Safari支持stopPropagation方法，但是使用它就什么也做不了，不会阻止事件继续冒泡
stopDefault:function(e){
if(window.event && window.event.returnValue){
window.event.cancelBubble = true;
}
if(e && e.preventDefault){
e.preventDefault();
}
},
//一般情况下都需要阻止stopPropagation()和preventDefault()
cancelClick:function(e){
if(window.event && window.event.cancelBubble && window.event.returnValue){
window.event.cancelBubble = true;
window.event.returnValue = false;
return ;
}
if(e && e.stopPropagation && e.preventDefault){
e.stopPropagation();
e.preventDefault();
}
}
}
sn = {
dynamicClass:'dyn',
showClass:'show',
parentClass:'parent',
openClass:'open',
navID:'nav',
parentIndicator:'<img src="../Chapter7/plus.gif" alt="open section" title="open section">',
openIndicator:'<img src="../Chapter7/minus.gif" alt="close section" title="close section">',
init:function(){
var parentLI,triggerLink;
if(!document.getElementById || !document.createTextNode){
return;
}
var nav = document.getElementById(sn.navID);
if(!nav){
return;
}
DOMhelp.cssjs('add',nav,sn.dynamicClass);
var nested = nav.getElementsByTagName('ul');
for (var i=0; i < nested.length; i++) {
parentLI = nested[i].parentNode;
triggerLink = document.createElement('a');
triggerLink.setAttribute('href','#');
triggerLink.innerHTML = sn.parentIndicator;
parentLI.insertBefore(triggerLink, parentLI.firstChild);
// triggerLink = nested[i].parentNode.getElementsByTagName('a')[0];
// DOMhelp.cssjs('add',triggerLink.parentNode,sn.parentClass);
DOMhelp.addEvent(triggerLink,'click',sn.changeSection,false);
triggerLink.onclick = DOMhelp.safariClickFix;
DOMhelp.cssjs('add',parentLI,sn.parentClass);
if(parentLI.getElementsByTagName('strong').length > 0){
DOMhelp.cssjs('add',parentLI,sn.openClass);
DOMhelp.cssjs('add',nested[i],sn.showClass);
parentLI.getElementsByTagName('a')[0].innerHTML = sn.openIndicator;
}
}
},
changeSection:function(e){
var t = DOMhelp.getTarget(e);
while(t.nodeName.toLowerCase() != 'a'){
t = t.parentNode;
}
var firstList = t.parentNode.getElementsByTagName('ul')[0];
if(DOMhelp.cssjs('check',firstList,sn.showClass)){
DOMhelp.cssjs('remove',firstList,sn.showClass);
DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass);
t.innerHTML = sn.parentIndicator;
}else{
DOMhelp.cssjs('add',firstList,sn.showClass);
DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass);
t.innerHTML = sn.openIndicator;
}
DOMhelp.cancelClick(e);
}
}
DOMhelp.addEvent(window,'load',sn.init,false);
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
