- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Menù Concertina
-
Menù Concertina
Salve a tutti!
Ho realizzato per il mio sito un menù a concertina. Tuttavia vorrei che ogni singola voce avesse un colore di sfondo diverso.
Chiedo autorizzazione ai moderatori a postare il link altrimenti non so come spiegarmi...
Grazie 1000
-
Ciao d-force
Puoi anche postare un'immagine, uppandola magari su imageshack o qualunque altro servizio di hosting immagini
-
Perfetto!
Questa è l'immagine del mio menu concertina:
http://img152.imageshack.us/img152/4796/immaginejd7.jpgIN pratica vorrei assegnare ad ogni voce di menù: "divertirsi", "vivere", "scoprire", "assaggiare" e "rilassarsi" un colore diverso.
E' possibile?
-
Certo che è possibile... se posti un può di codice del menu, vediamo di aiutarti...
-
@Andriy said:
Certo che è possibile... se posti un può di codice del menu, vediamo di aiutarti...
Ciao Andriy, grazie 1000 per la tua offerta di aiuto.
Questo è il codice html del menu:
<dl id="concertina1"> <dt>Divertirsi</dt> <dd>Qualunque siano le vostre esigenze o il vostro stile di vacanza, a Montaione troverete sicuramente l'occasione per divertirvi.</dd> <dt>Vivere</dt> <dd>Vivere Montaione significa stare a contatto con le persone locali, conoscerne le usanze ed imparare la loro storia e tradizioni.</dd> <dt>Scoprire</dt> <dd>Venite a scoprire un territorio le cui origini si perdono nella notte dei tempi.</dd> <dt>Assaggiare</dt> <dd>Un territorio da vivere, da scoprire, ma soprattutto da assaggiare. A Montaione troverete infatti una vasta scelta di prodotti tipici da degustare in occasione dei mercatini che si svolgono nel centro storico o approfittando dei tanti ristoranti del territorio. A Montaione, la vacanza è servita!</dd> <dt>Rilassarsi</dt> <dd>Vacanza, significa anche riposo lontani dal lavoro e dallo stress quotidiano. A Montaione, potrete infatti rilassarvi a bordo della piscina ascoltando la musica della natura, come il cinguettio degli uccelli o delle cicale, magari sorseggiando un bicchiere di vino. Questo è il vero relax!</dd> </dl>
Questa è una parte di javascript che risiede nella stessa pagina del menù in Html
<script type="text/javascript"> var domInit = function () { var con1 = new Concertina('concertina1', // The root element ID or object true, // Create Nested Concertinas? 130, // Set a Uniform Height? true, // Use Animation? true // Use Simple Animation Easing? ); };Event.observe(document, 'dom:loaded', domInit); </script>
Questo è il file concertina.js che gestisce il menù:
var Concertina = Class.create(); Concertina.prototype = { ffSmooth : true, overflowQ : null, root : null, hite : null, anim : null, ease : null, trig : null, targ : null, tick : null, targHite : null, allTrigs : [], allTargs : [], targsToHide : [], targsToShow : [], i : 0, loopLimit : 50, clicked : 0, declick : null, initialize : function (root,nest,hite,anim,ease) { this.root = $(root); this.hite = hite; this.anim = anim; this.ease = ease; if (!this.root) return; if (nest && this.root.childElements()[1].nodeName !== this.root.nodeName) { $(root).select($(root).nodeName).each(function(kids){ new Concertina(kids,nest,true,anim,ease); }); } this.allTrigs = this.root.childElements().findAll(function(trig){ return trig.nodeName === this.root.firstDescendant().nodeName; }.bind(this)).invoke('addClassName','trig'); this.allTargs = this.root.childElements().findAll(function(targ){ return targ.nodeName === this.root.firstDescendant().next().nodeName; }.bind(this)).invoke('addClassName','targ'); if (hite && hite === true) { this.allTargs.each(function(targ){ this.hite = (targ.getHeight()+10 > this.hite) ? targ.getHeight()+10 : this.hite; }.bind(this)).invoke('setStyle',{height:this.hite+'px'}); } else if (hite && hite > 1) { this.hite = hite; this.allTargs.invoke('setStyle',{height:this.hite+'px'}); } if (!this.anim) { this.allTargs.invoke('hide').first().show(); } else { this.allTargs.invoke('setStyle',{height:0,overflow:'hidden'}); if (!this.hite) { this.allTargs.first().setStyle({height:'',overflow:'auto'}); } else { this.allTargs.first().setStyle({height:this.hite+'px',overflow:'auto'}); } } this.root.addClassName('concertina').setStyle({position:'relative',zoom:1}) .observe('click',this.wait.bindAsEventListener(this)); this.allTrigs.first().addClassName('open'); }, unclick : function () { this.clicked = 0; this.declick = clearTimeout(this.declick); }, wait : function (event) { this.trig = Event.element(event); if (!this.allTrigs.include(this.trig)) return; this.clicked++; this.declick = setTimeout(this.unclick.bind(this),350); if (this.clicked === 1) { this.swap(event); } }, swap : function () { this.i = 0; this.targsToHide.clear(); this.targsToShow.clear(); clearInterval(this.tick); this.targ = this.trig.next(); if (!this.anim) { this.allTargs.invoke('hide'); if (this.trig.hasClassName('open')) { this.allTrigs.invoke('removeClassName','open'); } else { this.allTrigs.invoke('removeClassName','open'); this.trig.addClassName('open'); this.targ.show(); } } else { if (Prototype.Browser.Gecko && this.ffSmooth === true) {// HACK!! this.overflowQ = $$('body *').findAll(function(lmnt){ return document.defaultView .getComputedStyle(lmnt,null) .getPropertyValue('overflow') === 'auto'; }).invoke('setStyle',{overflow:'hidden'}); } this.targsToHide = this.allTargs.findAll(function(targ){ return targ.getHeight() > 0; }).invoke('setStyle',{overflow:'hidden'}); if (this.trig.hasClassName('open')) { this.allTrigs.invoke('removeClassName','open'); } else { this.allTrigs.invoke('removeClassName','open'); this.trig.addClassName('open'); if (!this.hite) { this.targHite = this.targ.setStyle({height:''}).getHeight()+10; this.targ.setStyle({height:0}); } this.targsToShow.push(this.targ); } if (!this.ease) { this.tick = setInterval(this.tock.bind(this),1); } else { this.tick = setInterval(this.tock.bind(this),50); } } }, tock : function () { this.i++; if (!this.ease) { this.targsToHide.each(function(targ){ var hite = this.hite || this.targHite; var frame = Math.ceil(hite/25); if (targ.getHeight() >= frame && this.i <= this.loopLimit) { targ.setStyle({height:(targ.getHeight() - frame) + 'px'}); } else { targ.setStyle({height:0,overflow:'hidden'}); this.targsToHide[this.targsToHide.indexOf(targ)] = null; } }.bind(this)); this.targsToHide = this.targsToHide.compact(); this.targsToShow.each(function(targ){ var hite = this.hite || this.targHite; var frame = Math.ceil(hite/25); if (targ.getHeight() < hite && this.i <= this.loopLimit) { targ.setStyle({height:(targ.getHeight() + frame) + 'px'}); } else { targ.setStyle({height:hite + 'px',overflowQ:'auto'}); this.targsToShow[this.targsToShow.indexOf(targ)] = null; } }.bind(this)); this.targsToShow = this.targsToShow.compact(); } else { this.targsToHide.each(function(targ){ if (targ.getHeight() > 0 && this.i <= this.loopLimit) { targ.setStyle({height:targ.getHeight() - Math.ceil(targ.getHeight()/5) + 'px'}); } else { targ.setStyle({height:0,overflow:'hidden'}); this.targsToHide[this.targsToHide.indexOf(targ)] = null; } }.bind(this)); this.targsToHide = this.targsToHide.compact(); this.targsToShow.each(function(targ){ var hite = this.hite || this.targHite; if (targ.getHeight() < hite && this.i <= this.loopLimit) { targ.setStyle({height:targ.getHeight() + Math.ceil((hite - targ.getHeight())/5) + 'px'}); } else { targ.setStyle({height:hite + 'px',overflowQ:'auto'}); this.targsToShow[this.targsToShow.indexOf(targ)] = null; } }.bind(this)); this.targsToShow = this.targsToShow.compact(); } if (this.targsToShow.size() === 0 && this.targsToHide.size() === 0) { this.tick = clearInterval(this.tick); this.tick = null; this.i = 0; if (Prototype.Browser.Gecko && this.overflowQ) {// HACK!! this.overflowQ.invoke('setStyle',{overflow:'auto'}); } } } };
Questo infine è il file css che gestisce il menù:
/**** CONCERTINA ****/ .concertina { background-color: #fff; border: 1px solid #DCDCDC; /*border-top-width: 3px; border-bottom-width: 3px;*/ margin-top: -4px; margin-left: 6px; margin-right: 6px; position:relative; /*max-width: 40em;*/ } .concertina dt{ font: normal bold 20px 'Trebuchet MS', sans-serif; color:white; } .concertina .open{ font: normal bold 20px 'Trebuchet MS', sans-serif; color:white; } /* controlla i contenuti */ .concertina .targ { font: normal normal 11px 'Trebuchet MS', sans-serif; color:black; } .concertina .trig { background: #dedede; /* border-top: 1px solid #f5f5f5;*/ border-bottom: 1px solid #ccc; cursor: pointer; display: inline-block; margin: 0; padding: 2px 5px; position: relative; } .concertina .trig { display: block; } .concertina .open { background: #E4B229; /*giallo*/ cursor: pointer; } .concertina .trig:hover { background: #f1f1f1; } .concertina .targ { border-top: 0 !important; border-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; position: relative !important; background: ; display: inline-block; height: 100px; margin: 0; overflow: auto; padding: 0 10px; } .concertina .targ { display: block; }
Oltre a tutto questo c'è il file prototipe.js che credo non debba essere modificato.
Grazie ancora per il tu aiuto.
d-force
-
prova con
<dl id="concertina1"> <dt style="background:#FF0000;">Divertirsi</dt> <dd>Qualunque siano le vostre esigenze o il vostro stile di vacanza, a Montaione troverete sicuramente l'occasione per divertirvi.</dd> <dt style="background:#00FF00;">Vivere</dt> <dd>Vivere Montaione significa stare a contatto con le persone locali, conoscerne le usanze ed imparare la loro storia e tradizioni.</dd> <dt style="background:#0000FF;">Scoprire</dt> <dd>Venite a scoprire un territorio le cui origini si perdono nella notte dei tempi.</dd> <dt style="background:#FF00FF;">Assaggiare</dt> <dd>Un territorio da vivere, da scoprire, ma soprattutto da assaggiare. A Montaione troverete infatti una vasta scelta di prodotti tipici da degustare in occasione dei mercatini che si svolgono nel centro storico o approfittando dei tanti ristoranti del territorio. A Montaione, la vacanza è servita!</dd> <dt style="background:#FFFF00;">Rilassarsi</dt> <dd>Vacanza, significa anche riposo lontani dal lavoro e dallo stress quotidiano. A Montaione, potrete infatti rilassarvi a bordo della piscina ascoltando la musica della natura, come il cinguettio degli uccelli o delle cicale, magari sorseggiando un bicchiere di vino. Questo è il vero relax!</dd> </dl> ```cambia i colori di sfondo con quelli che vuoi e fammi sapere se è questo che volevi fare e se viene mostrato correttamente.
-
Ciao Andriy,
scusa se ti rispondo in ritardo.
La tua soluzione è ottima e funziona!
Grazia ancora!!!
d-force
-
di nulla.