.

CSS Hover Table

« Older   Newer »
 
  Share  
.
  1. JackGaunt
    view post Posted on 26/10/2012, 18:58
        +32    
     
    .

    User deleted

    CSS Hover Table
    Guida per inserire una tabella slide in CSS, con i pannelli che compaiono sopra il logo

    CZiYG
    [Anteprima]



    Installazione

    Amministrazione --> Grafica --> Colori e Stili
    SPOILER (clicca per visualizzare)
    CODICE
    /* CSS HOVER TABLE - http://ffmagazine.forumfree.it/?t=63687499 */
    .supertitle {line-height: 340px; width: 89%; opacity: 0.5; height: 340px; position: absolute; z-index: 8; font-size: 40pt; margin-left: -460px; left:50%}

    .rotationbutton {display:inline; -moz-transform: rotate(90deg); text-transform:uppercase; font-size: 6pt}

    .supermenuwrapper {position:absolute; top: 10px; width: 100%}
    .supermenuwrapper a {color: #AAA}
    .supermenuwrapper a:hover {color: #FFF; border:none}
    .supermenuoptions {position: absolute; right: 63px; height: 300px; top: 23px; background: rgba(0, 0, 0, 0.3); text-align: right; -moz-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s}

    .supermenuoptions:hover {opacity: 1; background: rgba(0, 0, 0, 0.7)}

    .supermenuoptions img {height: 19px; padding: 2px 0}

    .supermenuoptions .picker:hover {background: rgba(0, 0, 0, 0.5); }
    .supermenuoptions .picker {padding: 0 10px 0 10px}
    .supermenuoptions .picker:hover img {-moz-transform:scale(1.2); -o-transform:scale(1.5); -ms-transform:scale(1.5); transform:scale(1.5); -webkit-transform:scale(1.5)}
    .supermenuoptions .picker:hover div img {-moz-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transform:scale(1)}

    .supermenucontents {position: absolute; z-index: 5; overflow: hidden; -moz-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s; opacity: 0; top: 0; right: 100%; width: 815px; height: 260px; text-align: center; background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.7); font-size: 40px; color: rgba(255, 255, 255, 0.75); line-height: 100%; padding: 20px 0 20px 0}

    .textcontainer {padding: 10px; width: 80% !important; height: 200px !important; margin:auto; background:rgba(0, 0, 0, 0.7); box-shadow: 0 0 10px #000 inset; border-radius: 5px; border: 1px solid #111; font-size: 10pt}
    .staffcontainer a img {width: 100px}
    .staffcontainer a {font-size: 14pt}
    .supermenucontents img {height:auto; padding: 0}

    .supermenuoptions > .picker:hover > .supermenucontents {opacity: 1; z-index: 9}

    .hoverix {display: none; left: 70px; background: url(http://i.imgur.com/oIdrF.png) repeat scroll 0% 0% transparent; position: absolute; font-size: 9pt; width: 100px; height: 100px; line-height: 100%; margin-top: -115px; color: rgb(51, 51, 51); padding: 5px 0 20px 0}

    .staffer:hover .hoverix {display:inline}
    .tutotitle, .staffer {display: inline-table; line-height: 102%; height: 110px; font-size: 13pt; width: 100px; -moz-transform:scale(0.8); -webkit-transform:scale(0.8); -ms-transform:scale(0.8); -0-transform:scale(0.8); transform:scale(0.8); position:relative; z-index: 2; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out}
    .tutotitle:hover, .staffer:hover {-moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); z-index: 5}

    .tutotitle {background:rgba(0, 0, 0, 0.5); border-radius: 3px}
    /* FINE */

    Di seguito trovate le spiegazioni per modificare la parte CSS del codice.
    LEGENDA
    ✎ è possibile modificarne lo stile ma non la posizione, larghezza, altezza, margine, padding.
    ✓ è possibile personalizzarli a piacimento.
    ✗ è consigliabile non modificare per niente, potrebbe compromettere il funzionamento.

    ✗.supermenuwrapper : contenitore di tutta la tabella;
    ✗.supertitle : link/testo/titolo che appare al posto del menu quando non si passa il mouse sopra le icone;
    ✗.supermenuoptions : contenitore delle icone laterali del menu;
    ✎ .picker : singola icona del menu, al suo interno troviamo, oltre all'immagine:
    ✎ .supermenucontents : conenuto effettivo dell'opzione di menu, che viene mostrato quando si passa il mouse sopra all'icona;
    ✎.tutotitle : riquadro che contiene, oltre che all'immagine del tutorial, anche il titolo;
    ✎ .staffcontainer : contenitori dei riquadri per lo staff;
    ✓.staffer : riquadro che contiene, oltre che all'immagine dello staffer, anche il nick;
    ✓.textcontainer : contenitore di testo che troviamo come contenuto della nostra opzione del menu.
    ✓.hoverix : fumetto che compare al lato dello staffer al passaggio del mouse.

    Amministrazione --> Grafica --> Codice HTML che sarà mostrato SOTTO AL LOGO del forum:
    SPOILER (clicca per visualizzare)
    HTML
    <!--- CSS HOVER TABLE - http://ffmagazine.forumfree.it/?t=63687499 -->

    <div class="supermenuwrapper"> <a href="/" class="supertitle">&nbsp;</a><div class="supermenuoptions">

    <div class="picker"><img src="http://i.imgur.com/sN6lO.png" alt=""> <div class="supermenucontents" >BENVENUTI! <div class="textcontainer" style=" text-align:justify; line-height:80%; padding:10px"> Il nostro forum nasce nel 2012 e continua con un bel :
    <i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh elit, hendrerit et volutpat quis, tempus eu enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis urna at risus viverra imperdiet. Pellentesque aliquam tellus ut lectus laoreet vehicula. Praesent ac placerat nulla. Integer vestibulum odio ac elit convallis id volutpat sapien convallis. Etiam vel ante rutrum mi imperdiet malesuada et eu mauris. Suspendisse sed lectus nibh. Praesent purus arcu, ultrices sed ultrices sed, blandit ac lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam nisi neque, euismod a iaculis sed, aliquam ut nibh. In tincidunt consequat placerat.

    Praesent at fringilla nunc. In scelerisque erat sollicitudin nisi suscipit a bibendum mi lobortis. Proin lobortis, nisi in sollicitudin luctus, risus ipsum condimentum nibh, eget lobortis diam felis nec tortor. Nullam a ipsum et risus luctus mollis at eu lorem. Donec enim lacus, sagittis sed sagittis nec, fermentum sed neque. Nullam a mattis ante. Nulla leo sem, lacinia nec pretium at, tempus nec est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi hendrerit, nisl a egestas molestie, velit arcu accumsan urna, in luctus elit mi eget nulla. Aliquam libero massa, semper ac lacinia ac, hendrerit at ante. Sed blandit sollicitudin mollis. Donec urna neque, volutpat sed egestas sit amet, iaculis id justo. Integer vitae diam non leo tristique tempor.</i></div></div></div>

    <div class="picker"><img src="http://i.imgur.com/qiLPd.png"><div class="supermenucontents">NEWS
    <div class="textcontainer" style=" height: 200px; width: 700px; overflow: auto; font-size: 12pt; line-height: 100%; text-align: justify; color: rgba(255, 255, 255, 0.3);">29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br></div></div></div>


    <div class="picker"><img src="http://i.imgur.com/geUSg.png"><div class="supermenucontents">ULTIME DISCUSSIONI
    <table class="textcontainer"><tr>
    <td>< inserite l'iframe qui ></td>
    <td>< inserite l'iframe qui ></td></tr></table> </div></div>


    <div class="picker"><img src="http://i.imgur.com/63PKd.png"><div class="supermenucontents">STAFF <div class="staffcontainer">

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <br>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>
    </div></div></div>


    <div class="picker"><img src="http://i.imgur.com/2Xx7d.png"><div class="supermenucontents"><div style="font-family:georgia; line-height:7%; font-style:italic; font-size:22pt">Graphic</div>Tutorials <div align="center">
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/MSCxC.png"><br> TITOLO1 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/6Ilxy.png"><br> TITOLO2 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/XwbQb.png"><br> TITOLO3 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/MrUjz.png"><br> TITOLO4 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/NlWGU.gif"><br> TITOLO5 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/qty1w.png"><br> TITOLO6 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/Uu1E1.png"><br> TITOLO7 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/DOSoQ.png"><br> TITOLO8 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/wjjXx.png"><br> TITOLO9 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/vVgls.png"><br> TITOLO10 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/iKZsY.png"><br> TITOLO11 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/DnYh3.png"><br> TITOLO12 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/1AWU1.png"><br> TITOLO13 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/nph5w.png" style="height:100px"><br> TITOLO14 </a></div>
    </div> </div></div>

    <div class="picker"><img src="http://i.imgur.com/pyB3V.png"><div class="supermenucontents"><div style="font-family:georgia; line-height:7%; font-style:italic; font-size:22pt">Skinning</div>Tutorials <div align="center">
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866136.jpg"><br> TITOLO1 </a></div>
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866137.jpg"><br> TITOLO2 </a></div>
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866138.jpg"><br> TITOLO3 </a></div>
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866190.jpg"><br> TITOLO4 </a></div>
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866191.jpg"><br> TITOLO5 </a></div>
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866359.jpg"><br> TITOLO6 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/KrnFH.jpg"><br> TITOLO7 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/gVS1N.jpg"><br> TITOLO8 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/Zmf0a.jpg"><br> TITOLO9 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/E2uHm.jpg"><br> TITOLO10 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/APChg.jpg"><br> TITOLO11 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/Zz9vq.jpg"><br> TITOLO12 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/WObUJ.jpg"><br> TITOLO13 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/JflRK.jpg"><br> TITOLO14 </a></div>
    </div> </div></div>

    <div class="picker"><img src="http://i.imgur.com/DzTOT.png"><div class="supermenucontents"><div style="font-family:georgia; line-height:7%; font-style:italic; font-size:22pt">Coding</div>Tutorials <div align="center">
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/EImyF.jpg"><br> TITOLO1 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/vi64j.jpg"><br> TITOLO2 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/Earc3.jpg"><br> TITOLO3 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/M3Aqb.jpg"><br> TITOLO4 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/M9owp.jpg"><br> TITOLO5 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/TzNaq.jpg"><br> TITOLO6 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/NOqtf.png"><br> TITOLO7 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/OxcQp.png"><br> TITOLO8 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/4XkQo.png"><br> TITOLO9 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/rWpCm.png"><br> TITOLO10 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/DZsJL.png"><br> TITOLO11 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/oeaLJ.jpg"><br> TITOLO12 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/Gfrhy.jpg"><br> TITOLO13 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/IHsJS.jpg" style="height:100px"><br> TITOLO14 </a></div>
    </div> </div> </div>

    <div class="picker"><img src="http://i.imgur.com/OMgKj.png"><div class="supermenucontents"> SUPPORTO
    <table class="textcontainer" style="font-size:12pt; width:90%"><tr>
    <td><a href="">richiesta1</a><br><a href="">richiesta2</a><br><a href="">richiesta3</a><br></td>
    <td><a href="">richiesta4</a><br><a href="">richiesta5</a><br><a href="">richiesta6</a><br></td>
    </tr></table></div></div>

    <div class="picker"><img src="http://i.imgur.com/YIPL7.png"><div class="supermenucontents">I NOSTRI FILES<br>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome1.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome2.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome3.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome4.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome5.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome6.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome7.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome8.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome9.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome10.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome11.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome12.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome13.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome14.txt</a></div></div></div>

    <div class="picker"><img src="http://i.imgur.com/yhTj8.png"><div class="supermenucontents">IDEE, COSA NE PENSI?
    <table class="textcontainer" style="font-size:12pt; width:90%"><tr>
    <td><a href="">proposta1</a><br><a href="">proposta2</a><br><a href="">proposta3</a><br></td>
    <td><a href="">proposta4</a><br><a href="">proposta5</a><br><a href="">proposta6</a><br></td>
    </tr></table></div></div>

    <div class="picker"><img src="http://i.imgur.com/M99WY.png"><div class="supermenucontents">OFFTOPIC<br>
    <table class="textcontainer" style="font-size:12pt; width:90%"><tr><td><a href="">immagini</a><br><a href="">video</a></td> <td><a href="">giochino</a><br><a href="">musica</a></td></tr></table> </div></div>


    <div class="picker"><img src="http://i.imgur.com/O7Wm8.png"><div class="supermenucontents">AFFILIATI
    <div style=" height: 80px; overflow: auto; line-height: 1px; text-align: center; letter-spacing: -13px; width:82%"><a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> </div>
    GEMELLATI
    <div style="height:80px; overflow:auto; letter-spacing:-13px; width:82%"><a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> </div></div></div>

    <!--<div class="picker"><img src="http//linkdelliconcina.png"><div class="supermenucontents">contenuto</div></div> -->

    <div class="picker"><img src="http://i.imgur.com/MoiHZ.png"><div class="supermenucontents">SEGUICI SU<br><br>
    <div class="tutotitle" style="background:none"><a><img src="http://i.imgur.com/DnzkQ.png"></a></div>
    <div class="tutotitle" style="background:none"><a><img src="http://i.imgur.com/FQiOB.png"></a></div>
    <div class="tutotitle" style="background:none"><a><img src="http://i.imgur.com/eYuGJ.png"></a></div>
    </div></div>

    </div><div style=" z-index:9; position: absolute; right: 60px; top: 323px; font-size: 7pt;"><a href="http://ffmagazine.forumfree.it/?t=63687499">CSS Hover Table</a></div></div>

    <!--- FINE CSS HOVER TABLE --->


    Per modificare una voce del menu, sostituite la relativa porzione di codice con:
    HTML
    <div class="picker"><img src="LINK_ICONA_MENU"><div class="supermenucontents">TITOLO_SUPERIORE_DEL_MENU
    < CONTENUTO ></div></div>

    al posto di < CONTENUTO > inserite rispettivamente:
    • HTML
      <div class="textcontainer">testo</div>

      per un'area di testo dello stesso stile dell'opzione «Benvenuto»;

    • HTML
      <div align="center">
      <div class="tutotitle"><a href=""><img src="IMMAGINELINK"><br> TITOLO1 </a></div>
      <div class="tutotitle"><a href=""><img src="IMMAGINELINK"><br> TITOLO2 </a></div></div>

      per dei link interattivi dello stesso stile dell'opzione «Graphic Tutorials»;

    • HTML
      <table class="textcontainer" style="font-size:12pt; width:90%"><tr>
      <td><a href="">proposta1</a><br><a href="">proposta2</a><br><a href="">proposta3</a><br></td>
      <td><a href="">proposta4</a><br><a href="">proposta5</a><br><a href="">proposta6</a><br></td>
      </tr></table>

      per dei link disposti in maniera ordinata (in una tabella) dello stesso stile dell'opzione «Supporto».


    Informazioni
    Il codice è compatibile con i seguenti browser:
    q2Oge yMiNt vxGZz t42iG vu2ao
    É POSSIBILE MODIFICARE LE ICONE, I COLORI, LA DISPOSIZIONE DEI CONTENUTI E GLI EFFETTI.
    CODICE RISERVATO ALL'USO SUI CIRCUITI FF/FC/BF IL LOGO PUÒ ESSERE MODIFICATO COMODAMENTE DAL PANNELLO AMMINISTRATIVO, RIMUOVENDO LA CORNICE E CARICANDO UNA IMMAGINE DI DIMENSIONI 900*320px


    Credits
    Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum. Tuttavia, dal momento che il codice ha richiesto uno sforzo non indifferente, chiunque volesse inserirli può trovarli qui di seguito (è fatto invece severo divieto di rimuovere i crediti presenti nel codice):
    HTML
    <a href="http://ffmagazine.forumfree.it/?t=63687499">CSS Hover Table</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=4602329">JackGaunt</a>


    E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:
    HTML
    <div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="CSS Hover Table" href="http://ffmagazine.forumfree.it/?t=63687499"><b>CSS Hover Table</b></a>
    Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=4602329">JackGaunt</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/"><b>ForumFree Magazine</b></a>.
    Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>

    CSS Hover Table
    Realizzata da JackGaunt del ForumFree Magazine.
    Guida rilasciata sotto una Licenza Creative Commons 3.0.


    Edited by El Gringo 89 - 10/12/2012, 16:23
     
    Top
    .
  2. TurboGen
    view post Posted on 26/10/2012, 19:07
         
     
    .

    User deleted
    Wow bel codice, faccio subito qualche prova
     
    Top
    .
  3. bored
    view post Posted on 26/10/2012, 19:10
         
     
    .
    Avatar

    Advanced Member

    Group
    M. Onorario
    Posts
    4,488
    Activity Level
    +2

    Status
    Anonymous
    Ottimo! :D

    Continua così ^_^
     
    Top
    .
  4. Totti
    view post Posted on 26/10/2012, 19:12
         
     
    .
    Avatar

    Advanced Member

    Group
    Lettore
    Posts
    1,882
    Activity Level
    0

    Status
    Anonymous
    Molto bello, complimenti. (:
     
    Top
    .
  5. Klo
    view post Posted on 26/10/2012, 19:18
         
     
    .
    Avatar

    Advanced Member

    Group
    M. Onorario
    Posts
    6,826
    Activity Level
    +1
    Location
    Roma

    Status
    Anonymous
    wow veramente un ottimo lavoro :D
     
    Top
    .
  6. Revo
    view post Posted on 26/10/2012, 19:22
        +1    
     
    .
    Avatar

    Advanced Member

    Group
    Member
    Posts
    3,400
    Activity Level
    0

    Status
    Anonymous
    Come sempre eccellente, Jack ;)
     
    Top
    .
  7. Amstrongs
    view post Posted on 26/10/2012, 19:36
         
     
    .
    Avatar

    Senior Member

    Group
    Lettore
    Posts
    10,077
    Activity Level
    0
    Location
    Fano

    Status
    Offline
    Ottimo lavoro Jack ! Complimentoni un effetto notevole :)
     
    Top
    .
  8. Shanks
    view post Posted on 26/10/2012, 19:40
         
     
    .

    User deleted
    Complimenti per lo script xD, ma non è un evoluzione della tabella effetto slide?
     
    Top
    .
  9. JackGaunt
    view post Posted on 26/10/2012, 19:43
         
     
    .

    User deleted
    CITAZIONE (Shanks @ 26/10/2012, 20:40) 
    Complimenti per lo script xD, ma non è un evoluzione della tabella effetto slide?

    in effetti io ho ottimizzato molti dei codici presenti sull'ffmag tra cui anche la skin multipla, ma _Lati_ la aveva rilasciata prima, dovremmo aggiornarla, ma non si fa vivo.
     
    Top
    .
  10. Agron‚
    view post Posted on 26/10/2012, 20:04
         
     
    .

    User deleted
    Davvero notevole: sei un brasivvismo coder
     
    Top
    .
  11. aspirated_engine
    view post Posted on 26/10/2012, 20:21
         
     
    .
    Avatar

    Advanced Member

    Group
    Member
    Posts
    1,650
    Activity Level
    0
    Location
    Modena

    Status
    Offline
    Complimenti vivissimi! E'veramente fantastico :D
     
    Top
    .
  12. Tonzio
    view post Posted on 27/10/2012, 06:49
         
     
    .

    User deleted
    Davvero l'evoluzione della tab fade ed è infinitamente più figa, complimenti vivissimi!
     
    Top
    .
  13. JackGaunt
    view post Posted on 27/10/2012, 09:45
         
     
    .

    User deleted
    Grazie a tutti, continuerò così :D
     
    Top
    .
  14. Andy
    view post Posted on 27/10/2012, 11:15
         
     
    .
    Avatar

    Advanced Member

    Group
    Lettore
    Posts
    2,882
    Activity Level
    0

    Status
    Anonymous
    Ottimo script complimenti! =))
     
    Top
    .
  15. AlbyXyblA
    view post Posted on 27/10/2012, 13:34
         
     
    .

    User deleted
    Wow fantastico ! Complimenti :D
     
    Top
    .
150 replies since 26/10/2012, 18:58   13156 views
  Share  
.
 
.
Script semplici
Create your forum and your blog! · Top Forum · Categories · Help · Status · Contacts · Powered by ForumFree
Top