Menù Concertina

d.force

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

samyorn

Ciao d-force
Puoi anche postare un'immagine, uppandola magari su imageshack o qualunque altro servizio di hosting immagini

d.force

Perfetto!

Questa è l'immagine del mio menu concertina:
http://img152.imageshack.us/img152/4796/immaginejd7.jpg

IN pratica vorrei assegnare ad ogni voce di menù: "divertirsi", "vivere", "scoprire", "assaggiare" e "rilassarsi" un colore diverso.

E' possibile?

andriy

Certo che è possibile... se posti un può di codice del menu, vediamo di aiutarti...

d.force

@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

andriy

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.

d.force

Ciao Andriy,

scusa se ti rispondo in ritardo.

La tua soluzione è ottima e funziona!

Grazia ancora!!!

d-force

andriy

di nulla.