Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Menu grafico animato con Jquery

    Salve a tutti,
    sto realizzando un sito per una band e l'idea è di realizzare un menu a tab grafiche (sto usando jquery e il suo plugin jquery tabs).
    Tutto semplice, se non fosse per il fatto che queste tab devono essere animate, mi spiego meglio:
    ogni tab del menù è rappresentata dalla copertina di un vinile, al passaggio del mouse da dietro la copertina spunta fuori un vinile.

    Ho inserito entrambe le immagini (copertina e disco) in due span separati (ho usato gli span perchè usando i div ottengo posizionamenti assurdi, deve esserci qualche conflitto con jquery tabs) e ho posizionato il disco "sotto" la copertina tramite css.
    Il mio problema è che la tab mostra correttamente il tutto, se non fosse che accanto alla copertina (con sotto il disco) mi rimane uno spazio di 100px (la larghezza del disco) e non riesco a ridimensionare la tab in alcun modo.


    Qualcuno riesce ad aiutarmi?

    A breve inserirò il codice, ora non sono sul computer con il quale lavoro


    Ringrazio tutti anticipatamente

  2. #2
    Questo è il codice html relativo al menu:
    codice:
    <div id="container">
    			<ul>
    				[*]<a href="#home">
    						<span class="cop_home">[img]cop.jpg[/img]</span>
    						<span class="disco">[img]Vinyl.jpg[/img]</span>
    					</a>
    				[*]
    				
    				[*]Discografia
    				[*]Testi
    				[*]Gallery				
    				[*]Contatti
    			[/list]
    			<div id="home">Pellentesque habitant morbi tristique</div>
    			<div id="band">lorem ipsum</div>
    			<div id="discografia">qetyughkc</div>
    			<div id="testi">cxzvfdgjyieytreqr</div>
    			<div id="gallery">qetrytdykjhgkhgnb</div>
    			<div id="contatti">asdfadfyhytue5ytr</div>
    		</div>

    e questo è il codice CSS:

    codice:
    body {
    }
    
    .cop_home {
    	width:100px;
    	padding: 0;
    	margin:0;
        font-family: "Comic Sans MS", cursive;
        position: relative;
        top: 0px;
        left: 0px;
        z-index: 2;
        padding: 0;
        margin: 0
    }
    
    .disco {
    	width:100px;
    	padding: 0;
    	margin:0;
        position: relative;
        top: 0px;
        left: -104px;
    	z-index:1}
    a questo vanno aggiunte le regole CSS di jquery tab e il codice necessario a muovere il disco (non lo aggiungo in quanto funziona correttamente, il mio problema è solo la visualizzazione dei tab)


    PS: Solo il primo tab contiene l'immagine, non l'ho fatto anche per gli altri avendo questo problema da subito

  3. #3
    nessuno è in grado di aiutarmi?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.