+ Rispondi alla Discussione
Risultati da 1 a 8 di 8

Men Concertina

Ultimo Messaggio di Andriy il:
  1. #1
    Utente Premium
    Data Registrazione
    May 2006
    Messaggi
    375

    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

  2. #2
    Consiglio Direttivo L'avatar di Samyorn
    Data Registrazione
    Dec 2007
    Localit
    Catania
    Messaggi
    5,930
    Segui Samyorn su Twitter Aggiungi Samyorn su Google+ Aggiungi Samyorn su Facebook Aggiungi Samyorn su Linkedin
    Ciao d-force
    Puoi anche postare un'immagine, uppandola magari su imageshack o qualunque altro servizio di hosting immagini
    MODFunzioni di PHP Qui, Quo, Qua
    Si parla poco di SMF? Sentiamo l'opinione di chi lo ha provato. Ti amo...brindiAMO?
    Conosci GTLab? Devi scegliere un CMS per Forum e non sai quale? Guarda qu!!

  3. #3
    Utente Premium
    Data Registrazione
    May 2006
    Messaggi
    375
    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?

  4. #4
    User
    Data Registrazione
    Nov 2006
    Localit
    Napoli
    Messaggi
    68
    Certo che possibile... se posti un pu di codice del menu, vediamo di aiutarti...
    Ultima modifica di Samyorn; 09-11-08 alle 09:57 Motivo: Curare le maiuscole.

  5. #5
    Utente Premium
    Data Registrazione
    May 2006
    Messaggi
    375
    Citazione Originariamente Scritto da Andriy Visualizza Messaggio
    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:

    Codice:
    <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

    Codice:
    <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:

    Codice:
    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:

    Codice:
    /**** 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:                #fff;
      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

  6. #6
    User
    Data Registrazione
    Nov 2006
    Localit
    Napoli
    Messaggi
    68
    prova con
    Codice:
    <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.

  7. #7
    Utente Premium
    Data Registrazione
    May 2006
    Messaggi
    375
    Ciao Andriy,

    scusa se ti rispondo in ritardo.

    La tua soluzione ottima e funziona!

    Grazia ancora!!!

    d-force

  8. #8
    User
    Data Registrazione
    Nov 2006
    Localit
    Napoli
    Messaggi
    68
    di nulla.

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] Attivato
  • Il codice [VIDEO] Attivato
  • Il codice HTML Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.