Accordion menu e posizione div

miagy

Utente Attivo
2 Nov 2014
83
1
8
Ciao ragazzi,

Ho creato una strutturazione molto basic con CSS e java al fine di creare un menu a fisarmonica, in cui facendo click sull'immagine si apre un sottomenu..
Dato lo sfondo particolare, per le diverse immagini ho dovuto usare un div position, poiché esse vanno in punti specifici della pagina.

Tutto funziona perfettamente, tranne per un particolare: il menu non si allinea con le immagini.
In sostanza, il risultato che vorrei ottenere è questo:

Esempio

Qui di seguito invece la pagina esemplificativa in cui potete testare il problema: Pagina

Se poteste aiutarmi con questo problema, vi sarei eternamente debitore, perché credo che il problema sia nel CSS

Qui di seguito il codice:

CSS

CSS:
 #pic-wrapper{
     cursor:pointer
}
#pic{
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
position:absolute;
z-index:1;
opacity:1
}
#pic-inner{
z-index:0;
position:absolute;
}
#pic:hover{
opacity:0
}
/*PICS*/
.ambientazione {
   position: absolute;
   top: 116px;
   left: 18px;
   z-index: -1;
}


.regolamento {
   position: absolute;
   top: 178px;
   left: 18px;
}

.primi_passi {
   position: absolute;
   top: 240px;
   left: 18px;
}

.manuale {
   position: absolute;
   top: 302px;
   left: 18px;
}

.combattimento {
   position: absolute;
   top: 364px;
   left: 18px;
}

.staff {
   position: absolute;
   top: 426px;
   left: 18px;
}

/*ACCORDION MENU */
  .accordion {
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}

.accordion-section-title {
  width: 100%;
  padding: 15px;
}

.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  background: transparent;
  border-bottom: 1px solid #1a1a1a;
  font-size: 1.2em;
  color: #fff;
  transition: all linear 0.5s;
  text-decoration: none;
}

.accordion-section-title.active {
  background-color: transparent;
  text-decoration: none;
}

.accordion-section-title:hover {
  background-color: transparent;
  text-decoration: none;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}

.accordion-section-content {
  padding: 15px;
  display: none;
  color: white;
}

.accordion-section {
}

JS

JavaScript:
 $('.accordion-section-title').click(function(e) {
  var currentAttrvalue = $(this).attr('href');

  if ($(e.target).is('.active')) {
    $(this).removeClass('active');
    $('.accordion-section-content:visible').slideUp(300);

  } else {
    $('.accordion-section-title').removeClass('active').filter(this).addClass('active');
    $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
  }
});

HTML

HTML:
<div id="pic-wrapper">


<div class="accordion">


  <div class="accordion-section">
 
 
    <a class="accordion-section-title" href="#accordion-1">
       <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_ambientazione.png" id="pic" class="ambientazione">
      <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/ambientazione_manuale_mouseover.gif" id="pic-inner" class="ambientazione">
     </a>
    
    <div id="accordion-1" class="accordion-section-content">
      <p>Ambientazione</p>
    </div>
    
    <a class="accordion-section-title" href="#accordion-2">
    <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_regolamento.png" id="pic" class="regolamento">
     <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/regolamento_manuale_mouseover.gif" id="pic-inner" class="regolamento">
     </a>
    <div id="accordion-2" class="accordion-section-content">
      <p> Regolamento</p>
    </div>
    
    
    <a class="accordion-section-title" href="#accordion-3">
    <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_primi_passi.png" id="pic" class="primi_passi">
     <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/primi_passi_manuale_mouseover.gif" id="pic-inner" class="primi_passi">
     </a>
    <div id="accordion-3" class="accordion-section-content">
      <p> primi_passi</p>
    </div>
    
    
    <a class="accordion-section-title" href="#accordion-4">
    <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_manuale.png" id="pic" class="manuale">
     <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_manuale_mouseover.gif" id="pic-inner" class="manuale">
     </a>
    <div id="accordion-4" class="accordion-section-content">
      <p> manuale</p>
    </div>
    
    
    <a class="accordion-section-title" href="#accordion-5">
      <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_combattimento.png" id="pic" class="combattimento">
      <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/combattimento_manuale_mouseover.gif" id="pic-inner" class="combattimento">
    </a>
    <div id="accordion-5" class="accordion-section-content">
      <p> Combattimento</p>
    </div>
    
    
    
    <a class="accordion-section-title" href="#accordion-6">
      <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_staff.png" id="pic" class="staff">
      <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/staff_manuale_mouseover.gif" id="pic-inner" class="staff">
    </a>
    <div id="accordion-6" class="accordion-section-content">
      <p> Staff menu</p>
    </div>
    
    
    
  </div>
</div>
</div>
 
Discussioni simili
Autore Titolo Forum Risposte Data
F accordion menu HTML e CSS 1
N Menu Accordion. Javascript 0
max1974 [Javascript] Accordion aria-exspanded Javascript 0
F Tab accordion tutti chiusi jQuery 1
Nik Articoli suddivisi in categorie dentro accordion tab WordPress 0
C Accordion plugin Javascript 0
WpStyle validazione accordion Javascript 4
T problemi con dati menu a tendina HTML e CSS 2
A menu a tendina php PHP 1
F Menu responsive larghezza schermo HTML e CSS 2
G Colorare menu select attraverso ricerca php PHP 0
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
Hellgrom90 Hamburger menu non si chiude jQuery 1
K [Javascript] Finestra menu Javascript 1
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
M Riadattamento funzioni per far scomparire un menu. jQuery 4
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5

Discussioni simili