Originariamente inviato da gabip87
salve

devo fare un menù come quello della apple in questa pagina: http://www.apple.com/mac/

più dettagli qui: http://www.filelime.com/upload/files/appleStyleMenu.jpg

del menù della apple m'interessa soltanto il "funzionamento delle frecce" e non della barra.
in poche parole voglio nascondere gli item (di troppo) del menù.

ps: non so quasi niente di JS, uso solo script come lightbox o rounded corners. quindi più chiare sono le spiegazioni, meglio è
non chiedo il lavoro già pronto, ma qualche indicazione su come devo muovermi.

grasssie

Bè dietro il funzionamento delle frecce
potrebbe esserci qc del genere
(il primo metodo che mi è venuto in mente)
(menu della apple a parte)
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="/"]&laquo;[/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="/"]&raquo;[/url][/list]
    </div>
</div>
</body>
</html> 

ps: non so quasi niente di JS, uso solo script come lightbox o rounded corners. quindi più chiare sono le spiegazioni, meglio è
non chiedo il lavoro già pronto, ma qualche indicazione su come devo muovermi.

Per la spiegazione di questo codice
che è un semplice esempio (un esercizio) servirebbe
un intero corso di js quindi al limite
chiedi che cosa non ti è chiaro.
Il forum è pieno di threads sui vari
argomenti.





PS.

Grazie per la segnalazione del menu della Apple
me lo ero pescato è proprio caruccio se è fatto tutto
in js