Codice PHP:
<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Common */
*{
margin:0px;
padding:0px;
}
body{
text-align:center;
}
a:link,a:visited,a:hover,a:active{
text-decoration: none;
color:#555555
}
#container{
margin:0px auto;
text-align: left;
width:700px;
border:5px solid #009966;
}
#nav{
margin:0px 0px;
height:70px;
background-color:#33CCCC;
}
#globalnav,#subnav{
list-style-type:none;
margin:0px 50px;
}
#globalnav li,#subnav li {
float:left;
}
#globalnav li a,#globalnav li a:hover,#subnav li a,#subnav li a:hover{
display:block;
width:150px;
text-align:center;
line-height:70px;
text-decoration: none;
background-color:#EE0000;
color:#555555;
}
#subnav li a,#subnav li a:hover{
display:block;
width:250px;
text-align:center;
line-height:50px;
text-decoration: none;
background-color: #00CCCC;
color:#AA0000;
}
#sub{
height:50px;
background-color:#33CCFF;
}
</style>
<script type="text/JavaScript">
function _createElement(el,obj){
var _el= document.createElement(el);
for(var prop in obj){
_el.setAttribute(prop,obj[prop]);
}
return _el;
};
function _createTextNode(text){
return document.createTextNode(text);
};
function _removeChild(parent,child){
if(child != null){
parent.removeChild(child);
}
};
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
};
function getTarget( evt ){
evt = evt || window.event || null;
return evt?(evt.target||evt.srcElement||null):null;
};
function cancelClick(e){
if (window.event){
window.event.cancelBubble = true;
window.event.returnValue = false;
return;
}
if (e){
e.stopPropagation();
e.preventDefault();
}
};
function $(s){
return document.getElementById(s);
};
var menu={
apple:['apple1','apple2','apple3','apple4'],
store:['store1','store2','store3','store4'],
mac:['mac1','mac2','mac3','mac4'],
downloads:['downloads1','downloads2','downloads3','downloads4'],
}
function fillup(e){
cancelClick(e);
var target= getTarget(e);
var section= target.parentNode.id;
var aSubNav= menu[section];
var subnav= _createElement('ul',{id:'subnav'});
for (var i = 0, len = aSubNav.length; i < len; i++){
var li= _createElement('li',{});
var a= _createElement('a',{'href':'#'});
a.appendChild(_createTextNode(aSubNav[i]));
li.appendChild(a);
subnav.appendChild(a);
}
var sub= $('sub');
var subFirstChild= sub.firstChild;
if(subFirstChild != null){
_removeChild(sub,subFirstChild);
}
sub.appendChild(subnav);
}
function init(){
var nav = $('globalnav');
var aNav= nav.getElementsByTagName('a');
for (var i = 0, len = aNav.length; i < len; i++){
addEvent(aNav.item(i),'click',fillup,false);
}
}
addEvent(window,'load',init,false);
</script>
</head>
<body>
<div id="container">
<div id="sub"></div>
<div id="nav">
<ul id="globalnav">
<li id="apple">[url="/"]Apple[/url]
<li id="store">[url="http://store.apple.com"]Store[/url]
<li id="mac">[url="/mac/"]Mac[/url]
<li id="downloads">[url="/downloads/"]Downloads[/url][/list]
</div>
</div>
</body>
</html>
ad occhio e croce non deve
Rispondi quotando