Ciao a tutti spero di non aver sbagliato sezione.
Qualcuno può indicare una guida con eventuali esempi per ottenere un menù come quello creato nel sito http://www.desero.net ?
Ciao a tutti spero di non aver sbagliato sezione.
Qualcuno può indicare una guida con eventuali esempi per ottenere un menù come quello creato nel sito http://www.desero.net ?
up
A parte che uppare una discussione ancora nella pagina principale non è molto giusto, non credo proprio che esista una Guida per fare una roba del genere.
Devi vedere quello che ti serve e partire da quello. Io posso darti qualche hint e qualche link, ma per il resto deve vedere un po' tu.
Io suddividerei il lavoro in 2 parti:
1- Effetti
2- Funzionalità
parte 1:
Gli effetti che vedi lì sono Fx.Morph, Fx.Scroll ed Fx.Slide (trovi tutto sulla documentazione di mootools http://mootools.net/docs ).
parte 2:
Le funzionalità implementate fanno uso di... o meglio, se lo facessi io, farei uso di: Request.JSON, Element ed, ovviamente, degli Events.
Cosa fa?
All'apertura, mostra il quadrato con un link che, una volta cliccato, esegue la Fx.Morph, alterando la class associata all'elemento, che da centrale alla pagina, lo sposta a sx e lo allarga, poi attiva Fx.Slide che "apre" il pannello dei link. Ogni link ha poi delle sottovoci che vengono mostrate se si clicca sulla voce parent corrispondente. Infine, ogni pannello delle sottovoci ha associato Fx.Scroll che fa scrollare il pannello con i due div, uno sopra ed uno sotto, con l'azione scroll associata all'evento onMouseEnter.
Infine, se i link devono aprire una pagina, hanno l'href impostato in modo corretto e non #
Questo, grossomodo, è tutto quello che fa, ovviamente, tra lo spiegare le funzionalità ed attivarlo c'è parecchio lavoro.
Ti consiglio di iniziare dall'HTML, crea la struttura con il quadrato che non cambia, il menù e tutte le sue sottovoci, delle quali vengono visulizzate solo quelle con una determinata classe. Una volta fatto questo è abbastanza semplice, implementare le restanti cose.
I DON'T Double Click!
Ciao artorius, grazie per il consiglio sul fatto che ho uppato dalla prima pagina. Le funzionalità implementate sono proprio quelle hai citato.
Più che agli effetti sono interessato a capire come funziona il meccanismo di costruzione degli url (penso che sia molto utile lato SEO per pagine di buon impatto visivo che non contengono molto testo)
Ho dato un occhiata su come vengono caricati i contenuti in funzione dei click sulle voci del menù:
In pratica non vengono richiamate pagine html o php ma ci sono solo 2 pagine (in questo caso una per ciascuna lingua disponibile). Ciascuna pagina dovrebbe avere all' interno del tag body un altro div che funziona da contentiore di classi corrispondenti ai contenuti puntati dalle diverse voci del menù organizzate con una serie di if ed else. Quando la pagina viene caricata ciascuna di queste porzioni dovrebbe essere impostata su hidden e poi dopo il click su visible.
Penso comunque che siano state utilizzate 2 pagine php (ho provato a fare una ricerca sulla funzione xmlhttprequest che è quella utilizzata e i risultati sono sempre guide con l' implementazione di questa funzione su pagine php)
Per quanto riguarda xmlhttprequest, ho trovato esempi in cui questa funzione richiama i contenuti delle pagine da file esterni mentre in questo caso non ci sono. Quanto mi è parso di capire è che l' url venga costruito così:
-Viene dichiarata la root del sito
-Al percorso della root viene aggiunto il resto corrispondente al contenuto richiamato e dichiarato per ciascuna classe di contenuti
Penso il codice sia questo:
//* var modifiedLocation = "/" + newLocation;
dove "/" è la root dichiarata in uno dei file js e newLocation; è generato da una funzione tipo questa:
//* function handleHistoryChange(newLocation) {
//* if (newLocation == "") newLocation = "/home";
//* newLocation = newLocation.replace(/\//, "");
//* displayLocation(newLocation);
//* if(newLocation=='home') {
//* h1.style.top = wrapper_height/2 -h1_width/2 + 'px';
//* h1.style.left = wrapper_width/2 -h1_width/2 + 'px';
//* $('main_menu_wrapper').style.width = 0;
//* $('lang').style.width = 0;
//* $('content').innerHTML = '';
//* status = 'inceput';
//* mouse_movement = true;
//* desero_drag.attach();
//* var visibles = $$('.visible');
//* for(i=0; i<visibles.length; i++) {
//* visibles[i].removeClass('visible');
//* }
//* var openeds = $$('.opened');
//* for(i=0; i<openeds.length; i++) {
//* openeds[i].removeClass('opened');
//* }
//* }
//* }
Sarà questo il meccanismo di funzionamento?
I DON'T Double Click!
Grazie della delucidazione artorius
Ho ricontrollato se per caso fosse stato utilizzato il metodo GET, ma niente
Ho trovato che è stata utilizzata questa funzione:
//* onRequest: function () {$('content').innerHTML = ''},
//* req.request();
//* var news_request = new Ajax('', {
//* onRequest: function () {$('content').innerHTML = ''},
//* news_request.url = URL + 'xmlhttp/' + language + '/news' +'?clearcache=' + clearcache;
//* news_request.request();
Penso che $('content').load('page_1.html'); sia sostituito da onRequest: function () {$('content').innerHTML = ''},
Ho trovato questo sullo stesso forum javascript di html.it http://forum.html.it/forum/showthrea...readid=1262616
guarda, ho visto anch'io che utilizza post, ma, sinceramente, non ha importanza il method, perché quello lo gestisci lato server, l'importante è che gli passi il path delle pagine da visualizzare.
I DON'T Double Click!
Ciao artorius ho controllato dove potevano essere richiamate le funzionalità JSON e sono proprio all' apertura del tag body:
<body class=""><form id="historyStorageForm" method="get" style="position: absolute; top: -1000px; left: -1000px;"><textarea id="historyStorageField" style="position: absolute; top: -1000px; left: -1000px;" left:="" -1000px;="" name="historyStorageField"></textarea></form>
L' id del form è in un file js nominato dhtmlhistory che contiene tra le tante anche questa funzione:
// change the hidden iframe's location if on IE
//* if (self.isInternetExplorer())
//* self.iframe.src = "blank.html?" + newLocation;
A questo punto penso che la path vada costruita tramite newLocation;
Sarà così?
mmm non so cosa faccia quello, ma non credo che serva...
Ecco cosa mi sembra faccia:
Un utente clicca su di un link, il link è composto così:
agri concept europe
Allora, io credo, che prenda l'id e lo sostituisca alla parte dopo il # nell'url (cosa che non fa niente alla pagina)
Poi, chiama una funzione, che viene eseguita anche all'apertura della pagina, dove estrae dal
window.location.href
quello che sta dopo il # e lo compone con la lingua in un url così formato:
"/xmlhttp/"+lingua+quello che sta dopo il #+"?clearcache="+ numero random che sinceramente non so che fà
il server estrae la pagina da servire al browser da quest'indirizzo, e la ritorna via AJAX JS che non fa altro che sostituire il contenuto del div centrale con questa.
I DON'T Double Click!
Permessi di invio
Rispondi quotando