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:1px solid #009966;
}
#nav{
position:relative;
height:30px;
background-color:#33CCCC;
}
#subnav{
position:relative;
height:70px;
background-color: #00CC66;
}
#mainnav,#subnav,#left-arrow,#right-arrow,#extranav{
list-style-type:none;
}
#mainnav{
margin:0px 30px;
}
#extranav{
margin:0px 30px;
}
#mainnav li,#subnav li {
float:left;
text-align:center;
}
#mainnav li a,#mainnav li a:hover{
display:block;
width:160px;
line-height:30px;
text-decoration: none;
background-color:#000099;
color:#EEEEEE;
}
#extranav li a,#extranav li a:hover{
display:block;
text-decoration: none;
width:160px;
line-height:70px;
text-align:center;
background-color: #BBBBBB;
text-transform:uppercase;
color: #FFFF99;
}
#left-arrow {
position:absolute;
top:0px;
left:0px;
}
#left-arrow li a,#left-arrow li a:hover{
display:block;
width:30px;
text-align:center;
line-height:30px;
text-decoration: none;
background-color: #00CC66;
color:#555555;
}
#right-arrow {
position:absolute;
top:0px;
right:0px;
}
#right-arrow li a,#right-arrow li a:hover{
display:block;
width:30px;
text-align:center;
line-height:30px;
text-decoration: none;
background-color:#00CC66;
color:#555555;
}
</style>
<script type="text/JavaScript">
//utilità
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);
}
function setOpacity(el,value) {
var v= +value;
el.style.opacity = v/10;
el.style.filter = 'alpha(opacity=' + v*10 + ')';
}
//Definisco il menu
/*var menu=[
['apple1','apple2','apple3','apple4'],
['store1','store2','store3','store4'],
['mac1','mac2','mac3','mac4'],
['downloads1','downloads2','downloads3','downloads4']
]*/
var menu=[
['apple1|apple1.htm','apple2|apple2.htm','apple3|apple3.htm','apple4|apple4.htm'],
['store1|store1.htm','store2|store1.htm','store3|store1.htm','store4|store1.htm'],
['mac1|mac1.htm','mac2|mac1.htm','mac3|mac1.htm','mac4|mac1.htm'],
['downloads1|downloads1.htm','downloads2|downloads1.htm','downloads3|downloads1.htm','downloads4|downloads1.htm']
]
//variabili globali
var startPoint= 30;//estremo sinistro
var endPoint= 510;//estremo destro
var tabWidth= 160;
var menuIndex= 0;
// Comincia lo script i nomi sono auto esplicativi almeno penso ;)
//riceve in input menu[index]
function buildSubNav(aSubNav){
var extranav= _createElement('ul',{id:'extranav'});
for (var i = 0, len = aSubNav.length; i < len; i++){
var tmp = aSubNav[i].split('|');
var li= _createElement('li',{});
var a= _createElement('a',{'href':tmp[1]});
a.appendChild(_createTextNode(tmp[0]));
li.appendChild(a);
extranav.appendChild(li);
}
var subnav= $('subnav');
var subFirstChild= subnav.firstChild;
if(subFirstChild != null){
_removeChild(subnav,subFirstChild);
}
subnav.appendChild(extranav);
}
/*
Ho usato un div la prima cosa che mi è venuta in mente
per evidenziare il mainmenu brutto effetto su onclick :(
*/
function buildTab(target){
var tabMenu= _createElement('div',{id:'tab-menu'});
tabMenu.style.position='absolute';
tabMenu.style.left=startPoint+'px';
tabMenu.style.top='0px';
tabMenu.style.width='160px';
tabMenu.style.height='30px';
tabMenu.style.backgroundColor='#0099FF';
setOpacity(tabMenu,5);
tabMenu.appendChild(_createTextNode(' '));
target.appendChild(tabMenu);
}
//prende in input '100px' 'px' return 100
function getIntFromS(search,index){
return search.substring(0,search.indexOf(index));
}
//onclick freccia sinistra
function moveLeft(e){
cancelClick(e);
var tabMenu= $('tab-menu');
var point= +getIntFromS(tabMenu.style.left,'px');
if(point!=startPoint){
menuIndex= menuIndex - 1;
point= point - tabWidth;
}
tabMenu.style.left=point+'px';
buildSubNav(menu[menuIndex]);
}
//onclick freccia destra
function moveRight(e){
cancelClick(e);
var tabMenu= $('tab-menu');
var point= +getIntFromS(tabMenu.style.left,'px');
if(point!=endPoint){
menuIndex= menuIndex + 1;
point= point + tabWidth;
}
tabMenu.style.left=point+'px';
buildSubNav(menu[menuIndex]);
}
//onclick menu
function moveMenu(e){
cancelClick(e);
var target= getTarget(e);
var point= startPoint;
var mainnav= $('mainnav');
var aNav= mainnav.getElementsByTagName('a');
for (var i = 0, len = aNav.length; i < len; i++){
if(aNav.item(i)==target){
menuIndex= i;
point = point + (tabWidth * i);
}
}
var tabMenu= $('tab-menu');
tabMenu.style.left=point+'px';
buildSubNav(menu[menuIndex]);
}
function init(){
var target= $('nav');
buildTab(target);
var leftAnchor= $('left-anchor');
var rightAnchor= $('right-arrow');
addEvent(leftAnchor,'click',moveLeft,false);
addEvent(rightAnchor,'click',moveRight,false);
var mainnav= $('mainnav');
var aNav= mainnav.getElementsByTagName('a');
for (var i = 0, len = aNav.length; i < len; i++){
addEvent(aNav.item(i),'click',moveMenu,false);
}
buildSubNav(menu[menuIndex]);
}
addEvent(window,'load',init,false);
</script>
</head>
<body>
<div id="container">
<div id="subnav"></div>
<div id="nav">
<ul id="left-arrow" ><li class="arrow">[url="/"]«[/url][/list]
<ul id="mainnav">
<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]
<ul id="right-arrow"><li class="arrow">[url="/"]»[/url][/list]
</div>
</div>
</body>
</html>
Rispondi quotando
ad occhio e croce non deve
